Blogger用テンプレートVaster2のカスタマイズ記事です。
この記事は、スマートフォンやタブレットでブログを表示したとき、記事リストの画面で説明文を表示する方法を説明しています。
修正前後
修正前
スマホやタブレットで表示したときには、記事リストの画面では記事の説明文が表示されていません（PCでは表示されています）。
修正後
説明文が表示されるようになりました。
また、記事タイトルのフォントを少し小さくしています。
修正方法
1. レスポンシブデザインが書かれているところから、以下の部分を探します。
.snippet{
display:none;
}
※レスポンシブデザインは@media screen and (max-width: 768px)｛から始まる部分に書かれています
※同じ.snippetは上にもう1つあるので、下のほうを修正することに注意
2. 以下のように書き換えます（display:none;は削除します）
.snippet{
font-size:10px;
margin-top:5px
}
font-sizeで文字の大きさを決定しています。
うまく文字の大きさが変わらない場合は、font-size:10px !important;と書き換えてみてください。
タイトルと説明文の間が少し開いているのが気になったので、margin-topで間隔を決めています。元の値は別の場所で決められている15pxのようなので、少し数値を小さくしています。
修正後のスクリーンショットを見てもらうとわかるのですが、説明文の一部が切れた状態で表示される場合があります。
これについてはそのうち修正するつもりなのですが、すぐには解決法が分からないのでこのままにしています。
コメント