編集

Emporioスティッキーヘッダー文字サイズをHTMLの編集で小さくする

2022/10/06
Emporio スティッキーヘッダー

もうカスタマイズはしないつもりでいましたが、どうしても気になる部分があって... それは、この写真の黄色い部分(実寸表示)。これは変更した後のものですが異様に文字が大きかった。もともとBlogger公式テーマEmporioは英語版。多分、英語タイトルであれば収まりがよいのかもしれませんが、日本語だと文字が大きいとバランスが悪くなってしまう。(2020.12月 追記あり)

Blogger公式テーマEmporioのスティッキーヘッダー

テーマデザイナーによると、この場所は“スティッキーヘッダー”というみたい。下にスクロールした時と個別記事表示時に限定して出てくるもの。(Chrome検索画面でおなじみ)

以前カスタマイズを検索したときにテーマデザイナーが機能しない場合がある...という記事を目にしました。この部分も文字サイズの変更が効かなかった。。で、放置していたわけだけど、トップページのタイトルより大きく表示されてしまうのが何ともねぇ...

で、一念発起。公式テーマのHTML表示はなんだか複雑で出来ればいじりたくないけど...

Emporioテーマデザイナー

まず、テーマデザイナーのスティッキーヘッダーのタイトルの色から独自に指定した#66cdaaをメモに控えます。次に、スティッキーヘッダーが表示されている画面で右クリックでページのソースを表示を選びます。ソース画面でCtrlキーFキーを押して検索バーを開き#66cdaaを入力し検索します。

Emporioソース

左側のオレンジの部分がソースの検索結果。
これを見るとこの場所が「.sticky .centered-top .Header h1」ということがわかります。文字の大きさが32pxになっています。大きいはずですね。
今度はHTMLの編集画面を開いて同じように検索バーを開きこの場所を検索したものが右側の表示です。フォントサイズを32pxから22pxに変更しました。

やっと控え目な文字サイズになり、ほっとひと息。もうこれ以上はいじりません...
記事数も増えてきて大画面とスマホ表示が確定したので記念に残しておきます。

Blogger公式テーマEmporio

かなりシンプルな印象です。

2020年秋 Bloggerリニューアル テーマデザイナー

追記:Emporioに戻しました。2020年の秋、Bloggerがリニューアルしました。新しいBloggerではテーマデザイナーも簡素化され、スティッキーヘッダーも簡単に変更が効くようになっています。

新しいBlogger

テーマ ⇒ カスタマイズ ⇒ 詳細設定 ⇒ ブログタイトルで変更できます。