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

By: Serge Kij

どーん(^o^)/

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

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

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

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

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

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

Photo by Serge Kij

スポンサーリンク

Simplicity子テーマの導入

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

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

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

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

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

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

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

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

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

スポンサーリンク

見出しタグを装飾

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

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

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

<h2>タグ

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

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

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

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

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

<h3>タグ

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

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

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

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

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

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

<h4>タグ

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

<h5>タグ

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

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

サイドバー見出しを装飾

sidebar-customize

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

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

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

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

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

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

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

main-customize

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

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

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

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

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

続きを読むを装飾

tuduki-customize

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

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

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

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

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

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

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

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

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

ヘッダー画像を表示

header-customize

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

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

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

Simplicityはデフォルト状態でヘッダー画像はありませんが、Wordpress管理画面からヘッダー画像を挿入することができます。まずは画像もしくは写真を用意してください。画像がない場合は、この記事に商用OK・ライセンス表記不要の写真サ
Simplicity1.4から、テーマカスタマイザーだけで、以下のような画面幅いっぱいのヘッダー画像を設定できるようになりました。 このヘッダー画像をブラウザ幅いっぱいにするカスタマイズ方法は、フォーラムなどにも結構問い合わせがあったの

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

menu-customize

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

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

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

Font Awesome 4 Menusプラグインを使用してグローバルナビの個々のメニューアイテムにアイコンフォントを設定する手順です。

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

目次の導入

mokuji-customize

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

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

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

Table of Contents Plusは、記事の目次をWikipedia風に自動生成するプラグインです。 投稿や固定ページ内のH1からH6までの見出しタグをもとに指定したタグへのアンカーリンクを目次として自動生成します。

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

Table of Contents Plus というWordPressのプラグインが超絶便利です。なんと実装後、平均ページ滞在時間が2倍以上になったページまで。とくにスマホで顕著です。スマホで縦に長いページで、冒頭の目次は安心感でますよね。

記事の所要時間を表示

time-customize

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

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

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

WordPress運営においてプラグインは欠かせない機能なのですが、今回は「Insert Estimated Reading Time」というプラグインの設定方法を解説していきたいと思います。

さいごに

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

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

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

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

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

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

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

スポンサーリンク
友だち追加数
follow us in feedly
スポンサーリンク