TATSU&YUKIの二人旅.COM

海外滞在期間は計"約4年半!留学・ワーホリ&世界一周旅行をした元バックパッカー夫婦の旅行ブログ

MENU

【はてなブログ】おすすめデザインカスタマイズ集!オシャレに変更

こんにちは!旅行ブログを書いているYukiです(^^)

WordPress(ワードプレス)から"はてなブログ"に引っ越して来月で1年!はてなブログのデザインを色々とカスタマイズして、自分の気に入る見た目になったので、実際にやったオススメのカスタマイズ方法をまとめました☆

"グーグルアドセンス"や"カエレバ"についてのカスタマイズもあるので、ブログでアフィリエイトなどで収入を得たい人も必見です!!

(はてなブログProの人じゃないと無理なカスタマイズが多いかもしれないです。)

はてなブログのデザインテーマを選ぶ

もう既に"はてなブログ"をやっている人は決まったデザインテーマを選んでいるかもしれませんが、始めたばかりの人はまずブログのデザインテーマ選びから始めますよね!

はてなブログの人気のデザインテーマとは

はてなブログには公式テーマ以外にも、たくさんオシャレなテーマがあります☆

中でも人気なデザインテーマはこちらの5つ。(2017年12月現在)

DUDEのデザインカスタマイズ

私はオリジナリティー感溢れる「DUDE」を選びました

ヘッダー部分には画像を入れることができてオシャレ!

はてなブログデザインテーマDUDE

ヘッダーをカスタマイズ

↓ヘッダー部分のカスタマイズは、実際にテーマのDUDEを作った"LITERALLY"さんのブログを参考にしました。

googleフォントを使ってフォントを変更

↓さらに、このヘッダー部分に使われている文字のフォントを変更しました。カスタマイズは「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」さんのブログを見ながら、サイドバーのモジュールにダブメニューを設置しました。素晴らしすぎて圧巻の技です。

色やデザインをCSSで変更

私のブログでは、"カテゴリー"と"アーカイブ"の二つを設定してみました☆色などは自分好みにカスタマイズ!

サイドバーのモジュールをタブメニューにする

本当は、もう一つ別のタブを作りたかったのですが、1グループでしか作動しないようです。

 


見出しのデザインを自分好みにカスタマイズ

(私の使っている)はてなブログのテーマ"DUDE"のデフォルテでも、見出しデザインは既にオシャレなのですが、もう少し自分好みに変更したくて"h3"と"h5"のデザインを変更しました。

↓これが実際に今使っているデザイン

はてなブログの見出しのデザインを変更

↓はてなブログ専用というわけではないですが、「サルカワ」さんのブログに、超たくさんの見出しデザインの例が紹介されています!!!センスの良いものばかりなので、好みのものが見つかるはず☆ CSSのコピペだけで実現可能!

デザインを参考にして、カラーだけ自分好みにカスタマイズしても良いですね!


蛍光ペンのような色の付いた下線を記事につかう

ブログの記事ってできるだけ見やすくしたいですよね!そんな時にオシャレにできちゃうのが"この蛍光ペンのような色の付いた下線"です。

↓やり方は「僕が生きる意味」さんの記事を参考にしました(^^) 大満足の仕上がり。

 


グーグルアドセンスの広告をちょっと特別な位置に設置

アドセンス広告を記事内に自動で入れる

記事の中にアドセンスの広告が貼れれば、きっとクリック率が上りそうなのに、毎回記事に手動で張るしかないの!?

そんんな悩みを解決してくれるのがこちら!!

↓「UXエンジニアになりたい人のブログ」さんが、コピペでできちゃう超簡単なコードを作って下さいました!!神ですね!超オススメの方法です!

私のブログでは、記事の一番最初の"h3"の前と、一番最後の"h3"の前に、グーグルアドセンスの広告が表示されるようにしました!

トップページの記事と記事の間にアドセンス広告を表示する

私のブログのトップページはあまり表示自体がされていないのですが、それでもこれでちょっぴり収益が増えました(^^) インフィード広告にすると、さりげなくて良い感じです。

