この記事ではヘッダーメニューを中央に配置し、色を変更するカスタマイズを行っていきます。
基本はコピペでできる内容となっていますので、初心者の方でも安心して試してみて下さい。
編集場所の確認
デザインを編集する場合は、基本CSSファイルを編集していきます。
下記の手順でスタイルシートを開いて下さい。
②テーマファイルから「スタイルシート（style.css）」をクリック。
これでスタイルシートが表示されました。
編集するテーマは子テーマ（STINGER8 Child）となるので、ここだけ間違えないようにして下さい。
※カスタマイズ前は必ずバックアップを取るようにして下さい。
ヘッダーメニューの中央寄せ
ここではヘッダーの中央寄せのカスタマイズを行います。
先ほど開いたスタイルシートの最下部に下記のコードを追記します。
#st-menuwide{
display: flex; /*中央寄せ*/
}
これでヘッダーメニューの中央寄せは完了です。
ヘッダーメニューの色を変更
ここではヘッダーメニューの色のカスタマイズを行います。
メニューの背景色の変更
先ほど中央寄せをしたコードの下に、下記のコードを追記します。
background-color: #13acca; /*背景色*/
}
これで背景色が変更されました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。
メニューの文字色の変更
背景色のコードの下に、下記のコードを追記します。
color: #fff; /*文字色*/
}
これで文字色が変更されました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。
マウスオーバー時の背景色の変更
マウスのカーソルを当てた場合の背景色の指定を行います。
文字色のコードの下に、下記のコードを追記します。
background: #13acca; /*マウスオーバー時の背景色*/
}
これでマウスオーバー時の背景色が変更されました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。
※ここでは通常の背景色と同じ色を選択しているため、マウスのカーソルを当てても色は変わりません。
マウスオーバー時の文字色の変更
マウスオーバー時の背景色のコードの下に、下記のコードを追記します。
color: #f0f0f0; /*マウスオーバー時の文字色*/
}
これでマウスオーバー時の文字色が変更されました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。
まとめ
今回はメニューの配置や色のカスタマイズを行いました。
何がどこで変わるのかを分かりやすくするために追記を重ねて解説しましたが、全てをまとめると下記のコードになります。
#st-menuwide{
display: flex; /*中央寄せ*/
}
#st-menubox{
background-color: #13acca; /*背景色*/
}
header .smanone ul.menu li a{
color: #fff; /*文字色*/
}
#st-menubox a:hover{
background: #13acca; /*マウスオーバー時の背景色*/
}
header .smanone ul.menu li a:hover{
color: #f0f0f0; /*マウスオーバー時の文字色*/
}
色などはカラーコードを調べれば自由に変更できるので、ぜひ参考にしてみて下さい。
オススメ【簡単すぎる】アプリ紹介する場合にキレイにリンクを貼る方法【アプリーチが便利です】
オススメ【初心者向け】ゲームブログを収益化する方法＋運営のコツを解説
コメントを残す