4分SHAREツイートシェアはてブLINEPocketWordPressでブログをやっているけど、関連記事を画像付きで綺麗に2列以上で表示したい!という方におすすめできる記事になっています。コピペで簡単に変更可能です!関連記事を2列以上にし、デザインを見やすくきれいにすることで1画面でより多くの記事が目につくので、回遊率も上がります。1.関連記事をタイル形式で2列にしたときの完成品まずは完成品からお見せします。実装できると、以下の画像のような形で表示できます。(右上はマウスホバー中)スマホだとこんな感じ。大きな差はありませんが、スマホのときは一つ一つをより小さくして2列表示できるようにしています。タイル1つ1つの幅を各自で指定してもっと小さくしてもらえば、3列表示とかも可能になります。2.関連記事をタイル化するためのHTMLまずはHTMLからいじっていきます。関連記事を表示させるための場所(私の場合kanren.php)をいじっていきます。表示したい記事数の指定が難しく書かれている後の部分を以下のHTMLに変更します。最初にあるdivタグが関連記事内を囲っている要素になります。?></div>なにをしているかというと、以下の画像のようなhtml構成にしています。白色:aタグ(記事へのリンク)画像:imgタグ(記事のサムネイル)タイトル:pタグこれらをulタグとliタグを使って列表示させている感じですね。意味が分からなければHTMLの記事をみることを推奨します。【初心者向けHTML入門】学習のための基本まとめWebページを自分で作るときに欠かせないのがHTML。これから始めるHTML入門のページになっています。今回は、そんなHTMLについて図やイラストなどを多く使用して基本的な部分を解説していきたいと思います!前半ではHTMLについてとコードの練習方法、後半ではよく使うタグについて紹介していきます。3.関連記事を2列以上でタイル化するためのCSSつぎにCSSを設定して終わりです。以下のCSSになります。10px;}}これで完成です。各自で調節したほうがいい場所もあると思いますので、その辺りを説明します。{・・・で画面横幅が550px以下になれば画像やタイトルを小さくして、2列にできるようにしています。あなたのサイトの関連記事の幅・画面の横幅次第では関連記事が1列で表示されてしまう可能性もあります。そのため、ここの550pxについては各自で調節が必要かと思います。確認方法は、デベロッパーツールを開けば1px単位の横幅で確認可能です!Webデザイン変更をするなら必ず抑えておきたいデベロッパーツールの使い方よりよいデザインを目指すためにchromeの検証機能―デベロッパーツールの使い方について紹介します。この便利機能なしではデザインをいじるのは難しく、私も多用しています。レスポンシブ対応できているか見る方法もあり、「デザインが崩れていて読みにくいor読めない」という理由だけで読者を逃がすことが無いようにします。関連記事を3列で表示させたい関連記事を3列以上で表示させたい!という場合は、aタグのwidthとheightを各自で調節しましょう。それに従って画像の高さやタイトルの大きさも変えたほうがいいかと思います。以下の部分のCSSを調節すればOKでしょう。10px;}}各自でこの辺りをいじり、幅が小さくなれば自動で3列にも4列にもなります。4.まとめ今回は、関連記事のデザインを書き換える方法について書きました。アイキャッチ画像のサイズによっては多少引き延ばされたりとか、私のいつも設定する画像サイズでは変に見える!ということもあるかもしれませんので、適宜調節してみてください。ブログのデザインをいじるのが面白くて他にも色々していますので、よかったらぜひ。WordPressのカスタマイズ集━無料テーマでもここまでおしゃれに!【コピペでOK】WordPressの無料テーマを使っているけど、ブログデザインをもっとおしゃれにしたい!あの綺麗なブログのあのパーツはどうやってできているんだろう?そういった悩みの助けになる記事です。この記事では、私が今までにやってきたブログデザインをまとめて紹介しています。