こんにちは！旅行ブログを書いているYukiです(^^)
WordPress(ワードプレス)から"はてなブログ"に引っ越して来月で1年！はてなブログのデザインを色々とカスタマイズして、自分の気に入る見た目になったので、実際にやったオススメのカスタマイズ方法をまとめました☆
"グーグルアドセンス"や"カエレバ"についてのカスタマイズもあるので、ブログでアフィリエイトなどで収入を得たい人も必見です！！
(はてなブログProの人じゃないと無理なカスタマイズが多いかもしれないです。)
はてなブログのデザインテーマを選ぶ
もう既に"はてなブログ"をやっている人は決まったデザインテーマを選んでいるかもしれませんが、始めたばかりの人はまずブログのデザインテーマ選びから始めますよね！
はてなブログの人気のデザインテーマとは
はてなブログには公式テーマ以外にも、たくさんオシャレなテーマがあります☆
中でも人気なデザインテーマはこちらの5つ。(2017年12月現在)
DUDEのデザインカスタマイズ
私はオリジナリティー感溢れる｢DUDE｣を選びました☆
ヘッダー部分には画像を入れることができてオシャレ！
↓ヘッダー部分のカスタマイズは、実際にテーマのDUDEを作った"LITERALLY"さんのブログを参考にしました。
↓さらに、このヘッダー部分に使われている文字のフォントを変更しました。カスタマイズは｢F Lab.｣さんのブログを参考にしました。他にもDUDE用のカスタマイズ方法を紹介してくださっています！
↓DUDEのデザインで注意しないといけないのは、このテーマはレスポンシブではないということ！｢cBlog｣さんがDUDEのテーマのままで、レスポンシブに対応させるカスタマイズ方法を紹介しています！これは素晴らしい☆
テーマによって読み込み速度が変わるので慎重に選ぼう！
最近知ったのですが、実は選ぶテーマによって読み込み速度が異なるんですね〜。
これは全く考えていませんでした。調べると、どうやら私の選んだ"DUDE"は他の人気デザインテーマに比べて読み込みが遅いようです(T_T;)
がーん。
というわけで、私は泣く泣くDUDEの特徴でもあヘッダーの画像部分を先月削除しました。せっかくカスタマイズしたのにガッカリでしたが、読み込み速度はかなり改善されたのでオススメです。
読み込み速度を上げる為に画像の圧縮
遅い遅いと言われる"はてなブログ"の読み込み時間ですが、(私の旅行ブログのように写真を多くアップしている人は、)画像を圧縮することにより大幅に改善することができます。
↓まだ実行していない方はこちらのブログも参考にして下さい！私は既にアップした画像を現在修正中でかなり苦労しているので、ぜひ早めに対策をしておくことをオススメします(^^)
さあ、画像の圧縮を理解して、はてなブログのテーマが決まれば、今度は細かいデザインのカスタマイズに入っていきましょう！
グローバルメニュー&トグルメニュー(レスポンシブ)
↓素晴らしい記事ばかり書かれていて、本当にお世話になっている｢Yukihy Life｣さんのブログ。
この方法でグローバルメニューを設置し、幅がタブレットやスマホ(モバイル)くらいになると、トグルメニューに変わってくれるレスポンシブ対応の超優れもの！コピペだけで完成しちゃいます(^^)
↓こちらがパソコン用のデザイン。このブログでは、色やデザインなどCSSで自分のブログに合わせて変更しました。
↓モバイルだとトグルが出現し、クリックをするとメニューが現れます！
カテゴリーの階層化・パンくずリスト
親カテゴリーに子カテゴリーを設定
みなさん、はてなブログで"カテゴリー"は設定して使っていると思うのですが、このカスタマイズでは"親カテゴリー"に対して"子カテゴリー"を設定できるようにしました。
親カテゴリーはメインのカテゴリーで、子カテゴリーはサブカテゴリーを意味します。
↓例えば私の旅行ブログでは この画像のように｢アジア｣という"親カテゴリー"に対して、｢インド｣や｢フィリピン｣などの国が"子カテゴリー"にあたります。
SEO対策になるみたいだし、カテゴリーが多い場合には見やすくなるのでオススメです！
↓この設定はワードプレスでは普通にできたのに、はてなブログでは出来なくて不便だと思っていたところ｢小さな星がほらひとつ｣さんがカスタマイズ方法を紹介して下さっています！すげー！
パンくずリスト
パンくずリストは利用していますか？はてなブログでは2016年の8月から、記事のカテゴリーをパンくずリストとして表示するようになりました！
↓先ほどのカスタマイズでカテゴリーの階層化をすると、このパンくずリストも階層化されます☆
このパンくずリスト、ブログ記事の上に長々と表示されるのがちょっとウザい。
ブログのタイトルの上に小さく同じタイトルが表示されるのが嫌だったので、｢わたしと納豆ごはん｣さんのブログを参考に、CSSで タイトルだけ を非表示にしました！助かりました！
SNSシェアボタン設置してオシャレなデザインにする
はてなブログのデフォルトでもシェアボタンを設置することができますが、せっかくなのでオシャレなデザインなものにしちゃおう！
シェア数が表示できるシェアボタン
"はてなブックマーク"と"フェイスブック"はシェアした数がカウントできるタイプを探しました。
↓いつもお世話になっている｢Yukihy Life｣さんのブログに書かれたコードをコピペして完成しました。モバイルではラインのアイコンも出現する優れもの！！
↓ちょっと前まで｢いつ俺〜いつから俺ができないと錯覚していた？｣さんのシェアボタンを使っていました☆こちらもシェア数が表示されるタイプです(^^)素晴らしい！
↓シェアボタンは記事下にフォローボタンと一緒に設置して、枠などは自分好みのデザインにCSSで変更しました☆
お問い合わせページを設置
Googleフォームで作る
やはりお問い合わせのページはあったほうが便利！
↓良く色々な記事を参考にさせてもらっている｢MUTANT｣さんが、はてなブログでの問い合わせフォームの作り方を書いて下さっています☆
記事を見ながら私も"googleフォーム"で作りました☆
だれかが問い合わせフォームを送信してくれたら、直接メールに問い合わせ内容が届くわけではなくて、ただのお知らせだけがくるので、わざわざグーグルフォームにアクセスして内容を確認しなければならないのが難点かも。
でも、既にグーグルのアカウントを持っていれば、とても簡単に作れるのでオススメです！！お問い合わせページを作ってから、実際にご依頼の連絡をいただくこともありました。
Tayoriで作る
↓｢きりんのきもち｣さんが紹介して下さっている"Tayori"というサービルのお問い合わせフォームもあるようです。
最初はこれにしようと思ったのですが、会員登録をするのが面倒で断念(^^;)
サイドバーをカスタマイズ
サイドバーの最下部のモジュールを固定
記事が長くなって下にスクロールしていくと、サイドバー部分が真っ白になってしまい勿体ないですよね？
↓そこで、サイドバーの一番下にある項目部分だけが、スクロールしても付いてくるように設定しました！参考にしたのは｢明日こそ、定時｣さん！
載せて下さっているコードをコピペするだけで実現することができます☆
私のブログでは、楽天の広告がサイドバーに固定されるようにしてあります。( ※ グーグルアドセンスで、この設定をすることは違反行為になるので、注意して下さい！！)
サイドバーのモジュールをタブで切り替え
これは本当に画期的ですごい！！
サイドバーにたくさんのモジュールを設置したいけど、長〜くなりすぎてしまうのは嫌ですよね。。
↓そこで、大先生の｢Yukihy Life｣さんのブログを見ながら、サイドバーのモジュールにダブメニューを設置しました。素晴らしすぎて圧巻の技です。
私のブログでは、"カテゴリー"と"アーカイブ"の二つを設定してみました☆色などは自分好みにカスタマイズ！
本当は、もう一つ別のタブを作りたかったのですが、１グループでしか作動しないようです。
見出しのデザインを自分好みにカスタマイズ
(私の使っている)はてなブログのテーマ"DUDE"のデフォルテでも、見出しデザインは既にオシャレなのですが、もう少し自分好みに変更したくて"h3"と"h5"のデザインを変更しました。
↓これが実際に今使っているデザイン
↓はてなブログ専用というわけではないですが、｢サルカワ｣さんのブログに、超たくさんの見出しデザインの例が紹介されています！！！センスの良いものばかりなので、好みのものが見つかるはず☆
デザインを参考にして、カラーだけ自分好みにカスタマイズしても良いですね！
蛍光ペンのような色の付いた下線を記事につかう
ブログの記事ってできるだけ見やすくしたいですよね！そんな時にオシャレにできちゃうのが"この蛍光ペンのような色の付いた下線"です。
↓やり方は｢僕が生きる意味｣さんの記事を参考にしました(^^) 大満足の仕上がり。
グーグルアドセンスの広告をちょっと特別な位置に設置
アドセンス広告を記事内に自動で入れる
記事の中にアドセンスの広告が貼れれば、きっとクリック率が上りそうなのに、毎回記事に手動で貼るしかないの！？
そんんな悩みを解決してくれるのがこちら！！
↓｢UXエンジニアになりたい人のブログ｣さんが、コピペでできちゃう超簡単なコードを作って下さいました！！神ですね！超オススメの方法です！
私のブログでは、記事の一番最初の"h3"の前と、一番最後の"h3"の前に、グーグルアドセンスの広告が表示されるようにしました！
トップページの記事と記事の間にアドセンス広告を表示する
私のブログのトップページはあまり表示自体がされていないのですが、それでもこれでちょっぴり収益が増えました(^^) インフィード広告にすると、さりげなくて良い感じです。
↓トップページの記事一覧ページで 記事と記事の間にアドセンスの広告を表示する方法は｢クリアメモリ｣さんが紹介してくださっています！ありがとうございます！
カエレバの設置とカスタマイズ
｢カエレバ｣は、最近良く色々な方のブログでも目にするようになった、Amazonと楽天などのアフィリエイトリンクを一つの広告に簡単に設置できてしまう優れもの☆
カエレバのデザインカスタマイズ
せっかく利用するなら、デザインもオシャレにしたいですよね！
↓またまた｢Yukihy Life｣さんのブログ記事を参考にさせていただきました。ストーカーでベルで見てますね。だって、とっても良いんだもん☆
↓私は外枠だけ、自分でカスタマイズしてみました☆( ※ これはスクリーンショットじゃなくて、本当のカエレバで作ったアフィリエイトリンクです！)
404 NOT FOUNDページをカスタマイズ
ページが見つからなかった時に表示されてしまう"404 NOT FOUND"ページ。
せっかく自分のブログに来てくれたのに、ほぼ真っ白なページ が表示されてしまっては勿体ないので、オススメ記事一覧を表示するようにカスタマイズしました☆
↓｢攻めは飛車角銀桂守りは金銀三枚｣さんが、はてなブログの404ページのカスタマイズ方オフを紹介してくださっています(^^) 画像は自分で設定してくださいね☆
サムネイル画像の角を丸くする
トップページの記事一覧のサムネイル画像や、サイドバーのオススメ記事などのサムネイル画像の角を丸くしてみました。ちょっと小洒落感が増すデザインになると思います☆
↓｢カキタクナッタラ｣さんが書いてくれているコードをCSSにコピペするだけで一瞬で実現できちゃいました(^^) これは嬉しい！
ページのトップに戻るボタンの設置
ページトップに戻るボタンは、クリックすると ページの上部に"ギュイ〜ん"って飛ぶアレです。
↓｢いつかギャフンと言わせたい｣さんの記事を参考させていただいて設置しました！人気の"Font Awesome"のアイコンを使っています(^^)
Font Awesome
もともとは完全に同じデザインの矢印を使用していましたが、先日別のアイコンに変更してみました☆アイコンはもちろん"Font Awesome"のものです！
詳しい使い方は有名な｢サルカワ｣さんがブログに書いてくれています☆
ちなみに私のブログのグローバルナビゲーション(メニューバー)の箇所に使っているアイコンもFont Awesomeです！超便利で可愛い！
その他のカスタマイズ
カスタマイズしたのはザックリとこのくらいかな？他にも色や文字の大きさなどちょこっと弄った箇所もあります。
それから、前はサイドバーにフェイスブックとツイッターを読み込んで表示させていましたが、もっとスッキリしたデザインにしたくて撤去してしまいました。
関連記事を表示してくれるオシャレな｢Milliard｣も読み込みが遅くなるので消しました。現在はグーグルアドセンスの｢関連コンテンツユニット｣を記事下に設置しています。
最後に
どうでしたか？沢山の方が"はてなブログ"のカスタマイズ方法について書いてくれているので、本当に本当にありがたいですよね！！
せっかくブログをやるなら読者から見やすくて、尚且つ自分が気にいるデザインにカスタマイズできたら嬉しいと思います。
注意としては、カスタマイズする前には、必ず元のコードをコピペしておくなど、バックアップを忘れずに！！もしも崩れてしまったり、間違えてしまったときに、元に戻せないと悲惨すぎます(T_T;)
それから、デザインだけを重視しすぎて、読み込み速度が遅くならないように気をつけて下さいね！！
最後まで読んでくれてありがとう(^^) おやすみ〜！
普段は旅行記(旅行ブログ)を書いています☆