こんにちは、ユキガオ（@yukigao_22）です。
2017年3月11日、はてなブログのテーマストアに追加された新テーマがこちら。
ZENO-TEAL
WordPressの人気テーマ「ストーク」に似ているということで話題になりました。
はてなブログにストークみたいなテーマが新しく出てる！
— やぎぺー🐐ブロガー (@yagijimpei) 2017年3月11日
確かに、シンプルで見やすいデザイン。
使ってみたくなりますよね。
でも今のブログ、だいぶカスタマイズしてるしなぁ…
そう、はてなブログでデザインテーマを変えてしまうとCSSが消えてしまって、これまでカスタマイズしてきた雰囲気が壊れちゃうんですよね。
だけど、前々からデザインを変えたいな〜と思っていた私は、思い切ってテーマデザインを変更してみることに。
目次
テーマの変更手順
テーマの変更の仕方は、すでにネット上に転がっています。
なので、ここではちょっとだけ説明しておきますね。
テーマ変更前はCSSのバックアップを
まず、テーマを変更する前にCSSのバックアップをとりましょう。
ここのコードを、メモなどにコピペ。
ちなみに他のところ（サイドバーやヘッダなど）はテーマを変えてもそのまま現状維持されていました。
心配な場合は、すべての欄をコピペしてバックアップしておくといいでしょう。（私はやりました）
テーマをインストールする
バックアップをとったら、テーマストアへアクセスしてインストールしましょう。
適用するブログを選んだら、「CSSとか消えるけど大丈夫！？」って注意書きが出ます。
バックアップとってるのでOKを押してインストールします。
テーマ変更後のカスタマイズ方法
グローバルメニューや各種ボタンのカスタマイズなどは、すでにいろんな記事がありますのでそちらを参考にしてください。
この辺りがオススメ。
今回は、CSSやHTMLを勉強したことのない私にもできるくらい簡単なカスタマイズのみ行います。
それが色の変更です。
なぜ色を変える必要があるの？
ZENO-TEALは、デフォルトで緑のテーマカラーが設定されています。
基本的に、こちらのデモサイト通りです。（※個別にカスタマイズしている部分を除いて）
緑色が好きならこのままでいいんですが…
- 緑色は好みじゃない！
- 他の人と同じ色はイヤ！
という方もいるでしょう。
私はまさにそう。もともとピンクがテーマカラーだったので、緑のままはイヤでした。
さらに、同じテーマを使っている人のブログを覗くと、みんな緑…
自分のブログなのに、人と同じに見えちゃう！！
ということで、色を変えてみました。
全体的にピンクになり、雰囲気が変わりました。
初期デザインと比べてみると…
トップページの見やすさはそのままに、オリジナリティを出すことができました。
ブログデザインって、色が変わるだけで全然違って見えるんですよね。
（注）ヘッダー画像やグローバルメニューは別途カスタマイズが必要です
ということで、具体的に色を変える手順を説明していきます！
色を変更する手順
※CSSの知識があればもっと簡単にできると思います！！
まずは、色を変えたい部分をマウスで囲って右クリックします。
「検証」をクリックすると、このようにコードが出てきます。
その中で、この部分を選択。
このコードをコピーしたら、ブログのダッシュボードへ。
「デザイン」をクリックして
カスタマイズを選択。
デザインCSSの部分に先ほどのコードを貼り付けます。
※この時、必要なコードはバックアップから復元させておいてくださいね。
↑この赤枠で囲った部分が、さっきコピーしてきたコードです。
背景色を変えたい場合は、「background」と書かれた部分の色コードを変更すればOK。
ちなみに、これはすでにピンクに変えたものから、青系の色に変えようとしています。
これで変更を保存。すると…
青色に変わりました。
このような手順で、変えたい部分のコードを探しながら色を変えていきます。
トップページだけでなく、記事ページも個別に行いましょう。
ちなみに色コードは、こちらのサイトを参考にしています。
新テーマはカスタマイズ記事が少ない
ZENO-TEALはとっても綺麗なデザインなんですが、まだ配布開始したばかりなのでカスタマイズについて書かれた記事があまりありません。
なので、ZENO-TEALに限ったカスタマイズ法じゃないけど、「少しでも変えたい！」と思う人のために書いてみました。
もう少しすれば、カスタマイズ記事もどんどん出てくるはず。
それを待ってからインストールしてもいいかもしれません。
だけど、「今すぐこのデザインにしたい！」と思っている方はぜひ参考にしてみてください。
ちなみに私はかなりの箇所を変更しています。（PC版のみ。スマホ版は変わってません）
PCで見て、「ここどうやって変えたの？」という部分があればコメントください！個別にコードをお伝えします。
※私ははてなPro登録してるので、Proじゃない場合はこの通りにならない部分もあるとは思いますが…
ユキガオ
