BloggerでスマフォポストのフォントサイズをCSSで変える方法


まえがき

Google Blogger無料テンプレート → Bloggerテーマデザイナーの中から、レスポンシブテンプレートを選定している場合です。

Bloggerのテンプレートがスマフォ・タブレットに完全にレスポンシブ対応になったのは、まだ最近(2017年頃)のことです。

それ以前まではトップページにはポストが順番に羅列されるだけのスタイルでした。これもレスポンシブと言えばそうですが、通常呼んでいる完全なレスポンシブとはかけ離れていました。

アメブロなんかは未だに?そうですよね。レスポじゃない。(高度なカスタムをしない限りは...)

現在のBloggerは改良版としてなのか、つまり完全なレスポンシブテンプレートも選定できるようになっています、ご安心を。

内容

スマフォのpost(投稿内)のみ、フォントサイズをCSSだけで変える方法

なぜやるのか、

  • Bloggerのテンプレートは何を選んでもフォントが非常に小さい。そもそも英語で書く仕様だから(外部Blogger対応テンプレート無料・有料でも指向はまったく一緒)
  • ビューポート meta name="viewport" でピンチイン・アウト設定をしてあれば、まだ救いもあるけど、根本的な解決にはならない。
  • ブログの読者離脱率をあげる最大の原因はフォントサイズ。
  • 修正したくてもとてもわかりずらい、調べても情報がない。

解決の方法
|Bloggerテーマ| → |HTMLの編集| → |テーマの書式を設定|
ctrl+FでSearch boxを開きfontと入力し、CSS Editorの数字2700番~3000番ぐらいの間に移動すると下記のコードがある。

  1. .post-filter-message{
  2. margin:24px 24px 48px 24px
  3. }
  4. body.item-view blockquote{
  5. font-size:18px
  6. }
  7. body.item-view .Blog .post-title{
  8. font-size:$(item.title.font.size * 24 / 48)
  9. }
  10. body.item-view .Blog .post-body{
  11. font-size:$(body.text.font.size * 18 / 20)
  12. }
  13. body.item-view .Blog .post-body::first-letter{
  14. font-size:$(body.text.font.size * 14 / 20 * 4);
  15. line-height:$(body.text.font.size * 14 / 20 * 4)
  16. }
  17. .main_header_elements{
  18. position:relative;
  19. display:block
  20. }

デフォルトの数値はこれだった
font-size:$(body.text.font.size * 14 / 20)
書き換えた数値
font-size:$(body.text.font.size * 18 / 20)

デフォルトだと14、これを16~20にすればOKです。

変更後はEditorの保存を忘れずに、それで完了です。

コメント

人気の投稿