コピペで簡単!Simplicityのカスタマイズまとめ。

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

5FUTM43P3TNOXRz1452006345_1452006370

このサイトはWordpressを使っています。テンプレートはSimplicityです。これまでStinger5やPrincipleなど様々なテーマを使ってきたのですが、Simplicityがダントツで使いやすいですね。内部SEO対策済みですし、アフィリエイトにもオススメです。

今回は私が行ったカスタマイズをまとめてみます。Simplicityを使っている方は参考にしてください。

Simplicityのカスタマイズ

これから紹介するものは全てstyle.cssに追加するだけでOKです。ではさっそくスタート~!

グローバルメニューのカスタマイズ

まずはグローバルメニューです。こんな感じの仕上がりになります。

グローバルメニュー
CSSに追加するのはこれです。

こちらのサイトを参考にしました。
色は外観⇒カスタマイズ⇒色 から変更してくださいね。

サイドバーをカスタマイズ

Simplicityのサイドバーはちょっと寂しいですよね。なのでここもカスタマイズしちゃいましょう。完成するとこうなります。

サイドバー

文字を中央寄せしたい場合はこちらを追加します。

#●●●●●の部分を変えれば色が変更できます。

サイドバーのデザインはこちらで紹介しています。他にも見比べたい方は参考にしてください。

コピペでOK!Simplicityのサイドバーをカスタマイズしよう
こんにちは、machiです。今回はSimplicityのサイドバーをカスタマイズしていきます。基...

フッターをカスタマイズ

フッター部分の上部に色のついた線をつけてみます。

フッター

フッターのタイトルの色を変える

フッターにウェジェットを追加することができますが、タイトルの色がテキスト部分の文字色と同じなので変えてみます。下の画像の「中のひと」の部分の色ですね。

フッタータイトル

CSSにこれを追加します。色はお好みで。

続きを読むをカスタマイズ

「続きを読む」をボタン風にカスタマイズしてみます。

ぱんくずリストのカスタマイズ

ぱんくずリストはこんな感じにしましょう。

パンくずリスト

こちらのサイトを参考にしました。背景の色を若干変えています。

記事一覧を2列のカード型にする

記事一覧の表示を2列のカード型にしています。外観⇒カスタマイズ⇒レイアウト(全体・リスト)で、「 タイル2列 画像縦横比保存(要再生成)」を選びます。するとこんな感じになります。

カード型

Simplicityの初期設定では、メイン部分に枠があります。タイル2列にすると窮屈な感じがするので、外枠を消しちゃいます。このコードをCSSに追加してください。

トップページの枠だけを消して、記事ページの枠を残しておきたい場合はこちら。

記事一覧を一列のカード型にする

カード

上の画像のように、一列のままカード型にしたいならば、こちらを参考にしてください。

Simplicityの記事一覧をカード型にカスタマイズする(2016/1/30一部修正)
こんにちは、machiです。今回は、Simplicityのトップページをカード型にしてみます...

画像をマウスオーバー時に半透明にする

リンクつきの画像や広告の上にマウスを置いた時に白くなるようにします。色が変わるとクリックできると判断できるので、クリック率があがります。仕上がりはこんな感じです。実際にマウスを乗せてみてください。

atGO2UQPJb8y8361452003219_1452003238

このコードをCSSに追加します。

数字を変えれば透明度が変更できます。

見出しのカスタマイズ

次に見出し部分をカスタマイズします。仕上がりはこんな感じ。

見出し

CSSにこれを追加してね。色はお好みでどうぞ。

見出しのカスタマイズはこちらで詳しく解説しています。他のパターンも見たい方は参考にしてください。

Simplicityの見出しをカスタマイズしよう。コピペでできる5つのデザインを紹介
SimplicityはWordpress初心者でも簡単にカスタマイズできますし、SEO対策も...

引用部分のカスタマイズ

最後に引用部分のカスタマイズをします。仕上がりはこんな感じです。

引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用

追加するのはこれです。色はお好みでどうぞ~

関連記事に線を引く

Simplicityは記事下に自動で関連記事が表示されますが、区切り線がないのでちょっと見にくいですね。なので、ドットの線を引いて見やすくしてみました。

関連記事

#main .entryの部分はトップページ一覧です。もしも タイル2列にしている場合は省略してもOK。

ウェジェットのタイトルを中央寄せする

ダブルレクタングル広告ウィジェットのタイトルを中央寄せにします。広告を2つ並べる場合は、「スポンサーリンク」の文字は中央寄せの方が綺麗です。仕上がりはこんな感じです。

ウェジェット中央寄せ

CSSにこれを追加します。

Simplicityのカスタマイズはバックアップしてからね!

いろいろ紹介してきましたが、実際にカスタマイズする場合は必ずバックアップをとってください。

スタイルシートをコピーしてメモ帳に保存しておくだけでOKです。HTMLエディタで保存したい方は、こちらのフリーソフトをダウンロードしてみてね。

Crescent Eve

無料でオシャレなヘッダー画像を作成しよう。商用可能なロゴ画像と文字入れソフト
ヘッダー画像やタイトルロゴはサイトの顔です。無料でおしゃれなヘッダーにしたいですよね...
  • このエントリーをはてなブックマークに追加
date-entry
トップへ戻る