少しのレイアウト変更で雰囲気が変わる！Simplicityでカスタマイズした9のこと

どーん(^o^)/

当サイトはWordPressを利用して運用しており、テーマは「Simplicity」を使用しています。

そこで、Simplicityを使用している中で、当サイトがSimplicityをカスタマイズした内容を記載していきます。

Simplicityのいいところである「シンプル」を崩さないよう、大きくはカスタマイズはせずに、それでも個性がでるようにを心がけました。

以下のサイト様を特に参考にさせていだだきました。ありがとうございます。

参考 初心者でもできた！「Simplicity」でカスタマイズしたこと6つ！ – たもトピ

参考 少しの労力でサイトをかっこよく！見出しのCSSデザインに役立つジェネレーター＆サンプル集30個まとめ – 寝ログ

Photo by Serge Kij

Simplicity子テーマの導入

WordPressには、既存のテーマの一部を継承して新しいテーマを作成できる「子テーマ」という機能があります。

あるテーマをベースにしてデザインやレイアウトをカスタマイズしたい場合、テーマのソースコードを直接編集することもできますが、この方法ではテーマをアップデートした時に、ソースコードが全て上書きされ、編集した内容が消えてしまいます。

このような場合に、「子テーマ」機能を使います。

子テーマを使うことで、親テーマの機能を引き継ぎつつ、カスタマイズをすることができます。

Simplicityにも子テーマが用意されており、以下のサイトからダウンロードできます。

Simplicityの子テーマ

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。 というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。 それ

wp-simplicity.com

上記サイトに子テーマのインストール方法も記載されていますので、インストール方法はこちらでご確認ください。

子テーマを導入後、レイアウトを変更する場合は、子テーマに入っているスタイルシート「style.css」にCSSコードを記述していきます。

ちなみに、Simplicityは頻繁にアップデートされるので、Simplicityを直接カスタマイズすると後々大変になってきますので、子テーマでカスタマイズすることをオススメします。

見出しタグを装飾

記事の大切な部分でもある見出し部分のレイアウトを変更しました。

見出しタグの違いで記事を読む際のイメージや読みやすさに違いができてきます。

以下のCSSコードを子テーマのstyle.cssにコピペすれば機能するかと思います。

<h2>タグ

<h2>は、「Simplicity」の管理人わいひら様が運営している「寝ログ」で使われている見出しのレイアウトを使わさせていただきました。

見出しがはっきりと分かるので気に入っています。

.article h2{
background-color: #43779D;
color: #fff;
border-left: 0;
padding: 15px 30px;
}

背景色は青系にしていますが、「background-color:」で変更すると色が変わります。

文字色は「color:」で、背景色部分の大きさは「padding:」で変更できます。

また「border-left: 0;」では、見出し左にある線をなくしています。

<h3>タグ

<h3>は、見出しの前にWeb（アイコン）フォントをつけました。

Webフォントは「Font Awesome Icons」を利用しています。

Simplicityでは、何もしなくとも「Font Awesome Icons」を利用することができるように予め設定されているので、簡単に導入できます。

.article h3: before {
margin-right: 5px;
font-family: "FontAwesome";
content: "\f046";
}

当サイトでは、チェックマークを使用しておりますが「Font Awesome Icons 一覧」を参考に「content:」の値を変更すると違うアイコンにできます。

「margin-right:」の値を変更することで、Webフォントと見出しの文字との距離を調整できます。

「font-family: “FontAwesome”;」では、Font Awesome Iconsのフォントを使うように設定しています。

<h4>タグ

<h3>タグと同じように、見出しの前にWebフォントをつけました。

.article h4: before {
margin-right: 5px;
font-family: "FontAwesome";
content: "\f101";
}

<h5>タグ

デフォルトの状態では<h5>タグと<h6>タグは同じなので、違いを出すためにも<h5>に2pxのグレーの下線をひきました。

.article h5 {
border-bottom: 2px dashed #eee;
}

「border-bottom:」の2pxで太さを、dashedで線の種類を、#eeeで色を変更できます。

サイドバー見出しを装飾

サイドバーの見出し部分にアンダーバーが出るようにレイアウトしました。

#sidebar h4 {
font-size: 20px;
border-bottom: 5px solid #f7f7f7;
padding: 10px 0;
}

これだけでも雰囲気が変わります。

当サイトはグレーにしていますが、他の色にすると更に違ってくると思います。

「font-size:」を変えることで、見出しの文字の大きさを調整できます。

「border-bottom:」は上記の説明と同じです。

「padding:」の値を変更することで、文字の周りの隙間の大きさを調整できます。

記事と記事の間に線を引く

トップページやアーカイブページなどの記事と記事の間にグレーの点線を引きました。

#main .entry {
border-bottom: 1px dotted #ccc;
padding-bottom: 15px;
}

これで記事と記事がはっきりと区別でき見やすくなると思います。

「border-bottom:」で、線の太さなどを変更できます。

「padding-bottom:」の値を変えることで、記事下の隙間の大きさを変更できます。

関連記事の記事間にも線を引きたい場合は以下のように記述してください。

#main .related-entry {
border-bottom: 1px dotted #ccc;
padding-bottom: 15px;
}

続きを読むを装飾

トップページやアーカイブページなどにある「続きを読む」も変更しました。

