ご冗談でしょう、チャッキーさん

チャッキーさんの旅と読書とWordPress学び備忘録

Simplicity2が驚くほどカッコ良くなるカスタマイズ方法

約 8 分

ワードプレスのテンプレートを「リファインSNOW2」から「Simplicity2」に乗り換えて1ヶ月。記事も50くらいに増えてきたので見た目を思いっきりカスタマイズしてみました。

とっても満足行く仕上がりになったので備忘録として記載しておきます。

Simplicity2 テンプレートとは

Simplicityには主に、以下の7つの特徴があります。

  • シンプル
  • 内部SEO施策済み
  • 拡散のための仕掛けが施されている
  • 端末に合わせた4つのレスポンシブスタイル
  • 手軽に収益化
  • ブログの主役はあくまで本文
  • カスタマイズがしやすい

引用元:Simplicity2公式ページ 

僕が気に入ったのは、「無料」そして「シンプル」な所です。

「Simploicity2」は日本製で利用者が多いので、沢山の方がカスタマイズページを作成してくれています。

だから、困った事があっても簡単に解決することが出来ます。

また、無料にも関わらず対応はピカイチです。

公式ページで質問をすれば、有志の方や制作者がすぐに対応してくれます。「ぶっちゃけ無料で良いの?」って思ってしまうくらい素晴らしいテンプレートです。

カスタマイズ1 グローバルナビの色変更

グローバルナビの色を変更するのは、とてもカンタンです。

simplicity2-custom

WPのダッシュボードメニューから「外観」⇒「カスタマイズ」を選択します。

simplicity2-custom

ページが切り替わったら、左端にあるメニューから色を選択します。

simplicity2-custom

色のカスタマイズページを下にスクロールしていくと「グローバルナビ色」という場所がありますので、そちらで「色」をクリックして変更することが出来ます。

simplicity2-custom

simplicity2-custom

パレットで自分の好きな色を選ぶことも可能ですが、サイトに統一感を出したい人はWebColor見本 で好きな色を選んで数字で指定するのが良いと思います。

simplicity2-custom

このサイトには「パステルカラー」や「ビビットカラー」など全てのWEBカラーが網羅されているので、きっとお気に入りの色が見つけられるはずです。

もし迷ってしまったら、「今日のラッキーカラー」という項目があるので、自分の星座から「ラッキーカラー」を選ぶ事も出来ます。

カスタマイズ2 その他の色設定

Simplicity2の「色」のカスタマイズ欄では他にも

  • 背景色
  • リンク色
  • リンクのホバー時の色
  • ヘッダーの外側背景色
  • ヘッダー内側背景色
  • サイトタイトル色
  • サイトのキャッチフレーズ色
  • モバイル時ヘッダー背景色
  • モバイル時タイトル色
  • モバイル時サイトキャッチフレーズ色・・中略
  • フッター色 まで

ほとんどの色をコチラで調整することが出来ます。

しかも、その都度プレビューしながらの作業なので、納得いくまでお気に入りの色を探せます。

ちなみに、僕は現在サイトのテーマカラーを「#5297e5」にしています。

カスタマイズ3 レイアウト

カスタマイズの中でも、見栄えが大きく変わるのが「サイトのレイアウト」です。

こちらもWPのダッシュボードメニューから「外観」⇒「カスタマイズ」を選択して変更することが出来ます。

ページが切り替わったら左端のメニューから「レイアウト(全体リスト)」をクリックします。下の方にスクロールしていくと「一覧リスト」というのがあるのでココで変更出来ます。

現在、僕はデフォルトにしていますが、最後までタイトル2列と迷いました。

比較するとこんな感じです。↓ ↓ ↓

デフォルト

タイトル2列

どっちが良いのかは好みだと思います。

僕の場合はアイキャッチ画像に横長の写真を使っているので2列の方が良いのかしれません。が・・・好みの問題です。なんか最近の流行りは2列ぽいですね。

カスタマイズ4 CSSによる変更

見た目は「色」と「レイアウト」の項目で、ほぼイジることが可能です。ココからはチョットした変化を加えるためにCSSを記述していきます。

一覧表示の「続きを読む」位置と文字ベースの変更

