Twenty Sixteen のブログタイトル部分に,ヘッダ画像とは別にワンポイント画像を入れる

Twenty Sixteen が 1.1 にバージョンアップされましたね.
バージョンアップしたということで, Andante con graziaAllegro con grazia に施していた修正をバージョンアップしたテーマに対応させてきました.
折角の機会なので,この2つのブログのタイトル部分にいるアリス,どうやって表示しているか紹介しておきます.

cropped-h_test-1.png
使用している画像(実際は背景を透明にしてあります)

ヘッダ画像には小さすぎる

Twenty Sixteen の推奨ヘッダ画像,サイズが 1200×280 ということで,流石に上のようなワンポイントの画像じゃ小さすぎます.
それに,ヘッダ画像に設定して,タイトルと記事との間に大きな隙間ができるのもあまり好ましくありません.
ということで,今回は,この画像を,タイトルを表示している div の背景とし,表示位置を右下,表示を一階だけの設定とすることで解決しました.
具体的には style.css の .site-header-main に以下を追加しています.

background:url(http://example.com/example.png) no-repeat right bottom;

その他の細かい変更点は後でまとめるので,ひとまず,なるほどと思っておいていただければ大丈夫です.

モバイルフレンドリーも忘れずに

さて,ここまでで,タイトル部分に画像が表示されるようになったかと思いますが,このままでは画面が狭い,スマートフォンのような端末から見た時にタイトルと画像が被ってしまいます.
なので,タイトルの欄をスマートフォンで見ても違和感のないくらいの高さに変更します.
具体的には, .site-header-main に

height: 300px;

を設定です. px 数は画像の大きさによって変えてください.

しかし,この設定にすると大きい画面の時でもタイトルが大きくなってしまって不格好です.
それを回避するために “@media screen and (min-width: 56.875em)” (大きいサイズの時のみ適用するオプションです)中の .site-header-main

height: auto;

を設定しましょう.
これで,画面サイズに合わせて画像の表示位置が変わり,タイトルを邪魔しなくなります.
もし,画面が大きい状態でも画像がタイトルを邪魔するようなら, auto を適切な値に書き換えて対応しましょう.

まとめ

追加するのは, style.css のひとつ目の .site-header-main 中に

background:url(http://example.com/example.png) no-repeat right bottom;
height: 300px;

二つ目(@media screen and (min-width: 56.875em) 内)の .site-header-main 中に

height: auto;

と,意外と簡単に出来てしまいました.
意外と需要があるかも.と思ったので解説してみました.
みなさんも,よろしければ試してみてくださいね.

投稿者: 秋乃 穂波

こんぐらついあ.-con grazia- の管理人.秋乃穂波. B の鍵に腰掛けながら,A の鍵に足をついて活動している好奇心. 音楽やTRPG,プログラミングなどなど,趣味とネットを泳いでます. Twitter: @akh_cg mail: akihoあっとcongrazia.net

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です