yuuのものづくり図鑑～ハンドメイド、時々フリマ～: Blogger：初心者でもできた！モバイル表示をカスタマイズ②　(投稿タイトルと、記事本文を見やすく)

2016年7月21日木曜日

モバイルTOPページに投稿記事タイトルと記事の概要が並びますが、投稿記事のタイトル幅が概要より狭くなっており、複数行になってしまいます。

特に私の場合はタイトルが長めなので、できるだけ一行に多くの文字数が入るようにしたい！

そこで、投稿記事タイトルが表示される幅を広げたり、タイトルの文字サイズを小さくします。

やり方は前回の「ブログタイトルの文字サイズの調整」と同じく、CSSを追加する方法になります。

まずは左側にあるバーで「テンプレート」を開き、「ブログで使用中」の画像の下にある「カスタマイズ」のアイコンをクリック→「上級者向け」→「cssを追加」と進みます。
そこへ

/*モバイルTOP記事タイトル幅、文字サイズ*/
.mobile-index-title{
width:92%;
font-size:17px;

と打ち込むか、もしくは貼り付けます。
上側の数字が投稿タイトルの表示幅、下側の数字の部分が文字サイズを表しているので、
この数字を自由に書き換えることによって、
投稿記事のタイトル幅と、文字の大きさが変わります。
最後に、右上にある「ブログに適応」のボタンを押せば完了です。

次に、投稿記事本文の文字サイズと行間を変更したいと思います。
文章が多い場合は特に、行間が詰まっていると文字がびっしりと並んで読みにくいですよね。また、文字が小さすぎると、読むのに疲れてしまいます。

これらを調整するには、まず、先程と同じように左側にあるバーで「テンプレート」を開き、「ブログで使用中」の画像の下にある「カスタマイズ」のアイコンをクリック→「上級者向け」→「cssを追加」と進みます。
そこへ

/*記事本文の文字サイズ、行間*/
.mobile .entry-content{
font-size:1.3em;
}
.mobile .post-body {
line-height:1.7;
}

と打ち込むか、もしくは貼り付けます。
上側の数字が文字のサイズ、下側の数字の部分が行間を表しているので、
この数字を自由に書き換えることによって、
本文の文字サイズと行間を変えることができます。
最後に、右上にある「ブログに適応」のボタンを押せば完了です。