WordPress Twenty Sixteen カスタマイズ 6-3「メニュー」編 オマケ ソースコード まとめ

ごけたです。
団扇と扇子、両方持ち歩いています。

はじめに

WordPress Twenty Sixteen カスタマイズ その6-3
今回は「メニュー」編の続きです。
「その6」シリーズのまとめとして、「その6-2」までに
「style.css」ファイルに入力したソースコードを表示してみました。

特に「その6-1」の「/* メニューに背景色を追加 */」は
追加設定が多数あったので再確認しておきたかったです。
 
 
ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
テーマはTwenty Sixteen、OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。

その6から6-2までのソースコードを確認してみる

ここまでは「その6」一番上の2行は子テーマ用のソースコード。

「/* メニューに背景色を追加 */」はまだ第一形態。
追加設定は右側に追加入力していますが、入力しなくても問題ありません。

「/* メニューに背景色を追加 */」以外は新規設定だけ表示しています。
実際にどこの下に入力したからは6から6-2までの各ページで書いています。

「bottom」を削除する前の状態。
「padding」に追加設定がびっしり。

各設定にある「bottom」を削除。

「/* メニューに背景色を追加 */」は「bottom」を削除した後も
「padding」に追加設定が。「bottom」を削除しなければ不要の追加設定です。
ここまでが「その6-1」

「一番上の4行は子テーマ用のソースコード」
「/* メニュータイトルのリンクの色指定 */」
「/* メニューに背景色を追加 */」
「/* メニュー背景色右隅ズレ調整 */」

「/* リンクの下線の色指定 */」
「/* 表示中のページのリンクの枠の色を変更する-枠も表示続ける */」
オマケ設定が「bottomの削除」各設定。
その6に上記3つ6-1として追加。
あとは「/* メニューに背景色を追加 */」の細かい設定になっています。

ここまでが「その6-2」の「2-4」まで。

「/* メニューに背景色を追加 */」は罫線の設定がよく見えるように
「background-color: #0b6617;」背景色を削除。
背景色を削除するとメニューが左側にズレるので、
ズレの調整として「/* メニュー背景色右隅ズレ調整 */」の
ソースコードはまるっと全て削除します。

ここで罫線の非表示の設定です。

ここはオマケのような設定です。
下部にメニューが無くてもその下のコピーライトのサイトタイトルを
クリックするとトップページが表示されます。

さいごに

ソースコードの右横の説明タイトルは自分が分かりやすいように表示しています。
表示が無くても設定は行われます。

「/* メニューに背景色を追加 */」のように追加設定が多いと
説明タイトルも長くなってしまいます。
もし表示する場合は最終的な説明タイトルだけでもいいかも知れません。

最後までお合い下さいまして有難うございました。