どうも、クリハラ（@kurit3）です
本ブログ、私的植物生活概論はWordPressで運用しています。使用しているテーマは #yStandard です。
yStandard – 一風変わったカスタマイズありきのWordPressテーマ
@yosiakatsukiさん作製のシンプルなテーマで、とてもお気に入り
そのまま使ってもカッコいいデザインなのですが、わたしはこの一覧ページをカードスタイルにして並べています。その時のカスタマイズ方法をご紹介いたします。ウェブについては素人同然ですが、できるだけわかりやすく書きました！
デフォルトのyStandard
まずは、デフォルトのリスト表示について。アイキャッチ画像とタイトル、抜粋文などの情報が表示されています。
サムネイル画像には「float:left」が効いているので、タイトルなどの「entry-detail」と横並びになっている状態ですね。サムネイル画像の横幅は「250px」になっています。
カードスタイルのchild-kurit3
わたしが行ったカスタマイズはこんな感じです。
- サムネイル画像に効いている「float」を無効にする
- サムネイル画像を「380px」に
- 「entry-container」に「float:left」「max-width:50%」「height:500px」を追加
こうすることにより、アイキャッチ画像と「entry-detail」が縦並びになります。
サムネイル画像をちょっと大きく並べたかったので、幅を広げてやりました。
この部分が大事な部分だと思います。横並びにして、幅を等分にしている状態です。max-widthを33%にしてやれば3等分の細かいカード表示にすることも可能です。
2つ横並びにしたことで、タイトルや抜粋文の長さによってはズレが生じます。そのため、高さを500pxで指定してやりました。
cssに追加したコード
子テーマのファーストビューのスタイルシートに、上記のコードを追加しました。これでカードスタイル表示に変更できました。
余白やタイトルフォントのサイズ、行間等は、それぞれの好みでデザインしてください。あとは、レスポンシブについてもちょっと追加した記憶があります。PC表示からタブレットサイズにした時に、カードが重なる場合があるのでご注意ください。
作者のよっひーさんもおっしゃる通り、カスタマイズありきのテーマですからね！わたしでもできたので、どうぞ挑戦してみてください。バックアップはお忘れなく〜〜
っていう感じでよろしいですかね。
2017,5 くもり