↓トップページの記事一覧ページで 記事と記事の間にアドセンスの広告を表示する方法は「クリアメモリ」さんが紹介してくださっています!天才!

カテゴリーなどのアーカイブページで、記事間にアドセンス広告を表示する

こちらは、アーカイブページの記事と記事の間にアドセンス広告を表示する方法です!

カテゴリーなどをクリックしたときに表示されるページなので、閲覧数は少ないですが利用する価値はあると思います☆

↓コードは「naenote.net」さんが作ってくれました!かなりありがたいですね!

広告の種類はレスポンシブ広告のみで、インフィード広告にはできないようです。

 


カエレバの設置とカスタマイズ

「カエレバ」は、Amazonと楽天などのアフィリエイトリンクを一つの広告に簡単に設置できてしまう優れもの☆

最近良く色々な方のブログでも目にするようになりました!

https://kaereba.com/

カエレバのデザインカスタマイズ

せっかく利用するなら、デザインもオシャレにしたいですよね!

↓またまた「Yukihy Life」さんのブログ記事を参考にさせていただきました。参考になる記事が多すぎて最強なブログです!

外枠を自分好みのデザインに変更

↓私は外枠だけ、自分でカスタマイズしてみました☆( ※ これはスクリーンショットじゃなくて、本当にカエレバで作ったアフィリエイトリンクです!)

 


404 NOT FOUNDページをカスタマイズ

ページが見つからなかった時に表示されてしまう"404 NOT FOUND"ページ。

せっかく自分のブログに来てくれたのに、ほぼ真っ白なページ が表示されてしまっては勿体ないので、オススメ記事一覧を表示するようにカスタマイズしました☆

はてなブログの404 NOT FOUNDページ

↓「攻めは飛車角銀桂守りは金銀三枚」さんが、はてなブログの404ページのカスタマイズ方オフを紹介してくださっています(^^) 画像は自分で設定してくださいね☆

 


サムネイル画像の角を丸くする

トップページの記事一覧のサムネイル画像や、サイドバーのオススメ記事などのサムネイル画像の角を丸くしてみました。ちょっと小洒落感が増すデザインになると思います☆

はてなブログのサムネイル画像の角を丸く

↓「カキタクナッタラ」さんが書いてくれているコードをCSSにコピペするだけで一瞬で実現できちゃいました(^^) これは嬉しい!

 


ページのトップに戻るボタンの設置

ページトップに戻るボタンは、クリックするとページの上部に"ギュイ〜ん"って飛ぶアレです。

はてなブログのトップに戻るボタン

↓「いつかギャフンと言わせたい」さんの記事を参考させていただいて設置しました!人気の"Font Awesome"のアイコンを使っています(^^)

Font Awesome

もともとは完全に同じデザインの矢印を使用していましたが、先日別のアイコンに変更してみました☆アイコンはもちろん"Font Awesome"のものです!

詳しい使い方は有名な「サルカワ」さんがブログに書いてくれています☆

ちなみに私のブログのグローバルナビゲーション(メニューバー)の箇所に使っているアイコンもFont Awesomeです!超便利で可愛い!

 


SNSの埋め込み

私は以前、サイドバーに"フェイスブック"と"ツイッター(のタイムライン)"を埋め込みで表示させていました。もっとスッキリしたデザインにしたくて撤去してしまいましたが、設置するとカッコイイしSNSへの誘導もできると思います(^^)

Twitterを埋め込む

↓実際に私のツイッターをここに埋め込こんでみるとこんな感じになります。前まではサイドバーに設置していました☆

↓頻繁にお世話になっている「MUTANT」さんが、ツイッターを埋め込む方法を書いてくれています☆タイムラインだけでなく、ツイート(つぶやき)の埋め込みや、ツイッターへの自動投稿についても紹介されています!

いつもながら、とても解りやすい記事ですね(^^)

facebookを埋め込む

フェイスブックは、"Facebook Page Plugin"というプラグインを使って埋め込むことができます。

↓試しにここに私のフェイスブックページを埋め込んでみました☆これも前まではサイドバーに設置していたのですが、現在は使っていません。

この設定ではタイムラインが表示されていませんが、自分でカスタマイズして表示することも可能です!

 

