2,094wonder

中国人夫とのJAPAN LIFE

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

f:id:japantk:20190504163356j:plain 今回「Minimalism」から「ZENO-TEAL」へテーマを変更しました!変更後に行ったカスタマイズ内容のまとめページを作りました。

 

 

はじめに。テーマを変更した経緯

f:id:japantk:20190502091701p:plain

「Minimalism」もシンプルで一目惚れして取り入れたのですが、自分のブログカラーを取り入れつつもうちょっと凝ったデザインにしたい‼‼と思い、この度思い切ってテーマを変更しました。

Minimalism - テーマ ストア

 

「ZENO-TEAL」にした理由

f:id:japantk:20190502091719j:plain

カード型・フラットデザイン・オリジナルカラー印象を付けられるという点からこちらを選びました。利用者が多い=カスタマイズしている人のサイトが沢山あったので、参考にできるカスタマイズが豊富だったのも決め手です。

ただ、利用者が多いだけに人と被りたくない!オリジナリティを出さなければ!とも思いました。

ZENO-TEAL - テーマ ストア

 

迷ったテーマの候補

f:id:japantk:20190502091806p:plain

「UNDER SHIRT」 シンプルでカード型、画像が際立つデザインですごくオシャレ!はじめはこちらにテーマを変更するつもりで、バックアップ用サイトをカスタマイズし始めていたのですが…

アイキャッチ画像が思い通りに表示させるのが大変。でした。

この点は製作者のrokuzeudonさんから解説ページがありますが、素人の私ではアイキャッチ画像を1つ1つ調節していくのが至難の業でした。。

blog.rokuzeudon.com

UnderShirt - テーマ ストア 

 

 

テーマ変更により一新!カスタマイズした内容あれこれ

f:id:japantk:20190502110141p:plain

カスタマイズとりあえず完成!まだ改良の余地ありますが…。

行ったカスタマイズを紹介していきます。

 

ヘッダーに好きな画像を追加する

f:id:japantk:20190502100339p:plain

 

超おススメの画像ダウンロードサイト 

個人的に大好きな、アイキャッチ用に適した画像サイトです。画像のサイズがそこそこ大きいので、画像サイズを調整してから使っています。

  • 会員登録不要!
  • ダウンロード無料!
  • わずらわしい広告や手続き不要!

Free stock photos - Kaboompics


 

 画像を横いっぱいにする

「ZENO-TEAL」の公式カスタマイズで紹介されています。

画像サイズに注意が必要ですが、先ほどのサイトでダウンロードした画像なら横いっぱいに広げても問題ありません。
zeno-teal.hatenablog.com

 

サイトカラーの変更

テーマを変更して一番先に行いました。緑色を変えなければまんま「ZENO-TEAL」になってしまう!笑

有難いことに、全体のカラーを一気に変えられるカスタマイズが紹介されています。

 

サイトカラーのコツ

サイトカラーが全然決まらずに苦労しました…。これが決まらないとテーマの変更自体が進まない!

今回、全体の統一感を持たせるため、ヘッダーの画像に使われている色と、サイトのカラーを類似色にしました。すると一気にオシャレ感アップします。個人的にはお気に入り(^^♪

 

ヘッダーと見出しのアニメーション追加

f:id:japantk:20190502094807p:plain

ヘッダーが上からふわっと降りてくる、記事タイトルが右からスライドするカスタマイズを追加しました。

▼参考にさせていただいたサイト

www.okuni.me

 

マウスホバーカスタマイズ

リンク先にマウスのカーソルを合わせると、アンダーラインが出現するアニメーションを追加。

ささやかですが、こういったアニメーションを加えることでカスタマイズしてる感・他サイトとの差別化が出来てどんどん愛着が湧いてきます~!

▼PCデザイン

f:id:japantk:20190502095116p:plain

▼スマホデザイン

f:id:japantk:20190502095112p:plain

 

▼マウスホバーカスタマイズ方法

www.coconatsuco.life

 

カエレバデザインを一新

「カエレバ・ヨメレバ・トマレバ」に適応したカスタマイズを新たに変更しました。こちらは、ショップアイコンにカーソルを合わせると、白抜きに変化する仕様です。

▼PCデザイン

f:id:japantk:20190502095706p:plain

▼スマホデザイン

f:id:japantk:20190502095926p:plain

▼カエレバデザインカスタマイズ方法

www.coconatsuco.life

 

 

グローバルメニューの調整

▼公式カスタマイズページにて、簡単にグローバルメニューの設置と多段形式にするカスタマイズが掲載されています。

zeno-teal.hatenablog.com

 

グローバルメニューの幅を調節して8つのカテゴリをスッキリ収める(スマホ)

f:id:japantk:20190502104947p:plain

既存の表示だと、カテゴリ6コが丁度いいのですが6個以上に増やすとグローバルメニューが画面の半分くらいの面積を占めてしまいます。

そこで、1つ1つの幅を狭くすることで、カテゴリ8つ・2段で表示させて記事部分の表示が上にあがり、バランスが良くなりました。

 

▼カスタマイズ方法

www.coconatsuco.life

 

枠デザインの見直し

文中に、ワンポイントや強調したいときに使う囲み枠。参考にさせていただいたサイトをご紹介します。

 ▼クリップの囲み枠を利用させていただきました。

love-wave.com

 

▼王道!サルワカさん

saruwakakun.com

 

 

 太字にしたときの背景を透明にした

初期設定で、太字<strong>・<b>を使用すると、黄緑色のマーカーが表示されます。今までの記事は太字はそのままで作成していたので、黄緑マーカーがかかるととても違和感が出てしまう!特に、背景色付きの囲み枠や文字に色を付けてるとき。

これはまずいと思い、「透明」に設定しました。

 

太字の背景を透明にするカスタマイズ

/* 太字の背景を透明 */
.entry-content strong{
background: transparent; →【透明】
border-bottom: none;}

その他随時追加していきます☆彡