【はてなブログ】スマホで追従するブログタイトルのカスタマイズ
こんにちは岩田です。
当ブログではスマホ表示だけ追従の展開式グローバルメニューを採用しています。
ついこないだCLS対策としてヘッダータイトルごとヘッダー部分を画像に変えたのですが、その結果スマホの表示のみタイトルまで一緒に追従するようになってしまいました。笑
ちなみにパソコンでは追従ではないので普通です。
思わぬ副産物でしたが、個人的には良いと思っているのでご紹介することにします。
追従の展開式グローバルメニューを対応させる
まずは下記リンクを参照してグローバルメニューを追従させるようにしてください。
無事にグローバルメニューが追従するようになれば次のステップです。
ヘッダー画像をはてなフォトライフに保存した画像にする
まずはじめにヘッダーに使いたい画像を作ってください。
パソコンのペイントで編集してもいいですし、Canvaでかっこ良く作ってもいいかもしれないですね。
手順としては
①はてなフォトライフにヘッダー画像を保存
②ヘッダーにHTMLを記述する
③CSSを記述する
です。
はてなフォトライフにヘッダー画像を保存
はてなフォトライフは、はてなブログを使用していると使えるはてなのサービスではてなの管理画面から利用中サービスで選ぶとページに移動します。
はてなフォトライフでは写真のアップロードが可能です。
ここに写真をアップロードすると保存した写真に対してURLができるのではてなブログ等のカスタマイズに利用できるようになります。
ヘッダーに記述するHTML
ヘッダーに下記のHTMLを記述してください。
デザイン→カスタマイズ→ヘッダーです。
下線部分だけ変更する必要があります。
ここではてなフォトライフに登録した写真のURLに変えなければ写真が何も表示されないので注意してください。
元のブログタイトルはHTMLで非表示されるようになります。
※下線部分を変更してください。
CSSの記述
デザイン→カスタマイズ→CSSに下記をコピペして貼り付けてください。
ヘッダー画像はスマホ表示の際にデカく表示されるのでスマホ表示の時には適正サイズになるように調整してあげる必要があります。
大きさが適切なサイズにならない場合はheightの部分のサイズを調整してみてください。
上記のCSSにはパンくずリストのサイズを調整する記述もしてあります。
実は、この方法を取ってからヘッダー画像がグローバルメニューと一緒になってしまった兼ね合いで、上部にあるコンテンツが見えないという現象が起きるようになってしまいました。
<img class="hatena-fotolife" src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kazuki-iwata44/20221127/20221127101751.jpg" border="0" alt="" title=""" width="640" height="545" loading="lazy" />
一見更新日がブログの一番上に表示されているように見えますが、実はパンくずリストが隠れています。
パンくずリストが見えていた方が良い気もしたのですが、カテゴリもあるし、同じなので見えなくてもいいやということでパンくずリストの位置を調整して更新日の位置がグローバルメニューの下に来るように調整しました。
パンくずリストを表示したい方はパンくずリストのCSS部分(breadcrumb以下のpadding)の値を調整していただければ見えるようにできますが、私は上手く調整ができず今のかたちを取っています。
ぜひチャレンジしてみてください。
ちなみにパンくずリストは、デザイン→カスタマイズでパンくずリストを表示するにチェックを入れるだけで使えるようになりますのでチェックを入れるようにしてみてください。
実は一番の問題点はアーカイブページだと一番上に来た記事のタイトル部分が全く見えないことです。笑
でもアーカイブは見る方は少ないので良いかなと思っています。
今回は以上です。
