Main-Photoテンプレート 文字サイズの変更方法

日曜日, 11月 02, 2014


実はずっと気になっていた文字の大きさ。
元々このブログのテンプレートは海外の方の作品で確かにアルファベットだとそこまで文字の大きさは気にならないのですが…
日本語だと少し小さくてずっと気になっていましたが、私はCSSの知識などほとんどないため変更出来ませんでした。
文字を大きくするための挑戦を続けていましたが、今回ようやくサイズ変更に成功したので備忘録もかねて変更方法を記載します。

そもそもBloggerには上級者向けに簡単にカスタマイズ出来る機能が備わっています。
しかし外部のテンプレートだと文字サイズ変更などのカスタマイズは適用されませんでした。
そしてBlogger自体CSSの形態などが特殊なような気がします。
ワードプレスですともっと細かくHTMLやCSSのファイルが別れていますが、Bloggerは1つのファイルの中に全て収まっています。
ですので私のような素人にはHTMLソースの編集は容易ではありません。
該当する箇所を見つけるのにも一苦労です。

さらにこの「Main-photo」というテンプレートが複雑で文字サイズ1つ変えるにも手こずりました。
一般的なテンプレートでしたら恐らく「font-size:」というタグの数字をいじれば文字サイズを変更できます。
どこが該当の箇所かわからなくても最悪1つずつ変更して様子を見ればいいわけです。
ところがこの「Main-photo」ではこの手は通用しませんでした。
原因としては文字サイズを上の方で一括で管理していたからです。

そして文字が小さい原因は
font-size/* */:/**/small;
font-size: /**/small;
というHTMLタグが設定され、全体の文字サイズがスモール一律小さく設定されているためでした。
私のテンプレートでは140行ほどのところにあります。

ですので「Main-photo」の文字サイズを大きくするのは
font-size/* */:/**/small;
font-size: /**/medium;
と2行目のスモールをミディアムに変更してあげればテンプレート内の文字サイズを大きくすることが出来ます
本来は普通のサイズだったものをこのタグで小さく制限を掛けていたようです。

これで文字サイズは大きくなりますが「Popular Posts」つまり人気記事欄などサイドバーの文字も大きくなってしまいました。
ここは小さいままのほうが見栄えがいいので、直接変更します。

Popular Postsを管轄する「.PopularPosts」タグが500行目くらいに存在します。
その3段目
.PopularPosts .widget-content ul li {
タグ内に文字を小さくするHTMLタグと行間を詰めるHTMLタグを足してあげます。

.PopularPosts .widget-content ul li {
padding:4px 0;
font-size: small;
line-height:1.6em;

}

という変更を施すことでこの人気記事欄は文字サイズ変更前の見た目=小さめの文字サイズに戻すことが出来ました。

これで本文が大きくなり今までよりもより見やすくなりました。
ずっと気になっていたのでこれで少しでも読みやすくなると嬉しいです。
1つお願いですがもしこの記事を元に同じ悩みを抱えた方が「Main-photo」のテンプレートを変更する場合。
必ずバックアップを取ってからカスタマイズしてください。
また素人がいじっているので不具合が生じる場合も考えられます。
あくまで参考程度にお考えください。

  • Share:

You Might Also Like

0 コメント