↓設置方法は「WEBサイト制作の勉強」さんが紹介してくれています(^^)

Facebookの"この記事が気に入ったらいいね"を設置する

記事下に「この記事が気に入ったら いいね!」と書かれているのを見たことはありませんか?ついついクリックしたくなるデザインで、私も実は前まで設置していました。

クリックすると、記事やフェイスブック投稿単独に対しての"いいね"ではなく、フェイスブックのページ自体に対しての"いいね"をすることになる仕組みなので、さりげなくフォロワーを増やすことができます。

↓設置方法は「ウェブと食べ物と趣味のこと」さんがブログに書いてくださっています☆

Instagramを埋め込む

インスタグラムをサイドバーなどに表示するには、"SnapWidget"というウィジェットを使っている人もいると思いますが、私はあまりオススメしません。なぜなら、リンク先が自分のインスタのページに飛ばないからです!クリックすると"SnapWidget"のページに行ってしまうんです。

そこで私は、自分のインスタの中でもオススメの写真をいくつか選んで、サイズを小さくして直接サイドバーに張り付けています(笑)クリックすると自分のインスタページの写真に飛ぶようにしてあります☆

 


関連記事を記事下に表示する

ブログ記事を読み終わったら、他の記事も読んでもらいたいですよね?別の記事に誘導するために、関連記事を表示させましょう。

関連記事を表示してくれるプラグイン「Milliard

オシャレに関連記事を表示させることができるMilliardは人気のプラグインです。

↓設置方法は「すずろぐ」さんがやり方を書いてくれています(^^)

Milliardのデメリットは読み込みが遅い

私も前まで使っていたのですが、残念ながら読み込みが遅くなるので消しちゃいました。

グーグルアドセンスの関連コンテンツユニットを使う

現在 私はグーグルアドセンスの「関連コンテンツユニット」を記事下に設置しています。関連記事と広告をうまーく表示してもらえるので、さりげなく広告収入を得ることができます☆

↓導入方法は「20代野球好きの生活界隈」さんの記事がわかりやすいです。詳しく説明してくださっているので、大変参考になります(^^)

 


はてなブログの目次デザインをオシャレにする

私は普段ブログを書いていても「目次」を使うことって少ないのですが、今回のように記事がガッツリ長くなってしまった場合や、読者の方が決まった項目だけ読みたい可能性がある内容のときに便利だと思います。

今までは目次のデザインを全くカスタマイズしていなかったのですが、今回の記事で目次を設置したら見づらかったので、私もカスタマイズしてみました☆

↓参考にしたのは、お馴染み「Yukihy Life」さん!!細かいデザインの調整ができるのですが、特に凄いのが収納可能な目次に設定できること☆

↓「THE LITTLE ESCAPE」さんはガーリーで可愛い目次のデザインを6つも提案してくれています!丸ごとCSSコードをコピペするだけなので超簡単!!見本も表示されていて見やすいです(^^)

 

その他のカスタマイズ

カスタマイズしたのはザックリとこのくらいかな?他にも色や文字の大きさなどちょこっと弄った箇所もあります。

あとは、はてなスターを非表示にしました(^^;) あまり必要性を感じないし、読み込み速度が多少かわるかな〜というのが動機です。

 

最後に

沢山の方が"はてなブログ"のカスタマイズ方法について書いてくれているので、本当に本当にありがたいですよね!!

せっかくブログをやるなら読者から見やすくて、尚且つ自分が気にいるデザインにカスタマイズできたら嬉しいと思います。

注意としては、カスタマイズする前には、必ず元のコードをコピペしておくなど、バックアップを忘れずに!!もしも崩れてしまったり、間違えてしまったときに、元に戻せないと悲惨すぎます(T_T;)

それから、デザインだけを重視しすぎて、読み込み速度が遅くならないように気をつけて下さいね!!

最後まで読んでくれてありがとう(^^) おやすみ〜!

 

普段は旅行記(旅行ブログ)を書いています☆良かったら読んでみてね(^^)

↓気になる!アップルのCMソングを最新から歴代までがっつりまとめました!