今回「Minimalism」から「ZENO-TEAL」へテーマを変更しました！変更後に行ったカスタマイズ内容のまとめページを作りました。
はじめに。テーマを変更した経緯
「Minimalism」もシンプルで一目惚れして取り入れたのですが、自分のブログカラーを取り入れつつもうちょっと凝ったデザインにしたい‼‼と思い、この度思い切ってテーマを変更しました。
「ZENO-TEAL」にした理由
カード型・フラットデザイン・オリジナルカラー印象を付けられるという点からこちらを選びました。利用者が多い＝カスタマイズしている人のサイトが沢山あったので、参考にできるカスタマイズが豊富だったのも決め手です。
ただ、利用者が多いだけに人と被りたくない！オリジナリティを出さなければ！とも思いました。
迷ったテーマの候補
「UNDER SHIRT」 シンプルでカード型、画像が際立つデザインですごくオシャレ！はじめはこちらにテーマを変更するつもりで、バックアップ用サイトをカスタマイズし始めていたのですが…
アイキャッチ画像が思い通りに表示させるのが大変。でした。
この点は製作者のrokuzeudonさんから解説ページがありますが、素人の私ではアイキャッチ画像を1つ1つ調節していくのが至難の業でした。。
テーマ変更により一新！カスタマイズした内容あれこれ
カスタマイズとりあえず完成！まだ改良の余地ありますが…。
行ったカスタマイズを紹介していきます。
ヘッダーに好きな画像を追加する
超おススメの画像ダウンロードサイト
個人的に大好きな、アイキャッチ用に適した画像サイトです。画像のサイズがそこそこ大きいので、画像サイズを調整してから使っています。
- 会員登録不要！
- ダウンロード無料！
- わずらわしい広告や手続き不要！
Free stock photos - Kaboompics
画像を横いっぱいにする
「ZENO-TEAL」の公式カスタマイズで紹介されています。
画像サイズに注意が必要ですが、先ほどのサイトでダウンロードした画像なら横いっぱいに広げても問題ありません。
zeno-teal.hatenablog.com
サイトカラーの変更
テーマを変更して一番先に行いました。緑色を変えなければまんま「ZENO-TEAL」になってしまう！笑
有難いことに、全体のカラーを一気に変えられるカスタマイズが紹介されています。
サイトカラーが全然決まらずに苦労しました…。これが決まらないとテーマの変更自体が進まない！
今回、全体の統一感を持たせるため、ヘッダーの画像に使われている色と、サイトのカラーを類似色にしました。すると一気にオシャレ感アップします。個人的にはお気に入り(^^♪
ヘッダーと見出しのアニメーション追加
ヘッダーが上からふわっと降りてくる、記事タイトルが右からスライドするカスタマイズを追加しました。
▼参考にさせていただいたサイト
マウスホバーカスタマイズ
リンク先にマウスのカーソルを合わせると、アンダーラインが出現するアニメーションを追加。
ささやかですが、こういったアニメーションを加えることでカスタマイズしてる感・他サイトとの差別化が出来てどんどん愛着が湧いてきます～！
▼PCデザイン
▼スマホデザイン
▼マウスホバーカスタマイズ方法
カエレバデザインを一新
「カエレバ・ヨメレバ・トマレバ」に適応したカスタマイズを新たに変更しました。こちらは、ショップアイコンにカーソルを合わせると、白抜きに変化する仕様です。
▼PCデザイン
▼スマホデザイン
▼カエレバデザインカスタマイズ方法
グローバルメニューの調整
▼公式カスタマイズページにて、簡単にグローバルメニューの設置と多段形式にするカスタマイズが掲載されています。
グローバルメニューの幅を調節して８つのカテゴリをスッキリ収める（スマホ）
既存の表示だと、カテゴリ6コが丁度いいのですが6個以上に増やすとグローバルメニューが画面の半分くらいの面積を占めてしまいます。
そこで、1つ1つの幅を狭くすることで、カテゴリ8つ・2段で表示させて記事部分の表示が上にあがり、バランスが良くなりました。
▼カスタマイズ方法
枠デザインの見直し
文中に、ワンポイントや強調したいときに使う囲み枠。参考にさせていただいたサイトをご紹介します。
▼クリップの囲み枠を利用させていただきました。
▼王道！サルワカさん
太字にしたときの背景を透明にした
初期設定で、太字<strong>・<b>を使用すると、黄緑色のマーカーが表示されます。今までの記事は太字はそのままで作成していたので、黄緑マーカーがかかるととても違和感が出てしまう！特に、背景色付きの囲み枠や文字に色を付けてるとき。
ブログカラーとの相性考慮してシンプルな「透明」に設定しました。
その他随時追加していきます☆彡
