Simplicity2 をカスタマイズしてかっこいいサイトを作る方法!

こんにちは、やひろです。

唐突ですが、このサイトのデザインを、テーマごと全部変えてみました。 タイトルから分かる通り、「Simplicity2」です。

🍥Simplicity https://wp-simplicity.com/

Wordpressでブログを書いてる人なら誰でも知ってるであろう、超有名無料テーマの1つです。SEO対策もきっちり施されていて、大人気なんですが…

1つ欠点がありました。

デザインがダサい!

申し訳ないですが、これに尽きます。

(作者様!Disってるわけじゃないですよ!) テーマは機能性だけではなくて、デザイン性も求められるべきだと、自分は考えています。なので、今回、時間ができたのでささっとデザインしてやれるとこだけSimplicityっぽさをなくそうと思い立ったわけです。

前までどんなテーマを使ってたのか

実は、前のテーマはだいぶお気に入りだったんです。

designtips - 前のサイト Baskerville 作成者: Anders Norén

こんな感じのシンプルな今時のテーマだったわけです。 ですが、このテーマで記事をつくると、海外向けだからか、Googleなどの検索エンジンにクロールが全然されません…原因不明の事態だったんです。

自分、正直あまりSEOについてプロ並みの知識はありません。そこでテーマを移動しようと決めました。

Simplicity2 を劇的にかっこよく!

ということで、実際1からやっていくと、とてつもない時間がかかります。(サイトづくりってめちゃ大変なんですよ…)

なので今回は、とても感謝しながら既にカスタマイズをブログにて紹介されている方のコードをお借りして、CSSのみの編集を試してみました。

designtips - masalog 🍥WordPressテーマ「Simplicity」をカスタマイズする19のポイント【2016.04.14更新】 http://www.masalog.me/simplicity-customize-point/

このサイトでは、Simplicity2のカスタマイズコードや方法について端的に書かれていたので、このサイトのコードを拝借させていただきました。 まさろぐさん。本当にありがとうございました!

そうすると…

Before

designtips - simplicity

(イメージ)

After

designtips - カスタムしたサイト

なんということでしょう!

ここまでシックなサイトに生まれ変わったではありませんか!

はい、マジです。 少しSimplicityが残っている部分もありましたが、完全に消し去りたいわけでもないので、プロの方から見ればダッサイサイトかもしれませんが、僕の中では、結構いい感じやなーという感じです。

モバイルでも見てみよう。

designtips - simplicity適応前 designtips - カスタムしたサイト モバイル適応後

いい、すごいいい。

なんか、自分でカスタマイズ加えたから、とても愛着がわきました。

このブログ育てたいなぁ。

Simplicityはカスタマイズしよう!

まとめです。

今回、1~2時間ほどの作業()で終えることができました。 実際やってみると結構かんたんです。(途中でまっさらな状態にしなければ、もっと早く終わってました。)

是非、カスタマイズを検討されてる方は試してみてくださいね!

正直有料テーマを買うのも1つの手

自分でカスタマイズするのが面倒!って方は、最初からデザインかっこいいテーマを買うのも手だと思います。僕が購入を考えてたのは、こちら。

designtips - stork STORK 作者:オープンケージ

いろんな有名ブロガーが使われている、「STORK」というテーマ。 SEO対策もキッチリされていて、カスタマイズ性もデザイン性も評判の有名有料テーマです。

手っ取り早くやっちゃいたい方や、事業としてブログを始める方はこれぐらい投資してもいいかなぁと思います。

実際、僕も考えてたんですが、もうちょっと収益を上げてからでいいかなと思ってこんな感じです。