どこの事を言っているのか分からないと思いますので写真を御覧ください↓↓↓

通常の続きを読むは、右位置ではなく左にあります。コレも好き嫌いの判断になりますので元の位置でもよければ、イジる必要はありません。

もう1つのカスタムポイントは、通常『続きを読む」は黒文字で表記されているだけですが青色のベースをおいています。

コレを使用するには、別途プラグインの「Font Awesome4 Menu」が必要になりますのでインストールしておいて下さい。Font Awesomeのインストール方法はコチラ 

僕のように表記するためには、CSSに以下のように記述します。

グローバルナビの文字をセンタリング

通常は、グローバルナビの文字は文字のサイズに合わせて左合わせになっています。

グローバルナビの項目が沢山ある人は問題ないでしょが、僕の場合は4つしかないので不格好に思えました。そこで、1つの項目ごとの幅を指定して、その中でセンタリングをするようにしました。

このように表記するためにはCSSに以下のように記述します。

 

一覧ページの写真をホバー時に拡大グレイフィルター

Topページ記事のアイキャッチ画像にマウスを合わせた時に拡大させてグレイのフィルターを入れました。

写真だと分かりにくいかもしれませんが↓↓↓こんな感じです。

通常時

マウスホバー時

なんとなくお分かりいただけましたでしょうか?

僕がテンプレートを変更していなければ、アイキャッチ画像にマウスをホバーさせてみて下さい。写真で見るより違いが分かると思います。

このように表記するためにはCSSに以下のように記述します。

タグクラウドを整える

これも意味が分からないと思いますので写真を御覧ください。

通常時はタグの使用回数により文字が拡大されて表記されます。

もちろん多く使用している「タグ」がひと目で分かるので便利なんですが、増えると見栄えが悪いなぁっと思ったので変更しました。

ちなみに、コチラにも「Font Awesome4 Menu 」を使用しています。インストールしていないともっと変な表記になりますのでお気をつけください。

このように表記するためには以下のようにCSSに記述します。

見出しの変更

Simplicity2の元々の表記でも満足でしたが、少しメリハリを付けるために見出しの表記を変更しました。ちなみに↓↓のような感じになります。

そして、サイドバーの項目も変更しています。

このように表記するためには以下のようにCSSに記述します。

一覧表示の記事ごとに区切り線を追加

通常だと記事と記事の間は、空白のスペースだけが入った状態です。

今回は、記事と記事の間に点線で区切りを入れました。

コレも好き嫌いが別れると思いますが、僕はあったほうが好きです。

たぶんPCだとあまり分からないと思いますが・・・携帯だとわかります。

このように表記するためには以下のようにCSSに記述します。

まとめ

CSSを全部記述するとこんな感じになります。

みなさんも満足するまでSimplicity2をイジってみましょう。

ちなみに、今回のカスタマイズは主にノートブック さんを参考にさせていただきました。

チャッキー
本日も最後までお付き合い頂きましてありがとうございました

ブログランキングに参加してます。

にほんブログ村 ブログブログへ

クリックすると現在の順位が表示されます。

About The Author

チャッキーさん
ご訪問ありがとうございます。管理人のチャッキーと申します。
日本語を学ぶ為にブログを始めました。内容は主に旅と読書とWordPressという全く自分の知らない世界についてです。現在、南米をぷらぷら散歩中。時々、出稼ぎのため広島県にいます。

Comments & Trackbacks

  • Comments ( 1 )
  • Trackbacks ( 2 )
  1. はじめまして。「見出しの変更」と「一覧表示の記事ごとに区切り線を追加」に一目惚れし、コピペして直ぐに使わせて頂きました。もともとsimplicity2は見やすいデザインでした上、さらに見やすくなりました。ありがとうございました。

  1. […] Simplicity2が驚くほどカッコ良くなるカスタマイズ方法 ワードプレスのテンプレートを「リファインSNOW2」から「Simplicity2」に乗り換えて1ヶ月。記事も50くらいに増えてきたので見た目を […]

  2. […] >>Simplicity2が驚くほどカッコ良くなるカスタマイズ方法 […]

Leave A Reply

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

オススメ記事