広める価値のあるコンテンツと思ったら、シェアお願いします!☺️

【CSS】Simplicityの関連記事を美しくそろえる方法

関連記事

「関連記事の4列表示がモバイルだとダサい……」

「デスクトップだとキレイに表示されるけど、モバイルだと全体的に左に偏る!」

という方向けに

Simplicityの関連記事をモバイルで美しくそろえる方法をご紹介します!

この方法は探しても見つからなかったので、備忘録として載せておきます。

モバイル表示の関連記事を美しくそろえるCSS

以下のコードを

外観→テーマの編集→Simplicity2 child: スタイルシート (style.css)

にコピペするだけでOKです!

または、カスタマイズの追加CSSにコピペするだけで大丈夫です!

コードが汚いかもしれませんが、許してくださいm(__)m

Backgroundカラーは各自変更をお願いいたします。

@media(メディアクエリ)を設定している理由は、モバイル用とデスクトップ用で分けるためです。

コピペした後

このように美しくなります!

関連記事そろえる

サムネイルが左に偏らなくなり、キレイに真ん中を中心としてサムネイルが広がっています!!

simplicityの関連記事のデザインに悩まされてた方も、これで大丈夫ではないでしょうか。

まとめ

simplicityの関連表示についてご紹介させていただきました。

サイトの作成は細かいところにもこだわりたですよね♪

今回のコードで何かご不明な点ございましたら、お気軽にご質問くださいませm(__)m

わかる範囲でお答えいたしますっ!!

関連記事:

最強すぎる商用無料のイラストサイト11選!

最強すぎる商用無料の写真サイト11選!

広める価値のあるコンテンツと思ったら、シェアお願いします!☺️