読者です 読者をやめる 読者になる 読者になる

学生気分

ブログで生きる新しい価値観、ライフハック、管理人の身辺雑記。だいたい毎日更新してます。

無料版でどこまでできるか?はてなブログをカスタマイズするときに参考になる記事まとめ

WEBサービス WEBサービス-はてブロ

f:id:takakin3324:20151125220930j:plain

 はてなブログってデフォルトのテーマが何かとすごく不十分ですよね。
カスタマイズしまくってもし足りないくらいですが、いろいろ詳しく書かれたページをまとめておいたのでこの記事を足がかりに頑張ってみてください。
すべてコピペだけで完結するので、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タグをタイトル下に入れます。

②次に、以下のCSSをデザインCSSに貼り付けます。

これはこちらの記事を参考にしました。

maroom.hateblo.jp

レスポンシブ対応のグローバルナビ

もっとオシャレなメニューが作りたいならこちらの記事を参考にするといいと思います。 jQueryを使えばレスポンシブ対応のものが出来上がります。

www.yukihy.com

パンくずを設置する

ユーザーが閲覧しているウェブページを階層構造で表示します。

例えば、この記事のパンくずはこのようになります。

TOP>WEBサービス>はてブ>無料プランでどこまでできるかな?はてなブログをカスタマイズするときに参考になる記事まとめ

パンくずを表示することで内部リンクやページナビゲーションが改善され、ユーザーがTOPまでの道筋をたどりやすくなります。

①以下のコードをフッターに入れます。

②次に、以下のHTMLタグを記事上または記事下に入れます。

これはこちらの記事を参考にしました。

wepli-dot2.hatenablog.com

ソーシャルメディアと連携する

Twitterのタイムラインの設置

nohack-nolife.hatenablog.com

FacebookのLike Boxの設置

gakuseikibun.hatenablog.jp

Google+ウィジェットの設置

gakuseikibun.hatenablog.jp

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

Milliard関連ページプラグイン

記事下に関連記事を入れるブログパーツ。とてもスタイリッシュでおしゃれに見えるので気に入ってます。スマホの記事下にも表示できるのでいいですよ。

f:id:takakin3324:20151124203803j:plain

Milliard関連ページプラグインについて | シスウ株式会社

あわせて読みたいG

関連記事を表示する方法としてこちらも有名です。

bulldra.hatenablog.com

シェアボタンをカスタマイズする

 デフォルトのシェアボタンを消しバイラルメディアっぽいシェアボタンに変更することができます。こちらの方が表示速度が速いので、好みに合わせて変えたらいいと思います。

www.yukihy.com

トップスクロールを設置する

当ブログでも右下に設置しているトップに戻ってくる追尾のボタンです。

f:id:takakin3324:20151125183435p:plain

①こちらのコードをまずフッターのどこかにコピペしてください。

CSSでデザインの調整を行います。 こちらは学生気分で使っているコードです。

これはこちらの記事を参考にしました。

nohack-nolife.hatenablog.com

Google Adsenseを設置する

基本的な設置の方法

affiliate-hatekun.hatenablog.com

記事中に設置する方法

最初の大見出しの直前に広告を挿入する方法です。はてブロのユーザーの多くは最初<h3>タグを使っていると思います。eq(0)が「最初」を意味し、eq(1)、eq(2)と数字を変えると広告位置が変わっていきます。

これはこちらの記事を参考にしました。

uxlayman.hatenablog.com

まとめ

他のブログとデザインが似通っていると読者もなかなかサイトを覚えてくれません。
他と差別化した印象を与えれば、読者の見たことあるリストに入りサイト内回遊率も上がりやすいと考えています。

ちなみにはてなの無料版はスマホのデザインはいじれないもののPC版はほとんど制限なくカスタマイズできるみたいです。

広告を非表示にする