文字の大きさを少し大きくする。行間を空ける。

SE風味

2008年09月18日 14:25

はまぞうのテンプレート、個人的にだが、文字の大きさが小さい気がする。
そして、行間は広げたほうが読みやすいと思う。

ということで、実はこのページは、本当に少しだが、文字が大きいのだが、お気づきだろうか?

はまぞうのテンプレートのスタイルシートのある箇所を変えると、文字が大きくなる。
その方法を以下にまとめます。興味がある方は、ぜひ試してみてください。
変更箇所ですが、管理画面から、テンプレート を選び、
「使用中」になっているテンプレートの [ カスタマイズ ] をクリックします。そして、
スタイルシート:
の入力欄から

.main{

と書かれた場所を探します。そして、その下にある「font-size:」を探します。
そして、その数字の部分を増やすと、文字が大きくなります。
たとえば以下のような感じ。

font-size:12px;

     ↓

font-size:14px;

テンプレートによっては、

font-size:78%;

というように、% を使っている場合がありますが、数を増やせば、大きくなるのは同じです。

そして、main-continues{ というのがその下にありますので、そこに一番近い font-size も同様に修正してください(「続きを読む」の文字の大きさが、ここで指定されています。)





行間も同様に、.main{ の下の line-height: の値を変更します。

line-height:100%;

     ↓

line-height:150%;


これを登録する。これだけです。元に戻すときは、元の数字に直すだけ。
で、もし、元に戻らなかったら、テンプレートそのものを設定しなおせば、簡単に戻ります。

はまぞうのデザイン変更の練習代わりに試してみてください。




<追記>
コメント欄も文字を大きくしたいという風にいただきましたので、一応その場所も(ただ、ごめんなさい、未確認です)

コメントの文字の大きさの変更は、上の記事の時と全く同じ方法で、.comments-body{ の下の font-size: の値を変更します。

あと、コメントのタイトルや、投稿欄のあたりも文字の大きさをあわせたほうがいいでしょうから、.comments-head{.comments-post{ の下の font-size: も、.comments-body{ と同じ値にしておくと良いと思われます。

こちらも、ぜひお試しを。

上の方法が、もし参考になりましたら、よろしければブログの記事で紹介していただき、リンクしていただくか、お気に入りなどで、このブログ (http://secondopinion.hamazo.tv) を加えていただけると、非常にうれしいです(必須ではありません) あと、コメント大歓迎 です。励みになります。


<関連記事>
はまぞうの画面上部にメニューをつけよう!
http://secondopinion.hamazo.tv/e1437147.html

文字の大きさを少し大きくする。行間を空ける。
http://secondopinion.hamazo.tv/e1446713.html

はまぞうの「説明文」の色を変えよう。
http://secondopinion.hamazo.tv/e1475373.html

ホームページで「音」は御法度
http://secondopinion.hamazo.tv/e1433573.html

記事の中に「メッセージを送る」ボタンを埋め込む
http://secondopinion.hamazo.tv/e1447693.html

「続きを読む」に記事のタイトルを埋め込む方法
http://secondopinion.hamazo.tv/e1491533.html



<<「はまぞうについて」一覧に戻ります。


関連記事