賢威7の関連記事のサムネイル画像と記事タイトルの間隔(マージン)を変更する方法

どうも。葉です。

この記事では、賢威7の関連記事のサムネイル画像と記事タイトルの間隔(マージン)を変更する方法を解説します。

1.この記事を読んでできるようになること

まずは、この記事を読んでできるようになることを確認してください。

下図に「変更前」→「変更後」のように関連記事のサムネイル画像と文字とのマージンを変更することができるようになります。

変更前

サムネイル画像と記事タイトルのデフォルトマージン

変更後

サムネイル画像と記事タイトルのマージンが縮まった

では、実際にCSSコードを編集して、サムネイル画像と記事タイトルのマージンを調節していきます。

2.賢威7の関連記事のサムネイル画像とその横の文字のマージンを変更する手順

WordPress管理画面の左メニューより「外観→テーマの編集」をクリックしてください。

賢威7の関連記事のサムネイル画像とその横の文字のマージンを変更する手順1

「base.css」をクリックしてください。

賢威7の関連記事のサムネイル画像とその横の文字のマージンを変更する手順2

「base.css」の最下部に次のコードを書き込んでください。

/*-------------------------------------
関連記事のサムネイル画像と記事タイトル間のマージン変更
-------------------------------------*/
.related-articles-thumbs01 .related-thumb {
     margin-right: 0 5px 20px 0;
}

賢威7の関連記事のサムネイル画像とその横の文字のマージンを変更する手順3

これで、関連記事のサムネイル画像と右側の記事タイトルとの間隔(マージン)が縮まったはずです。

3.まとめ

この記事では、賢威7の関連記事のサムネイル画像と記事タイトルの間隔(マージン)を変更する方法を解説しました。

この他にも、関連記事のデザイン変更を行いたい場合は、次の記事を参考にしてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします