はてなブログってデフォルトのテーマが何かとすごく不十分ですよね。
カスタマイズしまくってもし足りないくらいですが、いろいろ詳しく書かれたページをまとめておいたのでこの記事を足がかりに頑張ってみてください。
すべてコピペだけで完結するので、WEB知識のあまりない方でも必ずできると思います。
目次
1. グローバルナビを設置する
1-1. シンプルなグローバルナビ
2-2. レスポンシブ対応のグローバルナビ
2. パンくずを設置する
3. ソーシャルメディアと連携する
3-1. Twitterのタイムラインの設置
3-2. FacebookのLike Boxの設置
3-3. Google+のウィジェットの設置
4. 記事下に関連記事を表示する
4-1. Milliard関連ページプラグイン
4-2. あわせて読みたいG
5. シェアボタンをカスタマイズする
6. トップスクロールを設置する
7. Google Adsenseを設置する
7-1. 基本的な設置の仕方
7-2. 記事中に設置する方法
8. まとめ
グローバルナビを設置する
シンプルなグローバルナビ
①以下のHTMLタグをタイトル下に入れます。
これはこちらの記事を参考にしました。
レスポンシブ対応のグローバルナビ
もっとオシャレなメニューが作りたいならこちらの記事を参考にするといいと思います。 jQueryを使えばレスポンシブ対応のものが出来上がります。
パンくずを設置する
ユーザーが閲覧しているウェブページを階層構造で表示します。
例えば、この記事のパンくずはこのようになります。
パンくずを表示することで内部リンクやページナビゲーションが改善され、ユーザーがTOPまでの道筋をたどりやすくなります。
①以下のコードをフッターに入れます。
②次に、以下のHTMLタグを記事上または記事下に入れます。
これはこちらの記事を参考にしました。
ソーシャルメディアと連携する
Twitterのタイムラインの設置
FacebookのLike Boxの設置
Google+のウィジェットの設置
記事下に関連記事を表示する
Milliard関連ページプラグイン
記事下に関連記事を入れるブログパーツ。とてもスタイリッシュでおしゃれに見えるので気に入ってます。スマホの記事下にも表示できるのでいいですよ。
Milliard関連ページプラグインについて | シスウ株式会社
あわせて読みたいG
関連記事を表示する方法としてこちらも有名です。
シェアボタンをカスタマイズする
デフォルトのシェアボタンを消しバイラルメディアっぽいシェアボタンに変更することができます。こちらの方が表示速度が速いので、好みに合わせて変えたらいいと思います。
トップスクロールを設置する
当ブログでも右下に設置しているトップに戻ってくる追尾のボタンです。
①こちらのコードをまずフッターのどこかにコピペしてください。
②CSSでデザインの調整を行います。 こちらは学生気分で使っているコードです。
これはこちらの記事を参考にしました。
Google Adsenseを設置する
基本的な設置の方法
affiliate-hatekun.hatenablog.com
記事中に設置する方法
最初の大見出しの直前に広告を挿入する方法です。はてブロのユーザーの多くは最初<h3>タグを使っていると思います。eq(0)が「最初」を意味し、eq(1)、eq(2)と数字を変えると広告位置が変わっていきます。
これはこちらの記事を参考にしました。
まとめ
他のブログとデザインが似通っていると読者もなかなかサイトを覚えてくれません。
他と差別化した印象を与えれば、読者の見たことあるリストに入りサイト内回遊率も上がりやすいと考えています。