WordPress Twenty Sixteen カスタマイズ 8-2-1「ヘッダー」編 余白調整 編

ごけたです。
夏は芳香剤の減りが早くて困ります。
 
 

はじめに

WordPress Twenty Sixteen カスタマイズ その8-2-1

「その8-2」が長くなったので、一旦切って続きをこちらで行います。
「その8-2」の最後の設定のまま、「その8-2-1」で行います。

メニューをまた左寄せにしたり、背景色を足したり、足した際のズレを調整したりです。
「その8」で行った設定の一部をヘッダー画像有りの状態でも。
応用編というよりは復習編です。オマケです。
 
 
ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。
 
 
※文中に「親」という言葉が度々出てきます。
ここでの「親」とは「子テーマ」ではない、
元々のTwenty Sixteenの各ファイルのことです。
カスタマイズは「子テーマ」で行っているので、
その対比として「親」、「親テーマ」と呼んでいます。

メニューを左側に移動させる

「その8-1」でも行いましたが、ヘッダー画像が一番上の状態でも
「メニュー」を「キャッチフレーズ」の下の左側に移動させて表示させてみました。

子の「header.php」ファイルの100行目前後にある
「メニュー」の一番下の「＜/div＞＜!– .site-header-main –＞」を切り取りとって
メニューの先頭のソースコードの上にペーストします。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックしてください。

実際は「/* */」のタイトル表示が出来ないので、
「/* 切り取ったメニューの一番下 */」と「/* メニューの先頭 */」との間を
2、3行空けて、「＜!– .site-header-main –＞」の移動をなんとなく表示させます。
 
 

右側にあった「メニュー」が「キャッチフレーズ」の下に移動したか確認します。
初期設定のタブレット画面では右側にあった「メニューボタン」も
左側に移動していました。

メニューに背景色を付けて表示してみる

メニューの背景色のソースコードは
親の「style.css」ファイルの822-828行目前後にあります。
背景色の指定はないので「background-color: #xxxxxx;」を
「padding: 0.84375em 0;」の下に新規に入力追加します。

こちらのソースコードをWordpressの管理画面のメニューから
「外観」→「テーマの編集」画面内の「style.css」ファイルの一番下にコピペします。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。

メニューに背景色が追加されたか確認します。

メニューの文字間の余白を調整する

文字間と左隅のズレの調整は「その8-1」で行った設定と同じです。
詳しい説明はこちらでは省いています。

「padding: 0.84375em 0」の「0」を「1em」に変更します。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
 
 

メニューの文字間の余白が調整できたか確認します。
 
 

メニューの左隅のズレを調整する

こちらのソースコードを「/* メニューの背景色の指定 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
 
 

左隅のズレが訂正できたか確認します。
 
 

8-2から8-2-1までの「style.css」ファイルのソースコードを確認してみる

/* メニューの背景色の指定 */
/* メニュー内の左右の文字間調整の追加 */
/* メニュー背景色左隅ズレ調整 */

メニューに背景色を追加した。
追加した時の文字間の余白を広げる設定、
左隅のズレを調整する設定で使用。

不要でしたら

背景色の設定をやめる場合は「background-color: #xxxxxx;」の1行を削除します。

さらに「/* メニュー背景色左隅ズレ調整 */」のソースコードもまるっと削除します。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
 
 

さいごに

「メニューを左側に移動させる」や「メニューに背景色を付けて表示してみる」は
既に一度実践していたので復習でした。

「キャッチフレーズ」と「メニュー」の間の余白を広げる調整も可能です。
こちらのソースコードから「.site-header-menu」取り出して、
メニューの上部との余白で調整したいので「margin-top: xxem;」を入力します

こちらのソースコードを
「/* ヘッダー画像上部余白知縮めPC画面-2 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
 
 

「キャッチフレーズ」と「メニュー」の間の余白が若干広がったか確認します。

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