Vasterでスマホの関連記事を縦並びにしたい

初心者のVaster2カスタマイズです。
今回は「スマホの関連記事を縦並びに」です。
これに関しては利便性よりも好みの問題ですので、変更後の配置の方を先に見て、判断して頂ければと思います。

「Vaster2」スマホの関連記事を縦並びにする

変更後

では、早速変更後をご覧ください。

人気の記事に似ている

この様に「人気の記事」の並びと同じ様になりますので、サイトの配置を踏まえて効果的だと思う場合に導入をして下さい。

前の記事にて、この「人気の記事を真ん丸にする」という事でご紹介しています。
こちらの画像が丸みを帯びていたり、完全に丸型だとすると区別がついて良いかもしれません。


初心者Vaster2カスタマイズ「人気記事を真ん丸に」


また、初心者の私が試行錯誤した結果ですので、もっと簡単な方法があるかもしれません。ですので、あらかじめご了承を頂ければ・・・と思います。

スマホの関連記事のHTML

例によってHTMLの部分を変更しますので、事前のバックアップはお願いします。

レスポンシブデザインの「@media screen and (max-width: 768px){　」の内の「#related-posts .related_img」に「float:left;」を追加します。
これで画像が画面に左に配置される事になりました。
（HTMLの内容が合っているかどうかは不明ですが、移動したので良しとしました。）



続けて下記の「文字の設定のＣＳＳ」を先ほどの下にでも追加記入して下さい。




私のサイトでは、上記の様に設定をしています。


「#related-posts .related_img」は、画像部分の設定で、

「width:80px;」は画像の横幅
「height:80px;」は画像の縦幅
「margin-left:10px;」は左の余白
「margin-right:20px;」は右の余白


「#related-title 」は文字の部分の設定で、

「font-size:14px;」は文字の大きさ
「width:320px;」文字の入る部分の横幅（autoにすると崩れたので設定しています。）
「margin-left:10px;」左からの位置、数値が大きいほど右に寄ります。


になりますので、画像の大きさと文字のバランスをみて任意の数字を入れてみて下さい。

タブレットの縦画面での表示は？

因みに、上記の設定では、スマホは縦並びになりましたが、タブレットの縦画面では、２列表示になっていました。
完全に縦の並びにはなっていなくて申し訳ないです。


実際は、この様な感じです。
横に並んではいますが、配置としては、まぁ初心者にしては上手く収まった方かと思います・・・。


タブレットで確認ですが、横向き、PCの画面では下の通り。
文字の配置が少々異なっていますね。

画像の装飾

今回、位置を変えた事と、上の人気記事の並びと区別がしやすいように、関連記事の画像部分を少々変えてみました。
上の写真の様に、丸みのある四角の画像と、線で縁取りを付けてみました。

自己満足ですが、SNSボタンのデザインに似ているので何となく統一感が出たと思っています。


スマホ・PC共通ですので、関連記事の画像の装飾は「レスポンシブデザイン」とは別の部分に記載となっています。


CSSの「関連記事」の文字から始まる部分の「#related-posts .related_img {　」が画像の装飾部分ですので、

 


を追加で記入しています。

例によって、

「 border-radius: 8px;」は、画像の角に丸みを付ける・角の丸みの大きさ
「border: solid 1px #7f7f7f;"」は、画像の縁取り、線の幅・線の色

という設定です。

もし、画像がゆがんでいる場合は、「object-fit: cover;」を記載すると良いですよ。

最後に

初心者のカスタマイズですが、色々と追加をして何となく見た目が変ってきたのかなぁ？と
思っています。


この様にＨＴＭＬやCSSが詳しく無い私の様な人間でも、設定を好みの見た目に変える事が出来るbloggerは、とても楽しいブログサービスだと思います。

blogger・vaster2のユーザーがもっと増えたら良いなぁと思い記事にしています。
良ければ参考にしてみて下さい。