賢威6.2でグローバルメニューに背景画像を設定する方法|サイトを一瞬でオシャレにしよう | LIVE YOUR LIFE

賢威6.2でグローバルメニューに背景画像を設定する方法|サイトを一瞬でオシャレにしよう

 

数あるWordPressテンプレートの中でも、『賢威』は特に優れたもので、ぼく自身も長い間愛用させていただいています。

そのデザイン性の高さやカスタマイズ性の柔軟さ、そしてカスタマーサポートの充実性など、正直言ってこれ以上のテーマはないと言っても過言ではないでしょう。

 

ただ、逆に言えば有名すぎるテーマでもあることから、賢威を使用しているWordPressユーザーが多すぎるというのもある意味懸念すべきところかもしれません(良いことではありますが)。

 

そんな現状において、賢威をデフォルトの状態のまま使用していくことはおすすめできず、優れたテーマであるからこそ独自のカスタマイズも施していく必要があるわけです。

 

そこで今回は賢威6.2のグローバルメニュー部分に着目し、当サイトでも実装しているメニューの背景画像の設定方法について解説していきましょう。

簡単な設定で一気にサイトがオシャレになり、他サイトとの大きな差別化も図れるため、ぜひとも参考に設定してみてくださいね。

 

グローバルメニューの背景に画像を設定すると…

 

まず、グローバルメニューの背景に画像を設定したケースについて、実際に当サイトの画面にて確認してみましょう。

 

このようにグローバルメニュー部分に背景画像を設定することで、一気にサイト全体の雰囲気がオシャレになります。

 

 

正直なところ、このグローバルメニューは賢威ユーザーの中でも意外と盲点になっていて、デフォルト状態から何もカスタマイズせずに使用している人が多いんですね。

 

実際に施した設定自体は簡単なもので、単純にグローバルメニュー部分に背景画像を設定し、メニューの位置や幅などを調整しているだけ。

単純に『人と違うカスタマイズをしている』ということだけでも十分な差別化が図れるため、ぜひとも解説をもとに賢威テーマをオシャレにカスタマイズしていきましょう。

 

賢威6.2でグローバルメニューに背景画像を設定する方法

 

さて、それではさっそくグローバルメニューに背景画像を設定する方法を解説していきます。

 

まずは、WordPressのダッシュボード画面から『外観』→『テーマの編集』→『design.css』を選択しましょう。

そして次のように、『グローバルメニュー』部分のCSSを探してみてください。

 

そして、グローバルメニュー部分のCSSに以下のようなコードを追記しましょう。

 

コードについて解説すると、backgroundプロパティで背景画像プロパティ設定し、paddingプロパティ・topプロパティでメニュー部分の位置を調整しています。

 

また、『背景画像のURL』の部分には、実際に背景に設定したい画像のURLを貼り付けるようにしましょう。

ちなみに当サイトでは、サイトの横幅も考慮した上で『1500×1000』サイズの画像を使用しています。

 

実際の画面で確認してみると、次のような位置関係になります。

 

このように、ヘッダーの範囲によってtopからの位置を調節したり、自身のお好みの範囲でpaddingプロパティを設定すると良いですね。

 

今回はpaddingプロパティを『padding: 200px 0 200px;』という値で設定しましたが、プロパティの仕組みについては以下のようなイメージを持っていただければと思います。

  • padding: 〇〇px;

→指定した値が『上下左右』のパディングになる

  • padding: 〇〇px 〇〇px;

→指定した値が『上下・左右』のパディングになる

  • padding: 〇〇px 〇〇px 〇〇px;

→指定した値が『上・左右・下』のパディングになる

  • padding: 〇〇px 〇〇px 〇〇px 〇〇px;

→指定した値が『上・右・下・左』のパディングになる

 

つまり今回設定した値で言えば、『上:200px』『左右:0px』『下:200px』というパディングを設定したことになります。

パディングとは『領域内のスペース』を表していますが、自身のお好みでスペース範囲を設定するようにしましょう。

 

最後に

 

以上、賢威6.2でグローバルメニューに背景画像を設定する方法について解説しました。

無事に設定することができたでしょうか?

 

今回の設定を施すことにより、他サイトとの差別化が図れることはもちろんのことながら、何よりもオシャレな雰囲気のサイト作りの手助けとなることは間違いないでしょう。

何気ない部分ではありますが、実際のところグローバルメニューはユーザーの目に多く触れる部分でもあるため、独自のカスタマイズ方法を施していけると良いですね。

 

サイトを訪れた際に『おっ』と思ってもらえるような、そんな独自性のあるサイト運営を意識していきましょう。 

 


MAIL MAGAZINE

 

 

     

公開日:2017/06/22 更新日:2017/07/26

コメントを残す

サブコンテンツ

TO THE TOP