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

/* 切り取ったメニューの一番下 */  </div>

<!-- .site-header-main -->
 
 
/* メニューの先頭 */  <?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>

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

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


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

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

/* メニューの背景色の指定 */
.main-navigation a {
color: #1a1a1a;
display: block;
line-height: 1.3125;
outline-offset: -1px;
padding: 0.84375em 0;
}

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

「メニューの背景色」は「background-color: #0b6617;」で指示しています。
色指定はこれまでの色指定を元に選択しています。
「#0b6617」の部分をお好きなカラーコードで入力してください。※「color: #1a1a1a;」の「1a1a1a」部分のカラーコードを変更すれば
文字の色が変更できます。
/* メニューの背景色の指定 */
.main-navigation a {
color: #1a1a1a;
display: block;
line-height: 1.3125;
outline-offset: -1px;
padding: 0.84375em 0;
background-color: #0b6617; /* メニュー背景色の追加 */
}

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

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

「メニュー」に背景色を設定すると、メニューの文字間が詰まり、
背景色の枠分だけ左にズレています。

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

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

/* メニューの背景色の指定 */
.main-navigation a {
color: #1a1a1a;
display: block;
line-height: 1.3125;
outline-offset: -1px;
padding: 0.84375em 1em; /* メニュー内の左右の文字間調整の追加 */
background-color: #0b6617; /* メニュー背景色の追加 */
}

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


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

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

/* メニュー背景色左隅ズレ調整 */
.main-navigation {
    margin-left: 0em;
}

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


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

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

/*
 Theme Name: Twenty Sixteen Child4
 Template: twentysixteen
*/

上記4行は子テーマ用のソースコード


/* ヘッダー画像上部余白縮めPC画面-1 */
	.site-header {
		padding: 0em 4.5455%;
	}    

       
/* ヘッダー画像上部余白縮めPC画面-2 */
.site-branding,
.site-header-menu,
.header-image {
    margin-top: 0em;
    margin-bottom: 0em;
}

/* ヘッダー画像上部余白縮めPC画面-1 */
/* ヘッダー画像上部余白縮めPC画面-2 */  は
ヘッダー画像を一番に表示した時の余白の調整。
余白を無くして一番上まで移動。
        

/* サイトタイトルやメニューと記事タイトルやウィジェットとの余白 */
	.site-content {
		margin-top: 2.5em;
            }

ヘッダー画像を上まで移動させた時、
サイトタイトルやメニューと記事タイトルやウィジェットとの
余白が縮まっていたので、余白を広げる設定で使用。


/* メニューの背景色の指定 */
.main-navigation a {
	color: #1a1a1a;
	display: block;
	line-height: 1.3125;
	outline-offset: -1px;
    padding: 0.84375em 1em; /* メニュー内の左右の文字間調整の追加 */
    background-color: #0b6617;  /* メニュー背景色の追加 */
}
       

/* メニュー背景色左隅ズレ調整 */
.main-navigation {
    margin-left: 0em;
}

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

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

不要でしたら

※「メニューに背景色」を設定した場合のみ、
追加でズレを調整する入力設定を行います。

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

/* メニュー背景色左隅ズレ調整 */
.main-navigation {
    margin-left: 0em;
}

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

さいごに

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

/* ヘッダー画像上部余白縮めPC画面-2 */
.site-branding,
.site-header-menu,
.header-image {
    margin-top: 0em;
    margin-bottom: 0em;
}

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

.site-header-menu {
	margin-top: 1em;
}

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


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

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

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク