Twenty Nineteenのヘッダーについて細かいカスタマイズ集【グローバルメニュー含む】

特徴的なTwenty Nineteenのヘッダー部分ですが、今回はそのヘッダー部分をカスタマイズしていきたいと思います。

１つのカスタマイズというよりかは、いくつか細かいカスタマイズを行っていくので、自分がやりたいと思ったカスタマイズを試してみてください！

コピペでできるので、お気軽にお試しあれ～

いつも通り子テーマをどうぞ！

style.cssに色々とコードを入力していくカスタマイズとなりますので、子テーマの使用を推奨です！
子テーマを導入していない場合は、まずは子テーマを導入しましょう

TwentyNineteenの子テーマの作り方はこちら

子テーマがどのような機能かわからない場合はこちら

タイトル・グローバルメニュ―を中央に

Twenty Nineteenのデフォルト状態だと、タイトルとグローバルメニュ―は左寄せで表示されています。

これを中央寄せに変更するカスタマイズです。
ちなみにこちらでは、
①タイトル・グローバルメニューの両方
②グローバルメニューだけ
の2通りを中央にするカスタマイズを解説します。

①タイトル・グローバルメニューの両方

完成図としてはこのようになります。

タイトルとグローバルメニュー両方を中央に寄せる場合は、以下のコードをstyle.cssにコピペしてください。

.site-branding{
	text-align:center;
}

②グローバルメニューだけ

完成図としてはこのようになります

グローバルメニューのみ中央に寄せる場合は、以下のコードをstyle.cssにコピペしてください。

#site-navigation{
	text-align:center;
}

投稿記事のアイキャッチ画像高さを小さくする

TwentyNineteenのデフォルト状態の場合、投稿記事ページ最上部に表示されるアイキャッチ画像がパソコン画面では「画面いっぱいに」表示されるように設定されるようになっており、スマホなど画面が少し小さいデバイスでの表示の場合は、画面の90％を占めるように表示されています。

個人的には気に入っていますが、人によっては小さくしたいと考える人がいるかもしれないので、念のため、アイキャッチ画像を小さくするコードを載せておきます。

デフォルト状態

デフォルト状態PCではこのような感じです。

スマホの場合は大体こんな感じ

カスタマイズ後

変更点としては、画面上に100%表示させる設定から、最低の高さを40％に変更し、単純に高さを狭めただけです。

あくまで最低の高さであるため、タイトル名が長かったり、別の要素によって40％を超えてしまうような場合には、それ以上の高さになります。

カスタマイズ後はこのようになります。
まずはPCでの状態

スマホではこのように

これはこれですっきりしたのでいいかもしれないですね。

コード公開

アイキャッチ画像を小さくする場合は、以下のコードをstyle.cssにコピペしてください。

.site-header.featured-image{
    min-height:40vh;
}

40vhの部分で画面サイズの40％の高さに設定しています。
こちらの数字を変更することで、自由に設定することができます。

なお単位をvhからpxに変更することで、どのデバイスであってもデバイスの高さを固定することができます。

投稿記事のアイキャッチ画像の色をもとの画像色に戻す

投稿記事ページ上部に表示されるアイキャッチ画像は、フィルター加工がなされています。
デフォルトだとこんな感じです。

タイトルやメタ情報などがアイキャッチ上で、白い文字で表示されているため、みやすくするための加工だと推測されますが、場合によっては、きれいなアイキャッチ画像を表示させたいという人もいると思います。

そんな方のために、アイキャッチ画像のフィルター加工をなくして、もともとのアイキャッチ画像の色のまま表示させるカスタマイズを行います。

ちなみに完成図はこのような感じです。

準備

アイキャッチ画像の加工をなくす前に準備をしておきます。
WordPressの管理画面から、【外観＞カスタマイズ＞色】にある「
アイキャッチ画像にメインカラーのフィルターを適用する 」のチェックを外しておいてください

外したら準備完了です！

コード公開

アイキャッチ画像のフィルター加工をなくす場合は、以下のコードをstyle.cssにコピペしてください。

.site-header.featured-image::after{
	background:transparent;
}

これでフィルター加工がなくなったはずです。
タイトル文字色がそのままなので、加工をなくした場合、アイキャッチ画像は濃い目の色を選択した方がいいかもしれないですね。

おまけ

記事タイトルや日付などを文字色を変更したい場合は、以下のコードをstyle.cssに追記してください。

.site-header.featured-image .site-branding .site-title, .site-header.featured-image .site-branding .site-description, .site-header.featured-image .main-navigation a::after, .site-header.featured-image .main-navigation .main-menu > li.menu-item-has-children::after, .site-header.featured-image .main-navigation li, .site-header.featured-image .social-navigation li, .site-header.featured-image .entry-meta, .site-header.featured-image .entry-title{
	color:#000;
}
.site-header.featured-image .main-navigation a, .site-header.featured-image .main-navigation a + svg, .site-header.featured-image .social-navigation a, .site-header.featured-image .site-title a, .site-header.featured-image .site-featured-image a{
	color:#000;
}

とりあえず文字色を黒で設定してありますが、colorのコードを好きな色のコードに変更してくださいね～

まとめ

とりあえず簡単なヘッダーカスタマイズをしました。

あとはphpファイルを編集したりするカスタマイズもありますが、それはまた今度～
ちなみにリクエストなどあれば努力してみます！