「スティンガーのテーマを利用しているけど、メニューがいまいち物足りない。カスタマイズする方法を教えてほしいです。」
こういった疑問に答えます。
本記事を読んでわかること
- メニューを中央に寄せる方法
- メニューの色を変える方法
- メニューバーの幅を変える方法
この記事ではWordPressテーマ「STINGER」のメニューのカスタマイズについて、初心者でも分かるようにお伝えしていきます。
カスタマイズ自体はコピペでもできる内容なので、参考にどうぞ～。
スポンサーリンク
目次
メニューをカスタマイズするための準備
カスタマイズを行う場合は、基本として「CSS」というデザインのコードを追記する形となります。
なので、まずはコードの追記場所について理解しておきましょう。
- STEP.1カスタマイズへ移動
WordPressの管理画面から[外観]＞[カスタマイズ]をクリックします。
- STEP.2追加 CSSを開く
カスタマイズメニューから[追加 CSS]をクリックします。
これがコードの追記場所で、カスタマイズする場合はここにコードを追記していけばOK。
というわけで、ここからメニューをカスタマイズするための、実際のコードについてお伝えしていきます。
※カスタマイズは、必ず子テーマを有効化して子テーマに対して行ってください。親テーマでカスタマイズをするとアプデ時にカスタマイズ内容がリセットされる場合があります。
ヘッダーメニューをカスタマイズする：実践編
それでは実践です。ここで行っていくカスタマイズ内容は以下の３つ。
- メニューを中央に寄せる
- メニューの色を変える
- メニューの幅を変える
それぞれ詳しく解説していきます。
カスタマイズ①：メニューを中央に寄せる
先ほど開いたスタイルシートの下部に、下記のコードを追記するだけでOK。
#st-menuwide{
display: flex; /*中央寄せ*/
}
たったこれだけで、メニューが中央に寄りました。
カスタマイズ②：メニューの色を変える
メニューの色を変更する場合、以下の３点の色を変更する必要があります。
- メニューの背景色
- メニューの文字色
- マウスオーバー時の文字色
それぞれ１つずつ解説していきます。
メニューの背景色
メニューの背景色は「background-color」で指定してあげればOKなので、下記のようなコードを追記します。
#st-menubox{
background-color: #333333; /*背景色*/
}
こうすることで、背景色は１発で変更できます。
ちなみにですが、色を選びたい場合はカラーコードと言われる「#〇〇;」の部分を別のものに置き換えればOK。
カラーコードについては原色大辞典とかで調べてみてください。
メニューの文字色
メニューの文字色は「color」で指定してあげればOKなので、下記のようなコードを追記します。
#st-menuwide nav.menu li a {
color: #fff; /*文字色*/
}
これでメニューの文字色は変更できます。
こちらも背景色と同じく「#〇〇;」の部分を別のカラーコードに置き換えてあげれば好きな色を選べます。
マイスオーバー時の文字色
マウスのカーソルを当てた場合の文字色を変更していきます。
ここの変化がないと、ユーザーから分かりづらいですからね。
というわけでコードですが、下記のとおりです。
#st-menuwide nav.menu li a:hover {
color: #999999; /*マウスオーバー時の文字色*/
}
通常の文字色の変更コードと似ていますが、「a:hover」って部分が大きな違いです。これがあることで、マウスオーバー時の指定だよって伝えてるイメージ。
ここでもカラーコードで好きな色を選べるというのは、、、もはや言うまでもないですね。
これでマウスオーバー時の文字色の変更も完成です。
カスタマイズ③：メニューの幅を広げる
メニューの幅を広げたい場合には、カスタマイズ①で追記したコードに対して、下記のようにさらに追記してあげればOKです。
#st-menuwide{
display: flex; /*中央寄せ*/
margin-top: 10px; /*上の間隔*/
margin-bottom: 10px; /*下の間隔*/
}
今回は10pxと指定しましたが、数字が大きくなればメニュー部分のバーは広がり、小さくなれば狭くなるといったイメージです。
ちなみに「margin-top」が上の間隔、「margin-bottom」が下の間隔となっています。
好きな幅に調整してみてください。
補足：エラーでカスタマイズ内容が公開できない場合は
カスタマイズの追加 CSSで公開する時に、エラーが出てデザインのカスタマイズができない場合があります。
こういった場合は、テーマエディターに直接書き込みましょう。
やり方は上記のように、WordPress管理画面の[外観]＞[テーマエディター]を選択し、[スタイルシート（style.css）]の最下部にカスタマイズコードを記入すればOK。
[ファイルを更新]をクリックすれば、カスタマイズが反映されます。
※更新した場合に、ブラウザのキャッシュによってカスタマイズデザインが反映されない場合があります。この場合はブラウザの履歴を削除して確認するようにしましょう。
STINGER8：メニューカスタマイズまとめ
今回はSTINGER8のメニューのカスタマイズについてお伝えしました。内容をまとめておきます。
- メニューを中央に寄せる
- メニューの色を変える
- メニューバーの幅を変える
上記のカスタマイズを全て行ったコードをまとめると、以下の感じですね。
#st-menuwide{
display: flex; /*中央寄せ*/
margin-top: 10px; /*上の間隔*/
margin-bottom: 10px; /*下の間隔*/
}
#st-menubox{
background-color: #333333; /*背景色*/
}
#st-menuwide nav.menu li a {
color: #fff; /*文字色*/
}
#st-menuwide nav.menu li a:hover {
color: #999999; /*マウスオーバー時の文字色*/
}
このように、カスタマイズは学んでいくことで自分なりサイトデザインに変えていくことができます。少し勉強しつつ、自分好みのデザインを手に入れてみてください。
というわけで、今回の内容は以上です。
コメントを残す