このブログに「ブログカスタマイズ」という小カテゴリを作っておきながら、カスタマイズそのものに関することを書いてなかったなぁ…と思ったので、唐突ですがカスタマイズする上で参考にした記事を色々紹介していこうと思います。
ヘッダ・フッター周り
グローバルメニュー
PC版
以前は「Handwriting」というテーマを使っていましたが、「Yumekawa」が可愛かったので変更。それに伴い、グローバルメニューも差し替えました。
以前はこちらのコードを使っていましたが、
今はこちらを使っています。
スマホ版
スマホ版はこちらを参照。同記事内のカテゴリ2列バージョンを取り入れています。
ヘッダー下のおすすめ記事
他の人のブログでよく見るおすすめ記事枠。初めはファーストビューを圧迫するからなぁ…と避けていたものの、やっぱ設置したい！と思い立ち設置。
Yumekawaの作者さんのブログを参考にさせていただきました。
カテゴリ周り
カテゴリリストの階層表示
はてなブログの不便な点、パンくずの階層化が機能としてついていません。
それを「親カテゴリ-子カテゴリ」というカテゴリ名を設定することで擬似的に階層化させる方法を取り入れ、さらにPC版のサイドバーにはカテゴリリストも階層表示できるようにしました。
以下の記事がとても参考になりました。
ただ、導入から数年後の2020年4月にGoogleのdata-vocabulary.orgスキーマのサポートが終了*1してしまったため、現在Googleに階層化パンくずが正しく認識されていないかもです…(T_T)
（上記事内のスクリプトはSchema.orgに対応してるらしい？ので、あとで修正しないと。。）修正しました
カテゴリをタグっぽく表示（スマホ版）
PC版は階層構造がよかったのですが、スマホ版では長くなりすぎるため、タグっぽく横並びに見せたくてこちらの記事を参考にしました。
記事周り
更新日自動表示
記事の投稿日はデフォルトで表示されますが、更新日はカスタマイズしないと表示されません。
投稿日しか表示されないと、昔書いた記事のリライトをしても日付が変わらないので、パッと見新しい情報かどうか見分けがつきにくいです。そこで、以下の記事を参考に更新日を表示させてみました。
しばらくはこの方法で問題なかったのですが、ある日急に返ってくる日付の表示形式が変わったため、以下記事のような追加修正を入れました。
見出しのデザイン
特にスマホ版はデフォルトだと見出しが殺風景で読みやすさに欠けます。このようなバリエーションの中から好きなものを選びました。
大見出しをh3からh2へ
何かのきっかけで、はてなブログの大見出しはh3になることを知りました。
それ以来大見出しはh2で書く*2ようにしていますが、ブログを初めて既に1年以上が経っており、これまでの記事をいちいち直すのはしんどい…そんなとき、jQueryで動的に書き換える方法を取り入れました。
こちらの記事を参考にしました。確かにh1、h3、h4、h5って…なんか気持ち悪いんですよね。。
記事内広告自動挿入
Googleアドセンスに合格したらいよいよ広告を挿入していきますが、記事を書きながら記事内広告を毎度毎度追加するのは面倒すぎです。
でもこれも、調べてみたら自動化している例がちらほら。先人の知恵はありがたいです…！
番外編︰過去記事bot
ブログカスタマイズとは少し違いますが、Twitterで定期的に過去記事をつぶやくbotも設置しています。こんな感じです。
twitter.com🤖<ｶｺｷｼﾞ!! #過去記事bot #はてなブログ https://t.co/zvGoUSjF4c
— みるく@ゆるりとねっと。の管理人 (@yururitonet) 2021年5月3日
🕘2019/11/02 12:13 投稿
🔃2021/01/07 13:51 更新
📰はてなブログのカスタマイズ履歴（HTML/CSS/JavaScript）をGitHubで管理する
こちらの記事を参考にさせていただきました。
まとめ
このブログで取り入れているカスタマイズの参考記事を紹介しました。設置当時から時が経ち閉鎖・移設したブログもありましたが、できる限りみつけたつもりです。
カスタマイズには、はてなブログProの契約が必要なものも多いのでご注意ください。特にスマホのカスタマイズするならPro契約は必須だと思います。
*2:Markdown使いなのでそのへんは簡単
