「Blogger」でモバイル用テンプレートのタイトル文字を小さくしようと、ちょっと調べたのでメモとして記事にしときます。
最近、「Blogger」というGoogleの無料ブログサービスをいじる機会がありまして。
それはサイトをスマホで表示する際に、モバイル用のテンプレートを選択できるんですが。
テンプレートをそのまま使うと、ブログのタイトルの文字が異常に大きくなるんですね。
これを小さくしたいなと調べてやってみた結果、以下のような手順で実現できました。
(1) 「テンプレート」の「ブログで使用中」のテンプレートで「カスタマイズ」をクリック
(2) 「上級者向け」をクリックして表示されるメニューの一番下の「CSSを追加」をクリック
(3) 「カスタムCSSを追加」のテキスト入力フィールドに以下のCSSを記入
.mobile .header h1{
font-size:24px;
}
(4) 右上の「ブログに適用」をクリックした後で「Bloggerに戻る」をクリック
(5) 「テンプレート」の「モバイル」のほうの下にある“歯車マーク”をクリック
(6) 「モバイルテンプレートを選択」のプルダウンメニューから一番下の「カスタム」を選択
(7) 「プレビュー」を押してタイトルの文字サイズが小さくなっていることを確認したら、プレビューウィンドウを閉じて「保存」をクリック
文字サイズを変えるには、記入するCSSの“24px”の数字を調整すれば良いですね。