シェリーさんち

妊活から妊娠へ アラサー主婦のブログ

はてなブログのテーマを「ZENO-TEAL」に変更しました!カスタマイズまとめ

f:id:family-blog:20190123204931j:plain

こんにちは、シェリーです!

もう随分前のことになりますが、ブログテーマをHandwritingからZENO-TEALに変更しました!一つコツを掴めばどんどんカスタマイズが進んで、とても使いやすくてオススメのテーマなので、久しぶりにカスタマイズ記事を書こうと思います。

 

ZENO-TEALのオススメポイント

ベースがお洒落なのでカスタマイズしやすい

ZENO-TEALの初期設定は、鮮やかな緑のテーマカラーに背景がドット柄と、とてもお洒落です。インストールした直後は、初期設定のままも良いな〜と思っていました。ですが、テーマカラーはピンクとブログを立ち上げた時から決めていたのでカスタマイズをしてみることにしました。すると「あ、どんどん変わっていく!」と実感しました。ベースがお洒落なのでテーマカラーを変えたりしても崩れにくく、とてもカスタマイズしやすかったです。

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

PCとスマホ、どちらかを先にカスタマイズしてもう一方のカスタマイズを別途行わなければならないのはとても面倒ですよね。レスポンシブデザイン対応のテーマは、ボタンを押すだけでPCとスマホの表示デザインを統一することができます。

はてなブログでZENO-TEALをインストールした後のレスポンシブデザインの設定方法は以下の通りです。

  1. ダッシュボード
  2. デザイン
  3. スマートフォン
  4. 詳細設定
  5. レスポンシブデザインにチェック

太字にした箇所に自動的に下線が引かれる

ブログの中で強調したい箇所を太字にすることってよくありますよね。太字にしただけでも十分インパクトはありますが、このようにカラフルな下線を引くとグンと読みやすくなります。

ブログでカラフルな下線を引くためには、CSSやHTMLを編集したりする方法がありますが、この方法だと少し手間がかかります。しかし、テーマをZENO-TEALにすれば太字にした箇所に自動的に下線が引かれるようになるので、CSSやHTMLを編集する手間を省くことができます。

ZENO-TEALをオススメできない人

ブログの記事数が多く手間をかけたくない人

私がZENO-TEALにして一番大変だと感じたことは、どの記事にも「続きを読む」を挿入しないといけないことです。何故その作業が必要かというと「続きを読む」を記事のどこかに挿入していないと、トップページから記事へリンクできなくなってしまうからです。

このブログは記事数が少ないので問題なかったのですが、これまでに書いた記事数の多いブログだと一つひとつ「続きを読む」を挿入していくのも大変そうです。そういった作業をしたくない方にはこちらのテーマにしない方がよいかもしれません。

ZENO-TEALのカスタマイズ

はじめに読むべきサイト

ZENO-TEALをインストールした後のカスタマイズで一番助けられたサイトは、ブログテーマを作られた方自身が運営されているブログです。 基本的には、こちらのサイトを読むことによってZENO-TEAL のカスタマイズについてのほとんどの疑問は解消されます。

テーマカラーを一括で変えるCSS

インストールをした後は手探りでカスタマイズを開始しました。もちろん、初期設定のままでも十分だったのですが、前述の通りテーマカラーはピンクとブログを立ち上げた時から決めていたので、テーマカラーを初期設定の鮮やかなグリーンから、ピンクに変えることにしました。

その時、私は一つ重大なことに気がついていませんでした。私はネット情報を参考にしながらパーツの色を一つひとつカスタマイズしていたのです。終わりが見えない…と思い始めた時にあることを知り衝撃を受けました。

ZENO-TEALは、全体のテーマカラーをCSSを使って一度に変更することができるのです!

は、初めに知りたかった…。 これからZENO-TEALのテーマカラーを部分的にではなく全体的にカスタマイズしようと考えている方は、一つひとつカスタマイズせずに是非以下のサイトを参考にして欲しいと思います!

背景色をドット柄から任意の色に変える

ZENO-TEALの背景と言えばドット柄です。とてもお洒落なデザインですが、このブログには合わないと思ったので私は外したかったです。そのため、ドット柄を無地にするCSSを設定して背景を無地にしました。しかし、これはこの記事を書くために調べて知ったのですが、背景はダッシュボードから簡単に変更できるようです

背景色をドット柄から任意の色(白などの無地)に変える手順は以下の通りです。

  1. ダッシュボード
  2. デザイン
  3. カスタマイズ
  4. 背景色
  5. 任意の色を選択

まとめ

随分前にテーマを変えて少しずつカスタマイズしてきたので、うろ覚えな部分もありますが、書きながらだいぶ思い出しました。また、思い出したことがあれば追記していきたいと思います!