私が現在使用しているのは無料版はてなブログで、テーマは「UnderShirt」です。
カスタマイズの知識がない私でも、ブロガーさんのカスタマイズ記事を参考にすることで、現在のブログデザインにできました！
初心者でもできるカスタマイズをまとめましたので、ぜひ参考にしてください♪
全体のカスタマイズ
テーマを変更してしまうと、デザインCSSに保存していたコードはすべて消えてしまいます。
テーマを変更する方はカスタマイズをする前に、保存していたコードを別の場所に保存するようにしてください。
色を変更
色を変更する時は、こちらのサイトを参考にさせていただきました！
パステルカラーだったり、ビビッドカラーだったりと、色の種類が豊富です♪
アイコンを変更
アイコンを変更する時は、こちらの記事を参考にさせていただきました！
アイコンはメニューバーに使ったり、目次に使ったりといろいろな箇所に使えるので、使い方を把握しておくと便利です♪
トップページのカスタマイズ
グローバルナビゲーション
パソコン用の上部に表示するメニューバーを設置しました。
メニューバーがあると、ユーザーの利便性や回遊率が向上してSEO対策に効果があるそうです♪
グローバルナビゲーションのカスタマイズは、こちらの記事を参考にさせていただきました！
私は記事が少ないので、1階層の部分だけコピペしました。
下にスクロールしても上部に固定されているので、回遊率が向上してアクセスアップにつながりそうです♪
ボトムナビゲーション
スマホ用の下部に表示するメニューバーを設置しました。
ボトムナビゲーションのカスタマイズは、こちらの記事を参考にさせていただきました！
私の場合は「ツイッター」ではなく「カテゴリー」にしました。
「おすすめ記事」部分のコードをそのままコピペして「記事URL」と「タイトル部分」を「カテゴリーURL」と「カテゴリー名」に変更すれば設置できます♪
ヘッダー下におすすめ記事を表示
読んでもらいたい記事をブログの一番上に表示すると、回遊率が向上するそうなので表示しました。
ヘッダー下のカスタマイズは、こちらの記事を参考にさせていただきました！
コピペするだけで簡単に表示できました♪
ただ私の場合は、おすすめ記事に表示させる画像URLの末尾が「jpg」になっていたので、画像がぼやけてしまいました…
おすすめ記事に表示させる画像は「png」で保存すること！
画像URLをコードに貼付する時は、はてなフォトライフの画像を編集する画面で、画像URLをコピーするようにしてください。
上に戻るボタンを表示
ユーザーの利便性を考えて表示しました。
上に戻るボタンのカスタマイズは、こちらの記事を参考にさせていただきました！
コピペするだけで簡単に表示できました♪
ちなみにアイコンの位置をずらすには、デザインCSSに貼付したコードの「right」や「bottom」の数字を変更すればできます！
アイコンの大きさを変更するには、フッタに貼付したコードの「fa-5x」の数字を変更すればできますよ！
記事内のカスタマイズ
目次
目次については、カスタマイズが反映されなかった部分があったので、別記事でご紹介しています！
見出し
見出しは文章の構成がわかりやすくなって、ユーザーが読みやすくなります。
見出しのカスタマイズは、こちらの記事を参考にさせていただきました！
コピペするだけで簡単に表示できました♪
囲み枠
囲み枠のカスタマイズは、こちらの記事を参考にさせていただきました！
ただ囲み枠を2つ並べるには別のコードが必要でしたので、こちらの記事も参考にさせていただきました！
2つの記事を組み合わせることで、好きなデザインの囲み枠を2つ並べることができました♪
吹き出し
吹き出しを活用すると、個性が出るので入れてみました。
吹き出しのカスタマイズは、こちらの記事を参考にさせていただきました！
私の場合は左側の枠を大きくしたり、右側の枠の角を丸くしたりしてみました♪
まとめ
初心者でもできるカスタマイズをまとめてみました！
ほとんどコピペしたカスタマイズばかりですが(^_^;)
どの方々もわかりやすく解説してくださったので、初心者でもカスタマイズすることができました♪
テーマによっては同じようにカスタマイズできないかもしれませんが参考になれば嬉しいです♪
