スキ、はじめました。

好きなことして生きていこう!と思い脱サラして陶芸始めました。陶器/写真/文章を書くこと/読書が好き。詳しいプロフィールはこちら→http://www.yukigao.com/entry/2016/09/13/112235

[SPONSORED LINK]

MENU

はてなブログ新テーマ「ZENO-TEAL」で色を変えてカスタマイズする方法

f:id:yukigao:20170317221702j:plain

こんにちは、ユキガオ(@yukigao_22)です。

2017年3月11日、はてなブログのテーマストアに追加された新テーマがこちら。

ZENO-TEAL

f:id:yukigao:20170317212300p:plain

ZENO-TEAL - テーマ ストア

WordPressの人気テーマ「ストーク」に似ているということで話題になりました。

確かに、シンプルで見やすいデザイン。

使ってみたくなりますよね。 

 

でも今のブログ、だいぶカスタマイズしてるしなぁ…

 

 

そう、はてなブログでデザインテーマを変えてしまうとCSSが消えてしまって、これまでカスタマイズしてきた雰囲気が壊れちゃうんですよね。

だけど、前々からデザインを変えたいな〜と思っていた私は、思い切ってテーマデザインを変更してみることに。

 

 

テーマの変更手順

テーマの変更の仕方は、すでにネット上に転がっています。

なので、ここではちょっとだけ説明しておきますね。

 

テーマ変更前はCSSのバックアップを

まず、テーマを変更する前にCSSのバックアップをとりましょう。

f:id:yukigao:20170317213024p:plain

ここのコードを、メモなどにコピペ。

ちなみに他のところ(サイドバーやヘッダなど)はテーマを変えてもそのまま現状維持されていました。

心配な場合は、すべての欄をコピペしてバックアップしておくといいでしょう。(私はやりました)

 

テーマをインストールする

バックアップをとったら、テーマストアへアクセスしてインストールしましょう。

f:id:yukigao:20170317213747p:plain

適用するブログを選んだら、「CSSとか消えるけど大丈夫!?」って注意書きが出ます。

バックアップとってるのでOKを押してインストールします。

 

テーマ変更後のカスタマイズ方法

グローバルメニューや各種ボタンのカスタマイズなどは、すでにいろんな記事がありますのでそちらを参考にしてください。

この辺りがオススメ。

www.yukihy.com

georges.hatenablog.jp

今回は、CSSやHTMLを勉強したことのない私にもできるくらい簡単なカスタマイズのみ行います。

それが色の変更です。

 

なぜ色を変える必要があるの?

ZENO-TEALは、デフォルトで緑のテーマカラーが設定されています。

基本的に、こちらのデモサイト通りです。(※個別にカスタマイズしている部分を除いて)

zeno-teal.hatenablog.com

緑色が好きならこのままでいいんですが…

  • 緑色は好みじゃない!
  • 他の人と同じ色はイヤ!

という方もいるでしょう。

私はまさにそう。もともとピンクがテーマカラーだったので、緑のままはイヤでした。

さらに、同じテーマを使っている人のブログを覗くと、みんな緑…

 

自分のブログなのに、人と同じに見えちゃう!!

 

 

ということで、色を変えてみました。

f:id:yukigao:20170318090823p:plain

全体的にピンクになり、雰囲気が変わりました。

初期デザインと比べてみると…

f:id:yukigao:20170318091522p:plain

トップページの見やすさはそのままに、オリジナリティを出すことができました。

ブログデザインって、色が変わるだけで全然違って見えるんですよね。

(注)ヘッダー画像やグローバルメニューは別途カスタマイズが必要です

ということで、具体的に色を変える手順を説明していきます!

 

色を変更する手順

※CSSの知識があればもっと簡単にできると思います!!

まずは、色を変えたい部分をマウスで囲って右クリックします。

f:id:yukigao:20170317215028p:plain

「検証」をクリックすると、このようにコードが出てきます。

f:id:yukigao:20170317215121p:plain

その中で、この部分を選択。

f:id:yukigao:20170317215204p:plain

このコードをコピーしたら、ブログのダッシュボードへ。

f:id:yukigao:20170317215258p:plain

「デザイン」をクリックして

f:id:yukigao:20170317215357p:plain

カスタマイズを選択。

f:id:yukigao:20170317215421p:plain

デザインCSSの部分に先ほどのコードを貼り付けます。

※この時、必要なコードはバックアップから復元させておいてくださいね。

f:id:yukigao:20170317215536p:plain

↑この赤枠で囲った部分が、さっきコピーしてきたコードです。

背景色を変えたい場合は、「background」と書かれた部分の色コードを変更すればOK。

f:id:yukigao:20170317215614p:plain

ちなみに、これはすでにピンクに変えたものから、青系の色に変えようとしています。

これで変更を保存。すると…

f:id:yukigao:20170317215916p:plain

青色に変わりました。

このような手順で、変えたい部分のコードを探しながら色を変えていきます。

トップページだけでなく、記事ページも個別に行いましょう。

ちなみに色コードは、こちらのサイトを参考にしています。

www.webcreatorbox.com

 

新テーマはカスタマイズ記事が少ない

ZENO-TEALはとっても綺麗なデザインなんですが、まだ配布開始したばかりなのでカスタマイズについて書かれた記事があまりありません。

なので、ZENO-TEALに限ったカスタマイズ法じゃないけど、「少しでも変えたい!」と思う人のために書いてみました。

もう少しすれば、カスタマイズ記事もどんどん出てくるはず。

それを待ってからインストールしてもいいかもしれません。

だけど、「今すぐこのデザインにしたい!」と思っている方はぜひ参考にしてみてください。

ちなみに私はかなりの箇所を変更しています。(PC版のみ。スマホ版は変わってません)

PCで見て、「ここどうやって変えたの?」という部分があればコメントください!個別にコードをお伝えします。

www.yukigao.com

※私ははてなPro登録してるので、Proじゃない場合はこの通りにならない部分もあるとは思いますが…

ユキガオ