Vaster2でスマホの記事リストに説明文を追加する

初心者Vaster2の今回は「スマホの記事の一覧を追加」です。

さてスマホで見た場合の表示ですが、「Vaster2」ではＰＣの場合と少々配置が異なります。
そして、PCよりもスマホで閲覧される方の方が多いので、スマホから見たサイトの雰囲気というのは、重要な要素だと思っています。


今回はトップページをスマホで見た時の「記事の一覧の部分に説明文を追加」です。
こちらも参考にしたブログがあります。

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

という事で、あかりさんのブログから、私のブログに合う様に変えた部分の紹介になります。

Vaster2「スマホの記事リスト」を追加

変更前

あかりさんのブログでも書いておられるように、スマホの画面の初期の設定では、「記事のタイトル」しか書かれていません。

説明文を追加

この様な感じで当ブログは、スマホの表示の時にも冒頭の部分を記載してみました。
（2019年1月より、サイトのテンプレートが変わっていますので、表示はされていません・・・）

少々見た目が重たくなりました。この部分が無いサイトの方がすっきりしています。

ですが、特化型ブログで「タイトルで内容が予想出来そうなサイト」では、無くても良さそうですが、当サイトの様な日記系の「雑記ブログは、少しでも説明が有る方が親切」かなぁ？と思いましたので導入してみました。

追加手順

手順は①と②だけですので簡単です。

手順①「記事の区切りを挿入」

まず記載部分についてはＰＣ版と同じですので、本文の中に「記事の区切りを挿入」を入れて下さい。（「続きを読む」と同じです。）


アドセンスの導入時に、広告の位置決めにもなっている様ですので、入れていて損はないと思います。

また、この前の部分が長いと文字が途中で切れてるか、全部の内容を入れる為に１記事の面積が大きくなり、スマホの見やすさが悪くなります・・・。
ですので、１行程度が適当かと思います。

手順②「HTMLの編集」

では、あかりさんのブログの通りに「ＨＴＭＬ」の編集画面から、レスポンシブデザイン（@media screen and (max-width: 768px)・・・以下の部分）内に行きます。

基本的にこの部分に追加をしたり、変更をしたりすればスマホの見た目が変わります。

＊本体の構造部分を替えますので、前回同様必ずバックアップ等の措置を取って、自己責任にて変更を行って下さい。


上記の部分を見つけましたので、こちらの「display:none; 」を削除します。
そして・・・


に書き換えてみました。あかりさんのブログにある様に、

「font-size:12px;」は、説明の文字の大きさ
「margin-top:2px ;」は、タイトルと説明文との間隔の距離です。

「color:#888;」を追加しています。この部分で文字の色を変えれますのでお好きな色に替えて下さい。

そして「height:100px ;」の部分も追加しています。

これは、説明文の入る部分の上下の巾です。この数字が小さいほど面積が小さくなり、文字が切れたように見えます。
ですが、値が大きいほど文字が入るのですが、その分面積が大きくなり閲覧者さんの利便性が悪くなります。（スクロール数が増えます。）
ですので画面を確認しながら良い数値を決めて下さい。

見た目のバランスを好みに変更

記事のタイトルの文字とのバランス

折角の説明文が記事のタイトルとアンバランスであれば見た目が良くないです。
記事のタイトル文字は、


の部分になります。
ですから、文字の大きさは、「font-size:16px;」の数字の部分を変えて下さい。

10月６追記「article-list-title h2」若しくは、「article-title h2」のパターンもありそうです。
私のもう一方のサイトでは、「liset」が記載されていませんでした。

サムネイル画像とのバランス

続いて「サムネイル」の配置と大きさのバランスです。
サムネイル画像は、

この中で、

「width:100px !important;」は、巾の値
「height:100px !important;」は、高さ値

になりますので数値を変えてお好きなサイズにして下さい。

「object-fit: cover;」は、画像のゆがみを取る部分ですので、画像が横のばしや縦のばしになっている人は追記して下さい。

「margin-top:10px !important;」は、画像の上からの位置で、この数値が大きいと下に下がります。

記事の一覧の上下の幅が長い場合に、小さい画像サイズにしますと、上の方に設置されてしまいます。
見た目がアンバランスで、画像をもう少し下げたいという場合は、この値を大きくして、良い位置に下げてみて下さい。


全部に共通ですが、「 !important」の部分については、記載無しで反映がされるのであれば抜いて下さい。

（微妙な位置の調整が必要であれば、「padding: 15px 10px 15px 0px;」等で余白を作って下さい。４つの数字は、上・右・下・左の値になります。）

最後に

という事で「スマホの記事の一覧を追加」をご紹介してみました。
Vaster2カスタマイズについては本当に色々な方が記事にされていますので、少しづつ勉強しながら改善出来るという楽しみもあります。

こちらでは私が試行錯誤をしたものを随時ご紹介して行きたいと思いますので、よろしくお願い致します。