Simplicityの記事一覧をフラットにするカスタマイズをする方法紹介

シェアする



URLをコピーする
Simplicityの記事一覧をフラットにするカスタマイズをする方法紹介
https://fwww7.com/2017/01/19/post-4947/

どうもIT大好きFwwwです。

引き続きSimplicityカスタマイズの記事を書かせていただきます。

今回はSimplicityトップページの記事一覧と関連記事一覧をこのようにフラットにするカスタマイズ方法をご紹介します。

Simplicity記事一覧フラット

スポンサーリンク

Simplicityで表示される記事一覧をフラットなデザインにしよう

トップページの記事一覧をフラットにする

トップページの記事一覧をフラットにするCSSコードはこちらです。

上記のコードで私のテスト環境ではこうなりました。

Simplicity トップページ フラットサンプル

#mainの背景をサイト背景色と同じにするとこのようにキレイに表示できます。

※区別がつきやすいようにbackground-colorは#fffにしました

もし記事一覧の一つ一つの記事枠に丸みを帯びさせたいなら、

#main .entryにborder-radiusなどを書いちゃってください。

また日付やカテゴリが表示される箇所の背景も同じにしたい場合は、

classがpost-metaなのでbackground-colorなどで試してみてください。

そしてこのままだと画像か記事タイトルをクリックしないと記事ページへ行けないので、

エントリーカード全体をリンク化するカスタマイズも行います。

外観のカスタマイズの中にあるレイアウト(全体・リスト)に移動して、

“エントリーカード全体をリンク化”をオンにしてください。

そして、デフォルトではエントリーカードをhoverすると灰色になっちゃいますが、

これを明る過ぎなく程よい黄色にカスタマイズします。

これでトップページの記事一覧をフラットにするカスタマイズは終了です。

投稿ページの関連記事一覧をフラットにする

投稿ページの関連記事一覧も同じようにフラットにするコードは、

下記コードです。

こちらも丸みを帯びさせたいのであればborder-radiusなど好きにやっちゃってください。

スポンサーリンク

まとめ

この記事でトップページの見栄えはスッキリしてキレイなフラットになりましたでしょうか。

もしデザインが崩れてしまった場合はコメントください。

Simplicityカスタマイズマニュアル

スポンサーリンク

シェアする



URLをコピーする
Simplicityの記事一覧をフラットにするカスタマイズをする方法紹介
https://fwww7.com/2017/01/19/post-4947/

オススメ記事