WordPressテーマ「Simplicity」をカスタマイズする19のポイント【2016.04.14更新】

Simplicity-customize

※カスタマイズは随時変更しているので、記事内容とズレが生じている可能性があります。ご了承ください。

※2016年4月14日追記:「Simplicity2.0」にテーマを更新して修正しました。なので、「Simiplicity1」を利用している方は、本記事のCSSだとうまくいかないことがあるので、ご了承ください。

以前、コピペで一発!「Simplicity」カスタマイズ11項目という記事の中でWorpressテーマ「Simplicity」のカスタマイズ方法を紹介しましたが、「まだまだカッコよくしたい!」と思い、それ以降ちょいちょいカスタマイズを加えていました。

そこで以前の記事の内容と現状のデザインが違ってきちゃったので、またまたカスタマイズをまとめてみました!以前の内容も含めてアップデートしてます。

▼目次

  1. グローバルメニューのカスタマイズ
  2. 「記事を読む」「続きを読む」を消す
  3. サイドバーメニューのカスタマイズ
  4. パンくずリストをカスタマイズ
  5. 人気記事ランキングの順位をカスタマイズ
  6. 「上へ戻る」ボタンのカスタマイズ
  7. 見出しのカスタマイズ
  8. 記事間に線を引く
  9. スマホメニューのカスタマイズ
  10. 追従SNSボタンを左に寄せる
  11. 記事幅を狭める
  12. Webフォントを導入する
  13. フォントの色を少しだけ灰色にする
  14. ブログのロゴを真ん中に寄せる
  15. リストのタイトルの文字の大きさを調整する
  16. メインカラムとサイドバーの囲い線を消す
  17. リストタグの幅を微妙に整える
  18. メタ情報の大きさを変更し、右側へ
  19. サムネイル画像に変化をつける
Sponsored link

1.グローバルナビのカスタマイズ

まずはグローバルメニューのカスタマイズです。

ここでのカスタマイズ内容は2つです。

グローバルナビの上下に線を引く

グローバルナビの変更の前に、カスタマイザー設定で以下のように設定しました。

  • スキンを「オレンジメニュー(サブなし)」に設定
  • 色の「グローバルナビ色」を #ffffff に設定
  • 色の「グローバルナビリンク色」を #a4a7ab に設定
  • 色の「グローバルリンクホバー色」を #ffffff に設定
  • 「グローバルナビの画面幅いっぱいにする」にチェック

Simplicityのカスタマイザー設定の「色」の設定

それに加えて、以下を子テーマのsytle.cssに以下を記入しましょう。

【結果】

これで、グローバルナビの上下に灰色の線を引いたようなデザインになりました!ホバー時に線が引かれるのでいい感じです!

masalog.me(まさろぐ) – 映画とかおもしろいものナンデモ

グローバルメニューのホバーの線と文字色、背景色を変える

次にグローバルメニューのホバー時の下線と、文字色を変更します。それには以下のCSSを挿入します。colorとbackgroundに続く色は、お好みで指定してください。

【結果】

スクリーンショット 2016-01-25 22.03.34

2.「記事を読む」「続きを読む」を消す

前回の「コピペで一発!「Simplicity」カスタマイズ11項目」では、「記事を読む」「続きを読む」ボタンを以下のようにデザインしていましたが、別にあってもなくても変わらないな−という判断で消してしまいました。

「記事を読む」ボタンのカスタマイズ

設定方法は、カスタマイザー設定>テーマ内テキストの「記事を読む」「続きを読む」の部分を空白にすれば大丈夫です。

テーマ内テキストの変更

3.サイドバーメニューをカスタマイズ

① 見出しの背景をつける

見出しの背景を変えましょう。背景は以下の記述します。

② 擬似クラスでFont awesomeを読み込む

次に見出しの前にアイコンをつけます。これに関しては以下の記事がとても参考になるので、これを参考にしてください。

「カテゴリー」「人気記事」「新着記事」のスタイルを変えるコードだけ以下に貼っておきます。

【結果】

これで、いい雰囲気のカテゴリーに修正することができます!!

【映画】『マッドマックス 怒りのデス・ロード』行って帰ってるだけでもメッチャ面白い

4.パンくずリストをカスタマイズ

このパンくずリストのカスタマイズは、自分の知識では書いているコードの内容が理解不能だったため、以下のサイトを参考にして、ただコピペしただけです。少しだけ色を修正してあります。

【結果】

パンくずリストの部分が灰色の背景と黒っぽい文字に変更できます!

ぱんくず-min

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

人気記事ランキングの順位のところのデザインを変更します。詳しいやりかたは以下の記事を参照。

【結果】

人気記事ランキングの順位がオシャレになりました!

人気記事ランキングの順位をオシャレにする

6.「上へ戻る」ボタンのカスタマイズ

上へ戻るボタンはカスタマイザー設定で簡単にできます。「上へ戻る」ボタンに使用したいアイコンを探して、それを「レイアウト(全体・リスト)>トップへ戻るボタンに画像を指定」で、画像をアップロードするだけです。

ぼくは、画像を以下のアイコンファインダーで探しました。

【結果】

これを押すとロケットが上昇しているっぽくなります!

上へ戻る-min

7.見出しのカスタマイズ

見出しをカスタマイズしました!h1、h2、h3、h4を修正します。

【結果】

h1(見出し1)

h2(見出し2)

h3(見出し3)

h4(見出し4)

実際の文章にした感じは以下の記事を見てもらえればわかりやすいです。

映画業界に行くため大学休学したらホリエモンにdisられ、会社クビになった話
photo by mdalmuld 「オレ大学休学するわ!!」 そう言って、早1年半くらいが経った。 近年、大学を休学して、海外留学をしたり、企業...

