「Simplicity」で、CSSカスタマイズした、12のポイント

Simplicityを使う上で、CSSカスタマイズしたポイントをまとめました。

コピペするだけ、簡単です。

スポンサーリンク

「Simplicity」で、CSSカスタマイズした、12のポイント

CSSカスタマイズ とは

Simplicityの子テーマのCSS(スタイルシート)に、設定を追加することです。「外観」→「テーマの編集」から、「Simplicity2 child」の「style.css」に、以下をコピーして、追加します。

1.フォントカラーの変更

記事文字は、黒よりも少し灰色に近い方が、読みやすいと言われています。そのため、灰色がかったカラーに変更します。

2.メインカラムとサイドバーの枠を消す

メインカラム・サイドバーエリアともに、標準では枠線で囲われていると、すこし窮屈に見えるので、無しにします。これで、全体的にスッキリ見せることが出来ます。

3.記事の行間を修正

読みやすいように、行間を修正します。こちらは好みによって、値を変えてくださいね。

4.記事の日付表示を調整

記事上部に記載される日付(投稿日や更新日など)を、右に寄せて、見やすく調整します。ぱんくずリスト(カテゴリ)が左寄せなので、対称的にして、少し見栄えが良くなります。(↓)

5.ぱんくずリストの装飾

コチラの記事(↓)を、参考にしてください。

【コピペで簡単】「Simplicity」で、パンくずリストを装飾する
【コピペで簡単】「Simplicity」で、パンくずリストを装飾する
Simplicityのパンくずリストを、おしゃれに装飾する方法をご紹介! コピペするだけ、簡単です...

6.ブログカードのマウスオーバーをおしゃれに

コチラの記事(↓)を、参考にしてください。

「Simplicity」で、ブログカードのマウスオーバーをおしゃれにみせる
「Simplicity」で、ブログカードのマウスオーバーをおしゃれにみせる
Simplicityのブログカードをマウスオーバーした時、おしゃれにみせる方法をご紹介! コピペす...

7.リンク付き画像のマウスオーバーも、おしゃれに

6.の設定を応用して、記事内にリンク付き画像を挿入した時にも、マウスオーバー効果を出しました。これにより、この画像にはリンクがあるよ!っていうのが、わかりやすくなります。

8.サイドバーの見出しを装飾

サイトバーも、少し存在感を出せるように、装飾します。こんな感じに!(↓)

アイコンは、コチラのサイト様(↓)から、好きなものを選べます。「content:”\f0fb“;」の赤字箇所を、選んだものに変更して、ご利用くださいね。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

9.タイル表示の高さを調整

コチラの記事(↓)を、参考にしてください。

【コピペで簡単】「Simplicity」で、トップのタイル表示を調整する
【コピペで簡単】「Simplicity」で、トップのタイル表示を調整する
Simplicityのトップページをタイル表示する際に、表示を整える方法をご紹介! コピペするだけ...

10.フローティングメニューの作成

コチラの記事(↓)を、参考にしてください。

【コピペで簡単】「Simplicity」で、フローティングメニューを作る
【コピペで簡単】「Simplicity」で、フローティングメニューを作る
Simplicityのグローバルメニューを、スクロール追従させる方法をご紹介! コピペするだけ、簡...

11.人気記事ランキングの順位表示をカスタマイズ

「Simplicity」用の記事ランキングウィジェット、「[S]人気記事」を使用している場合に、順位表示がされます。(このウィジェットを使用する場合は、「WordPress Popular Posts」プラグインが必要です)

こんな感じ(↓)にして、おしゃれさを出します。

12.見出し(h1~h6)をおしゃれに

コチラの記事(↓)を、参考にしてください。

【コピペで簡単】「Simplicity」の、見出しをおしゃれにする
【コピペで簡単】「Simplicity」の、見出しをおしゃれにする
Simplicityの見出しを、おしゃれにする方法をご紹介! コピペするだけ、簡単です。 「Si...

以上で、完了です。

まとめ

当ブログも、この12ポイントの、CSSカスタマイズをしています。

「Simplicity」の良さは、シンプルで余計な動きが無い点と、こういったカスタマイズにより、自分好みなデザインに変えられるところにあると、僕は思っています。すべて同じにする必要は無いので、気に入ったものだけや、好きな色に変えたりなんかして、CSSカスタマイズを楽しんでくださいね!

狐火兎
基本的なブログのカスタマイズポイントは以上ですが、他にも記事を作る時にあったら便利なものもあります。そちらはまた、別の機会にご紹介させてください。 では、また♪