「display-posts」の記事一覧をCSSで装飾

前回の記事で固定ページの一覧やカテゴリ、タグごとの最新記事一覧を固定ページ内に出力できるようになった。

スクリーンショット 2016-08-19 12.08.23

固定ページのサムネイル(アイキャッチ)画像がなくて、寂しいので、
Placehold.jp|ダミー画像生成 モック用画像作成でサクサクっと各固定ページのアイキャッチ画像を作成して設定。
(あと、「top」はそのページ自身なので、「offset」で表示しないようにした)

スクリーンショット 2016-08-19 12.24.54

単なる箇条書きで見栄えがよくないので、ここからはCSSで装飾。

[WordPress.com] 最新記事をタイル状(5 列)に並べるための CSS | comemoを参考に。
※サンプルコード内の記号が、HTML表示用の表記になっていたため、一旦、テキストエディタで修正してからお借りしました。

やることは、ざっくり、

  1. 「固定ページ」のショートコード[display-posts])を<div>で括って、class名、id名をつける(今回は参考サイトに倣って、「boxline」 「medium」というclass名に)
  2. 「外観」→「テーマの編集」で自分の使っているテーマのスタイルシート (style.css)に、該当class、idに装飾を施していく

まず1.を固定ページ一覧に施すと、こんなん。
<div class=”boxline medium”>[display-posts post_type=”page” image_size=”thumbnail” orderby=”menu_order” offset=”1″]</div>

そして、2.のために参考記事のサンプルコードをお借りしてスタイルシート (style.css)にコピペ。

どや。
スクリーンショット 2016-08-19 13.15.41

ん?タイトルの配置がおかしい。。。
5個の記事を横に並べる用のCSSなのに、3個しか記事ないのはご愛嬌(笑)

ここからのCSS微調整は、Google Chromeのデベロッパーツール使って、サクサク。
WordPressでCSSの反映を確認しながら編集する方法 | WPnavi

サムネイル(アイキャッチ)画像周りの枠線の色変えてみたり、
さっき変だった画像の上下にタイトルが配置されるのを修正(li要素の中のimg要素の「float: left;」外したら治った)
スクリーンショット 2016-08-19 14.18.52

こんな感じでちょこちょこがんばります。

参考)WordpressのCSS編集について
自分でカスタマイズしよう!WordPressでcssを編集する方法 | TechAcademyマガジン

スポンサーリンク
レクタングル(大)