8.記事間に線を引くカスタマイズ

記事の間に薄い線を引きます。style.cssに以下を記述しましょう。

ちなみに記事ページの下にある関連記事間にも線を引きたい場合、以下も追加します。

【結果】メニューの記事と記事の間に薄い線が入ります。

記事間に薄い線を引く

9.スマホメニューのカスタマイズ

スマートフォン画面でのメニューの表示デザインをカスタマイズします。

これに関しても以下の記事にお世話になりました。男は黙ってコピペ!

【結果】

IMG_1201-min

10.追従SNSボタンを左に寄せる

「カスタマイザー設定>SNS>サイドに追従シェアボタンを表示にチェック」を行うと、左側にスクロールしてもついてくるSNSボタンを表示することができます。ただ、この追従ボタンの位置がちょっと記事のほうに寄りすぎていて記事がみづらくなってしまいます。そこで、追従ボタンを左のほうに寄せました。

:消してしまいました笑(2016.03,03追記)

(※-150pxのところの数値を変えて各自調整してみてください)

【結果】

これで記事がスッキリ見れます。

【映画】『マッドマックス 怒りのデス・ロード』行って帰ってるだけでもメッチャ面白い

11.記事幅を狭める

Simplicityは公式ページを見てもらえればわかりますが、ちょっと記事幅が広めに感じます。ぼくは文が横に広がりすぎると、読みにくさを感じてしまうため、この記事幅を狭めています。

:記事の外枠を消すことで記事幅の広さの印象が消えたので、現在は通常幅に戻しています(2016.01,24追記)

「Simplicity」をカスタマイズした1-min (1)

この幅は、人それぞれ好みがあると思うので、パーセンテージ(%)の中の数値を変えながら調整してみてください。現状92%が一番自分にとってグッときてます(感覚ですね)。

12.Webフォントを導入する

Simplicityのフォントは別に見づらいわけではなかったのですが、ブログ自体をもう少し華やかなものにしたかったので、Webフォントを導入しました。

Webフォントって何?どうやって導入するの?という点については以下の記事を参考にしてください。

Webフォントでブログを華やかに! Google Fontsの「Quicksand」がいい感じ【Wordpress、はてなブログ導入方法】
フォントを変える。 多くのメディアの記事だとか、ブログだとかを読んでいて本当にフォントって重要だと思います。フォントによって記事の印象が変わったり、記事の...

【結果】

Webフォントでブログを少し華やかに!Google Fontsの「Quicksand」がいい感じ【WordPress、はてなブログ導入方法】

Webフォントdでブログを少し華やかに!Google Fontsの「Quicksand」がいい感じ【WordPress、はてなブログ導入方法】

13.フォントの色を少しだけ灰色にする

ここで言うフォントとは本文中の記事内の今読んでいる部分です。「これってただの黒じゃね?」って思われると思いますが、若干灰色のしています。というのも、以下の記事でブログの記事に文字は黒よりも灰色のほうが見やすい、ということが書かれていたからです。

確かに、少し灰色のほうが目に優しそうな気がしたので、以下で変更しました!

14.ブログのロゴを真ん中にする

ブロガーのイケダハヤトさんのブログがロゴ(というよりブログタイトル)が真ん中にドーンという感じにデザインされていたので、けっこう色合いも似ていたので真似しました。

サイトタイトルを中央寄せ

ちなみにこのサイトのロゴは「Squarespace Logo」という無料で使えるサイトで制作しました。その使い方は以下。

無料で良い感じのロゴが5分できる「Squarespace Logo」
「自分だけのブログやウェブサイトを作ろう!」 そうなったときに欲しいものが「ロゴ」です。ロゴというものは不思議なもので、それがポツンとあるだけであたかもち...

15.リストのタイトルの文字の大きさを調整する

リストのタイトルとは、ブログのトップの記事タイトルのことです。この文字の大きさを少し小さくしたかったので、以下で調整しました。

【結果】少しだけ小さい文字に。

リストのタイトルの修正

16.メインカラムとサイドバーの囲い線を消す

メインカラムとサイドバーの線を消します。

【結果】これでブログに開放感が出ましたね!

枠線を消す

17.リストタグの幅を微妙に整える

リストタグというのは、以下のこれです。

  • これ
  • これ
  • これ

このリストタグなんですけど、Simplicityのデフォルトだとちょっと窮屈な印象なんですよね。なので、少しだけゆとりを持たせるように調整しました。

18.メタ情報の大きさを変更し、右側へ

メタ情報とは、Simplicityのこの部分です。

masalog.me(まさろぐ) – 映画とかおもしろいものナンデモ

映画としてのアニメ作りにこだわり抜いた『傷物語 鉄血篇Ⅰ』めっちゃ待ちわびたぞ!【映画Review】 – masalog.me(まさろぐ)

めっちゃ細かいところですが、ちょっとこの部分の文字の大きさが気になっていたので文字を小さく、そして右側に持ってきました!

19.サムネイル画像に変化をつける

ブログのトップ画面の画像のところにマウスをのせると、ちょっと画像に変化がつく(例えば、色味が変わったり、動いたり)ことってありますよね。

それを自分のブログでも導入したかったので、つけてみました!

【結果】

マウス

ちょっとだけ白っぽくなって、浮き出てくるよ!!!

スクリーンショット 2016-03-03 23.08.02

Simplicityはよく出来たWordpressテーマで色々なブログでよく見るのですが、少しデザインが野暮ったいままの人が多いと思います。これを参考により見やすくキレイなブログを作り上げてください。

それでは。

トップへ戻る