コピペで簡単!Simplicityに追加したカスタマイズ11個の紹介

当ブログは2015年よりSimplicityを使っていますが、いくつかカスタマイズをしています。私はPHPやCSSに関するスキルは殆どありませんので、WordPressのカスタマイズブログや、Simplicityのカスタマイズブログ、公式フォーラムを参考(むしろコピペ)にさせて貰いながら、徐々にレイアウト変更をして来ました。

ほぼコピペ系になりますので大した内容ではありませんが、当ブログで修正を加えている部分のご紹介と、コピペで使えるコードを公開したいと思います。
※当ブログのカスタマイズは主にMASALOGさんの記事を参考にしています。

Simplicityに追加したカスタマイズ11個

Simplicityの標準機能(テーマのカスタマイザー)では設定出来ないようなスタイル変更で、おもにstyle.cssに+αしているカスタマイズについてご紹介します。

カスタマイズ前の注意点

テーマをインストール後に、何かしらの修正を行う場合、親テーマを直接修正していると、バージョンアップなどでテーマが更新された場合に、元の状態に戻ってしまうということが発生します。

それを防ぐために、親テーマの他に子テーマも同時にインストールして、設定変更やカスタマイズは子テーマに対して行っていくようにしましょう。

①グローバルナビのスタイル変更

グローバルナビとは、トップに表示されているカテゴリメニュー部分になりますが、この部分を少しだけスタイリッシュな感じになるように修正しました。

  1. WordPressの外観>カスタマイズ>ヘッダーを開き、『グローバルナビを横幅いっぱいにする』チェックを入れます。これで、グローバルナビが、ブラウザの端から端まで表示されるようになります。
  2. 両サイドの線を無くし上下のラインのみの表示にするために、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。
    色コードを変更すれば、赤や青など明るい色へ変更も可能です。
  3. 続いて、グルーバルナビでマウスオーバーした時の背景色や文字の色を変更したい場合、同様に、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

②パンくずリストのスタイル変更

パンくずリストとは、ブログの階層表示を視覚化したもので、今開いているページが、ブログ内のどの部分に位置しているのか(どの階層にいるのか)をユーザーに対して分かりやすく開示する事を目的としているものです。

ディレクトリ毎に背景色を付ける事で、フォルダ階層のように見えるように修正しました。

  1. パンくずリストに背景色を設定し、それぞれのディレクトリがフォルダ表示になるように、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

③記事本文の見出し(h2~h4)のスタイル変更

記事の見出しはブログの中でも非常に大事な部分です。文章があまり上手でない私が言えたものではありませんが、文章を読みやすく章立てする為や、検索エンジンにキーワードとして引っ掛けてもらう為のSEO対策として使われます。

その見出しですが、標準のままだと、グレーのラインがどうにも野暮ったい印章を受けてしまった為、黒色でシッカリと力強くも見やすい見出しになるように修正しました。

  1. 見出しの背景色や、破線のデザイン、ラインの色を変更する為に、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

④コメントと関連記事の見出し(h3.)のスタイルを変更

標準のままでは関連記事がずらっと表示された時に、記事タイトル部分がどこなのかハッキリしない感じだったので何とかしたいなぁ・・・ということで、タイトル部分に線を引く事にしました。

コメント欄と関連記事欄の両方をコードに書いていますが、当ブログはコメント欄を表示していないので実際のところ関連記事の見出しのスタイル変更のみになります。

  1. コメントと関連記事の見出し(h3.)を変更する為に、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

⑤サイドバーの見出し(h3.)のスタイル変更

サイドバーの見出し部分ですが、標準の状態では、今ひとつパッとしないというか、見出しが見出しっぽく見えないというか、①~③のカスタマイズをしたことにより違和感が出てきたため、サイドバーの見出しのスタイルも変更する事にしました。

  1. サイドバーの見出し(h3.)を変更する為に、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

⑥「記事を読む」リンク削除

記事一覧、関連記事のタイトルとサムネイルの後に表示されている「記事を読む」のリンクですが、記事が連続で並ぶと「くどい」というか、そこまで自己主張しなくても良いのでは無いかと思うようになってしまった為、「記事を読む」リンクは表示しないように修正しました

  1. 「記事を読む」のリンクを消す為に、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

⑦メタ情報のフォントサイズ変更

メタ情報は記事の作成日や更新日、カテゴリを表示するエリアになりますが、標準の状態ではフォントサイズが大きく、タイトルの視認性が悪く感じた為、フォントサイズを小さくする修正をしました。

  1. メタ情報のフォントサイズを変更する為に、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

⑧記事一覧のメタ情報を右寄せ

標準のままでは記事一覧のメタ情報が左寄せになっているのですが、アイキャッチ画像と近いせいか、ごちゃごちゃした印章を受けたため、記事一覧のメタ情報を右寄せに修正しました。

  1. 記事一覧のメタ情報を右寄せする為に、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

⑨記事一覧のタイトルサイズ変更

記事一覧に表示される記事のタイトルのフォントサイズを少しだけ小さくなるように修正しています。

  1. 記事一覧のタイトルサイズを変更する為に、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

⑩メインとサイドバーの枠線削除

標準の状態では、記事部分とサイドバーと両方ともそれぞれ枠で囲われているデザインになっているのですが、ここだけ枠で囲われていると、高解像度のディスプレイなどで開いた時に、枠の横の空きスペースが気になってしまいましたので、枠を消す事にしました。

  1. メインとサイドバーの枠線を消す為に、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

⑪記事一覧の記事間に線を引く

標準の状態では記事一覧の記事と記事の間に何も無いのですが、記事一覧の間に線を引いたほうが、記事ごとの区切りがハッキリして見やすいと感じたため、修正しました。

線が引かれた分、記事と記事の間が少し広がって窮屈な感じがしなくなりました。

  1. 記事と記事の間に線を引く為に、子テーマ「simplicity-child2」のstyle.cssに下記の情報を追記します。

まとめ

WordPressのテーマはStyle.cssに追記をするだけで、ある程度デザインを修正する事が出来ます。Simplicityは元のデザインがシンプルな構成になっているので、ある程度の範囲で自分好みのデザインに変更が出来るテーマになっています。

初めてのWordPressテーマならSimplicityがオススメ

2017.12.04

だからと言って、沢山のカスタマイズを入れると、逆にごちゃごちゃしてSimplicityのシンプルさが失われてしまったり、見た目の統一感も失われてしまいます。style.cssの修正はPHPの修正と違ってサイトが表示されなくなるというような事態になることはまず無いので、少しずつ全体のバランスを見ながらカスタマイズすると良いかと思います。

当ブログは、冒頭に書いています通り、MASALOGさんの記事を参考に徐々にカスタマイズをして行きました。MASALOGさんの記事には当ブログで取り入れていないカスタマイズも紹介されていますので、是非参考にされては如何でしょうか。

今回も最後までお読みいただき有難うございました。

もし宜しければ、Twitterのフォロー/facebookページのいいねを宜しくお願い致します。

ABOUTこの記事をかいた人

当ブログでは、私自身が困って調べたこと、試した事を中心に記事を書いています。何か少しでもお役に立てれば幸いです。 最近では、企業様からのレビュー記事のご依頼を頂くことも出てきました。 お気軽にお問合わせよりご連絡下さい。