「カスタマイズ」の記事一覧

どうも、クリハラ（@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表示からタブレットサイズにした時に、カードが重なる場合があるのでご注意ください。 作者のよっひーさんもおっしゃる通り、カスタマイズありきのテーマですからね！わたしでもできたので、どうぞ挑戦してみてください。バックアップはお忘れなく〜〜 @46sym あ、ホントだ。これはクリさんが自分でカスタマイズしてますね！まだ見た目の切り替え機能はテーマカスタマイザーからの簡単な実装してません。…というか実装する気はありませんｗ「yStandardの一覧ページをカードスタイルにカスタマイズしてみた」的な記事期待！— よしあかつき@よっひーと呼ばれています (@yosiakatsuki) 2017年3月24日 っていう感じでよろしいですかね。 2017,5 くもり

「カスタマイズ」の記事一覧

【Mac】写真からカラーコードを調べる方法【DigitalColorMeter】

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

クリハラ