HTML・CSS初心者が『はてなブログ』をカスタマイズする際にお世話になったサイトを勝手に紹介する
パソコンから閲覧されている方は、とうにお気づきだと思います。
ヘッダーを筆頭とするブログデザインをカスタマイズしました！いえーい！！
……いやいや、こんなことをしている場合ではないことは重々承知しています。パートナーに知られたら、きっと白い目で見られます。利益になる活動をしろ、さもなくば面接へ行け！！ と。実に耳が痛い。
しかし、カスタマイズには理由があります。それは、いずれ家で文字を書いて利益を得たいと考えているからです。ブログ飯じゃなくて良いんで、文字飯をモグモグしたいのです。その第一歩として、個性を出す為のカスタマイズ。大いなる意味しかない。
と、最初から最後まで純度100%のイヤラシイ理由での改造、後に本日の記事作成だったら良いのですが……現実は少し違います。
この記事を書くに至った現実の流れがコチラ。
単に見出しのデザインが気に入らない→じゃあカスタマイズすれば良いじゃない→改造方法を探したら、見出し以外にも色々弄れる事が発覚→しかもSEO的に優位そう&PV数アップの可能性も秘めてるっぽい→イイネ！ 早速改造だー！→タグ公開してる人達マジ神……紹介しよ……←イマココ
あ、アレ？ 割と高純度でイヤラシイ理由でした。束子。のうっかりさんです。
何はともあれ「お世話になりました、有難うございました」という意味半分、またカスタマイズする時に参考に出来るようにという意味半分で、勝手ですが紹介したいと思います。
※あくまでサイトの紹介です。やり方は各サイト先を参考にしてください。※
目次
ヘッダーの作成と変更
恐らく、このカスタマイズが一番簡単です。
まずこのサイトでヘッダー画像を作成します。
有料の素材もありますが、無料で使いやすい素材も豊富です。更に他のサイトからダウンロードした画像なども使用出来るので、使い勝手はかなり良いと思います。私はFacebook用のサイズで、全て無料素材を利用しました。
上のサイトで作った画像をダウンロード後、はてなブログのデザイン設定画面「カスタマイズ（上部アイコンの真ん中）」のヘッダー部分からアップデート。好みの配置を選んで設定したら、おしまいです。
ね？ 簡単でしょ？
「Follow」「RSS」ボタンの設置
Banguard (id:banguard9383)さんの「Banguardサイト」と、
tommy (id:you_tomita)さんの「you_tomitaの日記」から。
正直言ってこの2点、機能や利点に関してイマイチ理解していません。なんか、記事やブログをまとめて登録することが出来る便利な機能だとか……なんとか？多分設置しても損はありません。
「続きを読む」の変更
akiueo (id:akiueos)さんの「AIUEO Lab2」から。
「続きを読む」を利用しない人には無用かもしれませんが、使っている人は是非変えていただきたい。
やはり文字の「続きを読む」よりも、ボタン式にして目立たせた方が見栄え的にも集客的にも良いです。
このカスタマイズは検索すると沢山出てくるので、自分好みのデザインを探してみてください。
各種シェアボタンの設置
ゆきひー (id:ftmaccho)さんの「Yukihy Life」から。
オシャレなブログでは大体設置されてるシェアボタン。
特に付ける必要ないかな……と思っていたのですが、標準のシェアボタンがセンスない私好みではなかったので、取り入れました。
この機能の良いところは、オシャレなだけではありません。記事の頭につけることで、態々記事最下部まで行かずともシェアすることが可能です。特に、はてブの「あとで読む」を付ける人は楽なんじゃないかなと思います。
あとこれはオマケですが、例えばはてブされた時に「何人にブックマークされたか」が開いてすぐ分かるのでモチベーションが上がります。
見出しの変更
こちらもゆきひー (id:ftmaccho)さんの「Yukihy Life」から。
大本命の見出しカスタマイズ。
このカスタマイズに関しては、言うことないですね。行けば分かる、そしてやりたくなります。
パンくずリストの設置
池田仮名 (id:bulldra)さんの「太陽が眩しかったから」から。
リンク先にも記載されていますが、この機能はグーグル先生に「今ココにいるよ！」と知らせる為の機能です。
この機能は、SEO対策に打って付けです。
周知の事実ですが、ネットで検索した先が必ずトップページとは限りません。一昨日書かれた記事だったり、1年前に書かれた記事だった場合もあります。そんな時にこのパンくずリストがあれば、自分が今何のカテゴリーの、何処に分類された場所にいるのか一目でわかります。そして他の同カテゴリーの記事を読んだり、TOPページにもすぐに飛んでいけます。
この機能は記事が少なければ少ないほど導入しやすいと思うので、迷わず導入しましょう。
「あわせて読みたいG」の設置
こちらも池田仮名 (id:bulldra)さんの「太陽が眩しかったから」から。
これはとても良いです。いろいろなサイトで見かけて「コレってどうやるんだろう？」と常々思っていたのですが、やっと出会えました！
これもSEO対策の一つです。関連付けられた記事を表示し、「コレを読んだ人は、こんな記事も一緒に読んでるよ！」と案内してくれるのです。合わせて読んで貰えれば、自分のブログに長く引き止めることが可能になります。
事実、「あわせて読みたいG」を設置してみて、アクセス数と滞在時間が若干ですが増えたように感じます。
最後に
分かりきっていたことですが、スマホ向けのカスタマイズを反映させる為にはProにランクアップにしなければなりません。
よって、今回のカスタマイズはヘッダーを除いて、全てパソコン向けに設定されたものです。恐らく、見出しもシェアボタンも反映されてないんですよね……うーん、悔しい。
いずれProにしてやろうと、割と本気で考えています。
