はてなブログってここまでやれるんだね（ブログのホームページ化）

今まで無料版でブログを付けていたけど、この度Proにして制約から解き放たれて自由にカスタムしてみたら、驚くほどブログも自由にサイト構築できるね。ブログがホームページ化している。今回、色々頑張って無料のはてなブログから1日でここまでこれたという感動と驚きを日記にしてみた。

何もかもが変わりすぎて（笑）

もちろん見た目がかなり変わったのだが、それ以上にユーザー体験がよくなった。はてなブログProにして全機能が使えるようになったから色々カスタムできるようになったというのが大きい。変わったところを簡単にご紹介。

レスポンシブルデザインによるスマホ対応

今まで公式テーマを使っていたのでスマホでの見え方が素っ気なかった。だが今は違う。レスポンシブルデザインを採用したのでPCでもスマホでもタブレットでもだいたい同じデザインだ。

小さなiPhoneSEのスクショ。これでなんだか垢抜けた気がする（笑）

メニューバーの実装

今までは素っ気なかったが、これからはメニューバーに相当するカテゴリを配置出来る。

背景を濃くしつつも半透明で読みやすく

しかも一工夫してメニューバーの背景は半透明だ（笑）テンプレ導入ならフラットカラーでおしまいだが、それではつまらないと思ったのでちょっと調べて実装。こういう所で既存のテンプレユーザーと差別化できるはずだ。

スマホでも対応。スマホではたたみ込まれているがワンタップで開く。

サイドバーの大幅強化

サイドバーのタブ化

サイドバーが今まではとても長くなっていたのだが、このようにタブにすることで縦長を回避。これは後から出てくるホバー目次のための対策。

目次が画面スライドに付いてくる

PC限定だが今回の最大の目玉はこの機能。記事を読み進めてスライドさせていくと下から現れた目次が天井に張り付く。これで長文になってもいつでも目次が目に入るから便利。しかも読み進めると薄いグレーのカーソルが自動的に移動してくれる優れ物。このためにサイドバーの長さを縮めるべくタブ化したわけだ。

アーカイブカレンダーのリンクをカラー化

これ、最近のシンプルなテンプレートではだいたい地の文字カラーと一緒。カレンダーだとアンダーラインがなければもはやいつ更新したのかわからない。ここをカラー化することに成功。たったこれだけのためにCSSの勉強をするハメになるとは。でも満足（笑）

TOPに戻るボタンの実装

画面右下に浮いている半透明なボタン。TOPに戻るボタン。ついでにHOMEボタンも。これもいくつか候補があったのだが、大きさが丁度よくてHOMEボタンも可愛かったのでこれを採用。調べている最中にはやたらとばかでかいアイコンがあったりと首をかしげた。やはり誰にとっても使いやすい大きさってのはあると思うんだよね。せっかく世に放つならそういう所に最後の一工夫があるだけで拡散力が違うと思うのだ。

ここまでで実装した機能は全て無料でweb上から得られる知識で作れる。はてなブログは知名度が高いから沢山情報がある。

古い情報に気を付けて

今回ハマったのがJQueryとhttpsだ。JQueryのバージョンが古い時期の記事も多いので、そこの参照リンクは最新のVer.のリンクにしておきたい。
今回のブログ大改造では、CSSやHTMLの知識を得ながらの作業だったので疲れた。本当はまだまだ色んな所をいじりたいし、色も変えたい。だが今のところ、カレンダーのリンクカラー化だったり、見出し類がそこそこ強調されるデザインになっているから、今はこれ以上深追いせずにOKとすることにした。リンクにはアンダーラインがないがカラーが分けられていて一目瞭然なのでよしとする。

他にもリンクカラーの統一だとか細かいことを言うときりがないが、とりあえずは機能しているしよしとする。色味に関してはTOPの画像のメインカラーを変えると全部調整し直しになるから、今のところは暫定的に青緑系になっていればよしとする。明日以降で気力があったら直すかも知れない。今日はもう無理、疲れた。

Zbrushやモデリングと全く関係ないところで時間が取られたが、今後の情報発信のベースとなるところなので今固められてよかった。満足。

雑感

アフィリエイトなどのマネタイズについては、これはもう本を買ってまとまった知識を得てから手を付けたほうがよさそうだ。webではGoogleアドセンスで何度も落ちたなんて話もあるし、ちょっと気を付けたい。一方で、アフィリエイトサイトみたいに広告を貼りまくればいいというものでもない。このサイトの質が落ちてしまうからだ。Amazonアソシエイトあたりで押さえた方がいいのかな？なんて思っている。

何にしてもユーザービリティーの高いブログサイトができた。今までとは全然違って、しっかりした感じが出て嬉しい。手抜きしてよく知られたテンプレートの色変え程度で済まそうかと思ったけど、気に入ったテーマに、自分好みの「自分が本当にそうあって欲しい」という部分をカスタマイズで導入できたことに達成感。そしてホバー目次の導入という機能拡張までできたのだから文句なし！

やればできるもんだね。

あとはこれからも良質な情報を細長く書き続けていくだけだ。Zbrushネタは沢山あるし、発見も常にある。楽しんでモデリングするだけだ。プラグインも作りたい。アイディアのストックはまだまだある。、既存のマイナーバグフィックスもしたいしね。やれることが沢山あって嬉しいなぁ。

（追記）関連記事のカスタマイズとシェアボタンの設置

ごく普通に。シェアボタンは正直要らない気もしたけど、設置しておく分には困らないのでコンパクトなデザインのものを。
関連動画は純正をやめて外部サービスのMilliardを利用してみた。というのも純正だと、また「縦に長くなる」からだ。タイルで横方向も生かして欲しい。

参考サイトの倉庫

はてなブログのクラスとIDが重要

これが分からないと何もカスタムできない。とても重要なのでご紹介。
はてなブログのHTML構造（idとクラス）一覧図 - Plain

はてなブログのidとclassのツリーと図解を作ってみた - cBlog

他の便利な情報など

（順不同）
スライドする目次 https://life-alright.com/entry/mokuji_sidebar

https://kurokinomizuiwa.hatenablog.com/entry/2018/11/19/hatena-blog-return-sidebar-follow-contents

テンプレートとカスタマイズ情報 カスタマイズ（Naked） カテゴリーの記事一覧 - Theme Naked Blog

http://www.yukihy.com/entry/all-blog-customize

サイドバーのリンクカラーを変える http://brcxy.hatenablog.jp/entry/2016/06/21/225212

今回の創作活動は約30分（累積 約856時間）
（256回目のブログ更新）

筆者はAmazonアソシエイト・プログラムに参加しています。（AmazonアソシエイトとはAmazon.co.jpの商品を宣伝し所定の条件を満たすことで紹介料をAmazon様から頂けるという大変ありがたい仕組みのこと。）
以下のリンクを経由してAmazonで何かを買うと1～3％ほどのお小遣いが私に寄付されます（笑）

Amazonギフト券 Eメールタイプ - Amazonベーシック