ブログ改造日記 9: 「Twenty Seventeen」のHeaderの高さを調整してみた

ブログ改善要望

久々にブログ改造日記を書いてみる。事の発端はNILOG読者の方からブログ改善要望の声があったこと。内容としてはHeaderが全画面を埋め尽くしているので、アクセス時にブログが更新されたかどうかが一目見て分からない。なのでHeaderの高さを調整するなどして、一目で更新情報が分かるようにしてほしいとのことだった。現在NILOGではWordPressのテーマである「Twenty Seventeen」の子テーマを使用している。よってその要望を反映するためにはテーマを変える、もしくはCSSを変更しなければならない。前者に関しては別の問題が発生する可能性があるのと、現状のテーマで満足しているので今のところ変える予定はない。後者に関してはやり方が分からない場合は調べて実行するのに時間がかかるかと思っていたが、リサーチして少し試してみたら意外にもあっさりできてしまった。なので今回はその備忘録としてやり方を記録しておきたい。

参照リンク

リサーチした結果参照したリンクは以下の二つ。

How To Reduce The Header Height Size Of The Twenty Seventeen Theme Front Page

How do I change the header image height in Twenty Seventeen?

前者のリンクを見つけた時、自分のやりたいことと完全に一致していたのでコードをコピペして終了かと思われた。しかし何故かコピペしても全く変化が見られない。そこで後者のリンクのVotesで一番最初に来ていた回答のコードの部分をコピペし、各vhの部分の数値を弄ってみると望み通りの変化が得られた。よって実際には後者のリンクだけで解決したと言えなくもないが、コメントの部分や順序などは最初のリンクを採用して多少変更を加えたので、その結果は次の項目で説明する。

実際に使用したコード

WordPress Admin > Appearance > Edit CSSにアクセス。するとCustomizing Additional CSSの画面が出るので、そこに追加で以下のように記述する。基本的には先程の後者のリンクのコピペを土台として、それに変更を加えた形になる。

PC画面用の設定
/*Computer screen */

.twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 30vh;
  max-height: 100%;
  overflow: hidden;
}

まずはPC画面用の設定。変更点は以下。

/*Computer screen */というコメントを追加。
100vh → 30vhに変更。

Mobile画面用の設定
/* Mobile screen*/

.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
  display: table;
  height: 300px;
  height: 30vh;
  width: 100%;
}

次にMobile画面用の設定。変更点は以下。

/* Mobile screen*/というコメントを追加。
100vh → 30vhに変更。

Admin bar画面用の設定
/* Computer screen with logged in user and admin bar showing on front end*/

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media {
  height: calc(100vh - 32px);
}

最後にAdmin bar画面用の設定。変更点は以下。

/* Computer screen with logged in user and admin bar showing on front end*/というコメントを追加。

この設定に関してはAdmin barが出ている場合の設定なので、読者の方には通常見えることのない部分。なのでHeaderの高さは元の100vhのまま残した。ちなみに上記の通りにPC画面用の設定とMobile画面用の設定をした場合、Admin bar画面用の設定を100vh → 30vhに変更するとAdmin barの高さの分だけずれるので、ずれをなくすためにはそれより大きめの数値に設定する必要がある。

ブログ改善要望募集中

以上でコードの追加は完了したので、Publishをクリックして実際に反映させる。ちなみにvhの数値はデバイスの表示領域全体を100とした時の割合を示すので、30vhの場合は全画面の3割の表示ということになる。50vhなどで実験もしたが、最終的に更新情報が一番分かり易いのが30vhだったのでこの数値を採用した。またiMac、iPad、iPhoneでそれぞれ表示チェックをした際に特に問題は見られなかったので、CSSが上手く機能しているのだと思う。他にもブログに関しての改善要望などありましたら以下から連絡してもらえると助かります。技術的、思想的に全てを反映できるとは限りませんが、できるだけ読者の声を反映させていきたいと思っているので、よろしくお願いいたします。

CONTACT

ブログ改造日記: 連載記事リンク

ブログ改造日記 1: デザインの変更と機能の追加

ブログ改造日記 2: ブログに関する問題点

ブログ改造日記 3: 自滅としてのグーグル八分

ブログ改造日記 4: 「Table of Contents Plus」の限界と自作目次の導入

ブログ改造日記 5: 「All in One SEO」から「Yoast SEO」へ

ブログ改造日記 6: Googleのインデックスに関する問題点

ブログ改造日記 7: 「Broken Link Checker」の導入と自作目次の改善

ブログ改造日記 8: 両端揃えの導入

ブログ改造日記 9: Headerの高さを調整してみた

ブログ改造日記 10: Twitter Cardの設定

ブログ改造日記 11: footnotesというプラグインで脚注を導入してみた

ブログ改造日記 12: カテゴリ整理

ブログ改造日記 13: IFTTTとInstagram Feedの設定