hacogaki

ウェブとアニメとマンガと小説。ときどき私事。

MENU

必ず読んでおきたい!はてなブログをカスタマイズする際に超参考になる記事まとめ

f:id:miyabi41:20170517162338j:plain

  • この記事は随時更新しております
  • 独自ドメインの登録・設定方法を追加(2017/5/16)

おはばんにちわ、みやび(@miyabi_941)です。

このはてなブログもそれなりにカスタマイズしてきましたが、カスタマイズする際に多くの先人はてなブロガー様の知恵をお借りしています。

今回はそんな先人様に感謝の意も込めつつ、はてなブログカスタマイズの超参考になる記事をまとめました。

部分別でまとめているので、自分がカスタムしたい箇所から記事を探してみてください。

もくじ

初期設定

00. 最低限やっておくこと

ヘッダー部分

01. グローバルナビゲーション
02. ヘッダー画像

サイドバー部分

03. バナー画像を設置
04. Twitterウィジェット(タイムライン)を設置
05. FacebookのLikeBoxを設置
06. Amazonランキングを設置
07. はてなブックマーク人気エントリーを設置
08. ブログカードを設置
09. SNSフォローボタンを設置
10. 一番下にあるモジュールを固定

記事内

11. 見出しデザイン
12. 合わせて読みたい
13. シェアボタン・SNSボタン

広告設定(Pro向け)

14. GoogleAdsense設定

ドメイン設定(Pro向け)

15. 独自ドメインの登録・設定

スマホサイト

16. スマホデザインをコピペでおしゃれに
17. 不要な部分を削除してスッキリと

その他やっておいた方がいいカスタマイズ

18. パンくずリストの設置
19. トップスクロール(トップへ戻るボタン)の設置

初期設定

00. 最低限やっておくべきこと

最近はてなブログを始めた方は次の記事を必ず読んで最低限の設定をしておこう。
長く続けているブロガーの方も一度設定を見直してみてもいいかもしれない。

ヘッダー部分

ヘッダー部分はファーストビュー(ユーザーがサイトを訪問した際に最初に目に留まる範囲)になるので、なるべく目を引くデザインにしたい。

01.グローバルナビゲーション

グロナビはブログの記事がある程度溜まってくると必要性が出てくると思う。
ユーザーの利便性もあるが、なにより他ブログとの差別化という点でも設置しておきたい。

スマホサイト用のグロナビはこちらの記事が参考になります。

htmlとcssの知識がある人は次の記事を参考に、ワンランク上のグローバルナビを実装してみるのもいいかもしれない。



02.ヘッダー画像

手間なくブログの見栄えを変えるには、ヘッダー画像の変更が一番手っ取り早い。

サイドバー部分

03.サイドバーにバナー画像を設置

複数のブログを運営してる人なんかは、一つのブログで他のブログへの入り口を作っておきたいもの。
サイドバーに別サイトへのバナー画像を設置するのがおすすめです。



04.サイドバーにTwitterウィジェット(タイムライン)を設置

Twitterでたくさん呟くブロガーさんなら、自分のタイムラインをサイドバーに表示させてみてもいいかもしれません。



05.サイドバーにFacebookのLikeBoxを設置

ブログ用のFacebookページを作成している方はサイドバーにLikeBoxを設置しておきましょう。
次の記事ではFacebookページの作り方から解説してあります。



06.サイドバーにAmazonのランキングを設置

サイドバーでAmazon商品を紹介したい人はこちらを参考に。

amazonは自作画像を使用した広告が認められています。こちらの記事を参考に自作してみるのもおもしろいかも。


07.はてなブックマーク人気エントリーを設置

はてブされた記事がある程度増えてきたら、それらをアピールしときましょう。
人気記事のアピールは直帰率の改善に繋がります。

こちらの記事ではブログパーツの設置方法も記載されてます。


08.サイドバーにブログカードを設置

ブログカードをサイドバーに設置することも可能です。


09.サイドバーにSNSのフォローボタンを設置

SNSをよく活用する方は是非設置しておこう。
次の記事に設置方法が記載されています。(サイドバーへの設置は記事の中頃)


10.サイドバーの一番下にあるモジュールを固定する

PCでスクロールしたときに追尾してくる例のアレです。
僕は関連記事を固定しています。

記事内

11.見出しデザイン

見出しのデザインは選んだテーマによって最適なデザインが施されてるから必須ではない。
ただここを変えるだけでブログ全体の印象が変わるので、デザインに飽きた人は少しいじってみるといいかも。

http://www.travelinforomania.com/entry/2014/07/05/232722



12.合わせて読みたい

記事を読んだあとに同カテゴリーに関する記事をいくつか表示してくれる例のやつです。
これはかなり重要。必ず設置しておきたい。

多くのはてなブロガーさんが使ってるのが太陽がまぶしかったからさんの作成した「あわせて読みたいG」じゃないでしょうか。

より細かいカスタマイズは以下の記事が参考になります。


「あわせて読みたいG」とは別で、milliardというプラグインを使用する方法もあります。
僕は現在こちらを使用中。

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

デザインの変更については次の記事を参考にしてます。ゆきひーさんいつもありがとうございます。



13.シェアボタン・SNSボタン

シェアボタンもオシャンティに。
思いのほかブログの印象が変わります。

こちらの記事を参考に僕のブログにも使用させていただいています。
ただおしゃれになるだけじゃなくて、cssで組んであるので表示が早いというのも魅力。

広告設定

14.GoogleAdsense設定

広告設定については、はてなブログProの方向け。
小難しいイメージありますが、やってみると簡単です。
以下の記事が参考になります。

また広告はただ設置するだけじゃなく、設置する「場所」も重要です。
次の記事が参考になります。

ドメイン設定

15.独自ドメインの登録・設定

こちらもはてなブログProに登録している人向けです。
ハードル高いように思われがちですが、手順通りにやれば意外と簡単です。
登録から設定までは次の記事が参考になります。

設定後にやることが結構多いです。
以下の項目を一つひとつチェックしていきましょう。

  • Googleアドセンス・Amazonアソシエイトの更新
  • その他各種ASPの更新
  • Googleアナリティクスの更新
  • Google Search Consoleの更新
  • FeedlyのURL変更
  • グローバルナビゲーションのURL変更
  • その他関連ページやリンクの確認

Google Search Console等の更新は次の記事を参考に。

http://www.humbert-tomoyuki.com/entry/hatena-domain:embed:

スマホサイト

16.スマホデザインをコピペでおしゃれに

「モバイルファースト」なんて言われてる時代ですから、スマホサイトのユーザビリティは重視しましょう。
いろんな人が紹介してますが、次の記事めちゃくちゃ参考になります。



17.不要な部分を削除してスッキリと

スマホサイトは追尾ヘッダーとか、最下部のダッシュボードとか結構邪魔な部分が多い。
次の記事で部分ごとに削除できるコードが紹介されています。
こういう記事探していたので大変助かりました。

その他やっておいた方がいいカスタマイズ

18. パンくずリストを設置する

設置には少し時間がかかりますが、SEO的には設置されてた方がいいパンくずリスト。
設置を検討の方は次の記事が参考になります。



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

あるかないかで言えば、あった方がいい。
手順難しくないので次の記事を参考に是非。

まとめ

以上、必ず読んでおきたい!はてなブログをカスタマイズする際に超参考になる記事まとめでした!

自分のブログを好みにカスタマイズしていくのも、ブログを運営する上での一つの楽しみだと思います。

みなさんも是非ここで紹介した記事を参考に、世界に一つだけのオンリーワンブログを作り上げていきましょう!(それっぽく締めた)

ではでは。