スマホの記事リストに説明文をつける [Blogger / Vaster2]

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のようなので、少し数値を小さくしています。

修正後のスクリーンショットを見てもらうとわかるのですが、説明文の一部が切れた状態で表示される場合があります。
これについてはそのうち修正するつもりなのですが、すぐには解決法が分からないのでこのままにしています。

関連記事:初心者でもわかるVaster2のカスタマイズ方法の記事リスト
スポンサーリンク

0 件のコメント :

コメントを投稿