「background-color:」で背景色をつけようか迷ったのですが、ここはシンプルにWebフォントを頭に付けるだけにしました。

.entry-read a {
text-decoration: none;
}
.entry-read a:before {
margin-right: 5px;
font-family: "FontAwesome";
content: "\f0a9";
}

「text-decoration: none」でアンダーバーを消しています。

続きを読むの他のカスタマイズ方法は以下のサイトを参考にしてみてください。背景色の付け方、続きを読むや本文抜粋の削除方法なども記載されています。

初心者でもできた！「Simplicity」でカスタマイズしたこと6つ！

WordPress初心者の僕がテーマ「Simplicity」を使っている理由という記事でも書きましたが、「Simplicity」は管理画面から変更できる項目が多くWordPress初心者でも簡単にブログを始めることができます。けど管理画面で

tamotopi.com

文中の背景色付き文字を装飾

参考 のように、色付きで文字を囲むレイアウトがCSSで用意されているのですが、背景色をオレンジ色に変えました。

.sankou {
background-color: #fd7c22;
margin-right: 5px;
padding: 1px;
}

上下左右が文字位ピッタリとついていたので、「padding: 1px;」で隙間を入れています。

「padding: 5px;」で右の文字との間隔を5pxの隙間を入れています。

ヘッダー画像を表示

横いっぱいに広がるヘッダー画像を導入しています。

ヘッダー画像はサイトに訪れた方に、サイトの印象を与える大切な部分です。ヘッダー画像があるかないかで、全然印象が変わってきます。

ヘッダー画像の導入方法は以下を参考にしてください。簡単に導入することができます。

Simplicityにヘッダー画像を追加・変更をする方法

Simplicityはデフォルト状態でヘッダー画像はありませんが、Wordpress管理画面からヘッダー画像を挿入することができます。まずは画像もしくは写真を用意してください。画像がない場合は、この記事に商用OK・ライセンス表記不要の写真サ

wp-simplicity.com

Simplicityに画面幅いっぱいのヘッダー画像を設定する方法

Simplicity1.4から、テーマカスタマイザーだけで、以下のような画面幅いっぱいのヘッダー画像を設定できるようになりました。 このヘッダー画像をブラウザ幅いっぱいにするカスタマイズ方法は、フォーラムなどにも結構問い合わせがあったの

wp-simplicity.com

ナビゲーションメニューにFont Awesome IconsのWebフォントを表示

ナビゲーションメニューに「Font Awesome Icons」のWebフォントを表示しました。

「Font Awesome 4 Menus」というプラグインを使用しました。

導入方法や使い方などは以下のサイトを参考にしてください。

WordPressのグローバルナビメニューにFont Awesomeのアイコンフォントを表示させる方法

最近、WordpressのテーマでFont Awesomeを使用しているものも多いです。 このサイトでもFon…

nelog.jp

メニューにアイコンがあると雰囲気が変わっていい感じになるのでオススメです。

目次の導入

記事の構成が分かるように最初の<h2>タグの前に、目次を導入しています。

「Table of Contents Plus」というプラグインを使用しました。

導入方法や使い方などは以下のサイトを参考にしてください。

The summary of the manga series My Hero Academia is as follows : Mangamefi

The summary of the manga series My Hero Academia is as follows: A fact that Midoriya Izuku must face because he is bullied by his classmates, each of whom has a...

www.wordpresscollege.org

目次を導入しているとSEO的にも良いと言われています。

平均ページ滞在時間を218%増やしたWordPressプラグインTable of Contents Plus

やっぱりしっかり読んで欲しいですよね。 平均ページ滞在時間が2倍以上に ひさしぶりにここまで劇的に改善する施策を見つけました。 結論をいいますと、目次をつけたことで、各ページの平均滞在時間がスマホで2...

www.kagua.biz

記事の所要時間を表示

記事の冒頭に、この記事を読み終わるのにどれだけ要するのかの所要時間を表示しています。

「Insert Estimated Reading Time」というプラグインを使用しました。

導入方法や使い方などは以下のサイトを参考にしてください。

Insert Estimated Reading Time【記事を読むための必要な時間】設定方法を解説

WordPress運営においてプラグインは欠かせない機能なのですが、今回は「Insert Estimated …

seonet.x0.com

さいごに

SimplicityはWordPress初心者にも優しい本当に素晴らしいテーマだと思います。

これから導入を考えている方や導入したばかりの方に参考になればと書かさせていただきました。

そんな方のなんらかの参考になれば幸いです。

とりあえずは、上記で記載したレイアウトで運営していく予定です。

今回参考にさせていただいたサイト様にはありがとうございました。

また何かレイアウト変更した場合は追記いたします。

以下はWordPressを勉強するのにオススメな参考書です。上から下にかけてステップアップしていくといいと思います。

WordPressレッスンブック HTML5&CSS準拠

エビスコム

【WordPress全くの初心者ならこれ】

WordPress 標準デザイン講座【Version 4.x対応】

野村 圭, 石原 隆志

【WordPressの少しの知識があればこれ】

WordPress ステップアップブック (STEP UP BOOK)

エビスコム

【WordPressを更に磨きたいならこれ】

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版

プライム・ストラテジー株式会社

【WordPressでビジネスサイトを構築したいのならこれ】