Simplicityの記事一覧をカード型にカスタマイズする(2016/1/30一部修正)

  • このエントリーをはてなブックマークに追加
  • 0

AMx46YO6v5S4glc1452596107_1452596278

こんにちは、machiです。今回は、Simplicityのトップページをカード型にしてみます。完成するとこんな感じになります。

カード

では、さっそくカスタマイズしましょう!

※スマホ表示の場合に横揺れしたので、一部修正を加えました。(2016/1/30)

Simplicityのトップページをカード型にカスタマイズ

Simplicityの構造を把握する

カスタマイズをする前に、Simplicityの構造を少しだけ説明しておきます。元々の記事一覧はこのようになっています。

ZKlBbidu1ygWmUy1452592393_1452592514

.home #mainで、トップページのメイン部分全体が定義されていて、その中にそれぞれの記事(#main .entry)が並んでいます。これから行うカスタマイズをざっくり説明しておきます。

①.home #mainの背景を透明化+余白を調整する
②#main .entryに背景色をつける+余白を調整する
③記事部分に影をつける

以上です。なんだか難しそうですが、これから紹介するコードをコピペするだけなので10分もかかりません。注意点ですが、Simplicityのカスタマイズをする前に、必ずバックアップをとってください。

また、外観⇒カスタマイズ⇒レイアウト(全体・リスト)⇒一覧リストのスタイルを「エントリーカード(デフォルト)」に設定してください。

①.home #mainをカスタマイズする

メイン部分の背景を消す

まずは、メイン部分をカスタマイズします。CSS.styleにこちらを追加してください。

コードを追加すると、メイン部分の背景がなくなります。

背景の透明化

外枠を消す

Simplicityにはもともと外枠がついているので、こちらを追加して外枠を消します。

トップページだけだなく記事ページの外枠を消したいという方はこちらを追加します。(これひとつでOK)

余白を調整する

余白の調整をします。これから記事一覧部分をカード化しますが、その際にメイン部分の余白が邪魔になります。なので、今のうちに余白を調整しておきます。こちらを追加してください。

ちなみに、paddingの数値を0にすると、スマホ表示の場合にデザインが崩れます。なので、5pxにしています。対処法があったら教えて頂けると嬉しいです。

②#main .entryをカスタマイズする

エントリー部分の背景を白にする

次にエントリー部分のみ背景色(白)をつけます。こちらをCSSに追加します。

追加すると、このようになります。

2

#main .entryの余白を調整する

次に、カードの幅と余白を調整して、見た目を整えます。

1
カードっぽくなってきましたね!外枠と影をつけて、もっと立体的にしてみます。

カード

カテゴリーとアーカイブを透明化

次にカテゴリーとアーカイブの背景を透明化します。トップページのカスタマイズとほぼ同じです。追加するのはこちら。

今回のカスタマイズで追加するコード

最後に今回追加したコードをまとめてみました。外観⇒カスタマイズ⇒レイアウト(全体・リスト)⇒一覧リストのスタイルを「エントリーカード(デフォルト)」に設定した後、こちらのコードを追加してください。

カスタマイズする前に、必ずバックアップをとってくださいね。では、以上でSimplicityのカスタマイズは終了です。お疲れ様でした。

コピペで簡単!Simplicityのカスタマイズまとめ。
このサイトはWordpressを使っています。テンプレートはSimplicityです。これま...



  • このエントリーをはてなブックマークに追加
date-entry
トップへ戻る