初心者Vaster2カスタマイズ「スマホの関連記事を縦並びに」

初心者のVaster2カスタマイズです。
今回は「スマホの関連記事を縦並びに」です。




これに関しては利便性よりも好みの問題ですので、変更後の配置の方を先に見て、判断して頂ければと思います。

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

©さんがつ日記「スマホの関連記事を縦並びに」1

これは、
©さんがつ日記「スマホの関連記事を縦並びに」2

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

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






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


初心者Vaster2カスタマイズ「スマホの関連記事を縦並びに」

スマホの関連記事のHTML

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

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

#related-posts .related_img{
 float:left;
 width:80px;
 box-sizing:border-box;
 height:80px;
 margin-left:10px;
 margin-right:20px;
}


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


#related-title {
 font-size:14px;
 width:320px;
 margin-left:10px;
 height:60px;
}


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


「#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;」左からの位置、数値が大きいほど右に寄ります。


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


タブレットの縦画面では・・・

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

©さんがつ日記「スマホの関連記事を縦並びに」3

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


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

©さんがつ日記「スマホの関連記事を縦並びに」4


画像の装飾

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

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


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


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

 
   border-radius: 8px;
   border: solid 1px #7f7f7f;"


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

例によって、

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

という設定です。

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


最後に

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


この様にHTMLやCSSが詳しく無い私の様な人間でも、設定を好みの見た目に変える事が出来るbloggerは、とても楽しいプラットフォームだと思います。

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



2 件のコメント :

Adelheid.H さんのコメント...
さんがつcubicle さんのコメント...