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

きままりすと

気儘に言及するブログ

きままりすと

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にしてやろうと、割と本気で考えています。

 

忍者AdMax