#yStandard の一覧ページをカードスタイルにカスタマイズしてみた

Pocket
Bookmark this on Google Bookmarks

どうも、クリハラ(@kurit3)です

本ブログ、私的植物生活概論はWordPressで運用しています。使用しているテーマは #yStandard です。
yStandard – 一風変わったカスタマイズありきのWordPressテーマ
@yosiakatsukiさん作製のシンプルなテーマで、とてもお気に入り

そのまま使ってもカッコいいデザインなのですが、わたしはこの一覧ページをカードスタイルにして並べています。その時のカスタマイズ方法をご紹介いたします。ウェブについては素人同然ですが、できるだけわかりやすく書きました!

デフォルトのyStandard

まずは、デフォルトのリスト表示について。アイキャッチ画像とタイトル、抜粋文などの情報が表示されています。

サムネイル画像には「float:left」が効いているので、タイトルなどの「entry-detail」と横並びになっている状態ですね。サムネイル画像の横幅は「250px」になっています。

カードスタイルのchild-kurit3

わたしが行ったカスタマイズはこんな感じです。

  • サムネイル画像に効いている「float」を無効にする
  • こうすることにより、アイキャッチ画像と「entry-detail」が縦並びになります。

  • サムネイル画像を「380px」に
  • サムネイル画像をちょっと大きく並べたかったので、幅を広げてやりました。

  • 「entry-container」に「float:left」「max-width:50%」「height:500px」を追加
  • この部分が大事な部分だと思います。横並びにして、幅を等分にしている状態です。max-widthを33%にしてやれば3等分の細かいカード表示にすることも可能です。

    2つ横並びにしたことで、タイトルや抜粋文の長さによってはズレが生じます。そのため、高さを500pxで指定してやりました。

cssに追加したコード

子テーマのファーストビューのスタイルシートに、上記のコードを追加しました。これでカードスタイル表示に変更できました。

余白やタイトルフォントのサイズ、行間等は、それぞれの好みでデザインしてください。あとは、レスポンシブについてもちょっと追加した記憶があります。PC表示からタブレットサイズにした時に、カードが重なる場合があるのでご注意ください。

作者のよっひーさんもおっしゃる通り、カスタマイズありきのテーマですからね!わたしでもできたので、どうぞ挑戦してみてください。バックアップはお忘れなく〜〜


っていう感じでよろしいですかね。

2017,5 くもり