ども、Kiyoです。

このブログのワードプレステーマは『賢威テンプレート』を使用しています。その賢威のトップページは以下のようになっています。

賢威のグローバルメニューとトップ画像の間を空ける8

ご覧のように窮屈です。

原因はグローバルメニューとトップ画像がピッタリとくっついているせいですね。このグローバルメニューとトップ画像の間にスペースでもあれば、もう少しスッキリすると思います。というわけで、この部分をカスタマイズしようと思います。

グローバルメニューとトップ画像の間にスペースを入れるカスタマイズ法

グローバルメニューとトップ画像の間にスペースを入れるカスタマイズ法は簡単です。

まず、ワードプレス管理画面の外観から「base.css」を選択します。

ワードプレス管理画面 > base.css

この中にあるトップ画像のタグ「 .main-image-in img{ 」を探しだします。

賢威のグローバルメニューとトップ画像の間を空ける6

このタグの下の部分に「 padding-top: 1em; 」を挿入します。

賢威のグローバルメニューとトップ画像の間を空ける7

タグを挿入後、更新すればグローバルメニューとトップ画像の間にすき間ができます。

賢威のグローバルメニューとトップ画像の間を空ける9

いかがでしょう。

先ほどよりはスッキリしましたよね。僕だけかな・・・。

まぁ、少なくともグローバルメニューは見やすくなったと思います。これは僕のこのブログのトップ画像がグローバルメニューと同じ青系だったせいもありますが、個人的にはグローバルメニューとトップ画像の間にスペースがあった方が見やすいです。

なお、今回の解説を動画でも行っています。よかったらご覧ください。

というわけで、今回は以上です。