テーマをSimplicityに変更後、最初に行ったCSSカスタマイズ

WordPressテーマ Simplicity WordPress

このブログのテーマをSimplicityに変更。無料で使える高速な日本語のテーマだと聞き、前々から気になっていたテーマ。

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。
スポンサーリンク

個人的に気に入っているSimplicityの特長

表示スピードが早い

ブログの表示の遅さは、読者にストレスを与えてしまいます。このブログも高速化を図るためSimplicityを導入しました。

カスタマイズが直感的

外観メニューのカスタマイザーで設定が全てできるのも魅力のひとつ。項目を変更するごとにリアルタイムで画面に反映されるので、カスタマイザーだけで設定できるのは便利です。

カスタマイザー設定 | Simplicity
Wordpress管理画面からできるカスタマイズWordpress管理画面から「外観→カスタマイズ」で行える設定に関する情報です。
Simplicity カスタマイザー

Simplicityのカスタマイザー画面。色やスキンなどのデザイン要素や、SEO、SNS、広告などの各種設定を行うことができる。

レスポンシブデザインに対応

スマートフォン利用者が増えたのでこれからの時代は必須の機能でしょう。このサイトも、アクセス解析を見るとスマートフォンからの閲覧が増加傾向にあります。

Simplicityはレスポンシブデザイン対応なので、スマートフォンでも崩れずにサイトを表示してくれます。

シンプルで飽きが来ないデザイン

これは好みの問題ですが。

Simplicityは、その名の通りシンプルなデザイン。個人的に、ゴテゴテ装飾の多いデザインや派手なデザインは好みではないので。

ちょっとデザインが窮屈な感じ?

Simplicityを導入後ブログを表示させてみて、「ちょっと窮屈かな?」と感じました。記事がメインカラムの枠いっぱいに表示されてしまってちょっと余裕がないな、というのが私の最初の印象。

メインカラムのCSSを編集して窮屈さを解消

CSSをいろいろといじって表示を変えてみました。

カスタマイザーでは、背景や文字の色などの変更はリアルタイムで確認できますが、CSSそのものを変更する場合はその都度ページ更新をする必要があります。

そこで、私はChromeのStylebotという拡張機能を使っています。

Stylebot – Chrome ウェブストア

表示されたページのCSSを変更するとリアルタイムで確認ができます。

いろいろと設定を変えて確認した結果、メインカラムの枠を取ると窮屈さが解消される模様。

まずはメインカラムのCSSだけ変更してみる

取り急ぎ、このコードを追加。

//メインカラムのボーダーを削除&Paddingをゼロに
#main {
    border-style: none;
    padding: 0;
}

※テーマのアップデートにも対応できるように子テーマを作ってCSSを編集。Simplicityの子テーマについてはこの記事を参照のこと。

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

そして、背景色を白(#fff)に。これで空間が広がったような印象になりました。

ビフォーアフター。僅かな違いですが。

Simplicity ビフォー

CSS変更前。記事の周りの枠がちょっと窮屈な感じ。

Simplicity アフター

CSS編集後。枠が取れて窮屈さがなくなった。

デザインの設定はハマらない程度に最小限で

デザインのカスタマイズはやりだすと止まらなくなることが多いです。文字の色やサイズを変えたい、メニューに装飾を付けたい、カラムのサイズを変えたい…などなど、沼にはまるとキリがありません。

デザインのカスタマイズにハマってしまうと、肝心の記事作成が疎かになっていまうという苦い経験が…

ということで、取り急ぎメインカラム枠と余白だけを変更してみました。細かい設定はまたじっくりと。

Simplicityのダウンロードは公式サイトから

Simplicity2のダウンロード
無料WordpressテーマSimplicity2のダウンロードはこちらです。インストール方法はこちら。テーマのアップデート方法は、以下を参照してください。Simplicity2のダウンロードWordPress4.1以上、PHP5.4以上で

カスタマイザーからいろいろ設定していますが、使えば使うほど素晴らしいテーマだと思います。

世界一わかりやすいWordPress 導入とサイト制作の教科書