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;」の下に新規に入力追加します。

「メニューの背景色」は「background-color: #0b6617;」で指示しています。
色指定はこれまでの色指定を元に選択しています。
「#0b6617」の部分をお好きなカラーコードで入力してください。※「color: #1a1a1a;」の「1a1a1a」部分のカラーコードを変更すれば
文字の色が変更できます。

こちらのソースコードを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 */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。


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

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

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク