はじめに
ブログを初めて約4年。本業の仕事が忙しく更新がかなり不定期でブログデザインもほぼ初期設定のままでした。今回は休みを丸１日使ってはてなブログでデザイン・仕様をどのように変えたか？の個人的な備忘録メモを7つほど書きます。
今使っているはてなブログのテーマは？
改めて今使っているはてなブログのテーマを再確認。使用しているテーマは「DUDE」です。はてなブログを開設した2016年当初、オシャレなデザインに惹かれ今日まで使用し続けています。シンプルで使いやすいです。欠点はスマホなどレスポンシブに対応していないことでしょうか？
①広告などを中央揃えにする
「Random Life Blog」さんの記事を参考にしました。
これまでブログトップページ下の広告記事が微妙にずれていたのですが、
広告を中央揃えにするコードをデザインCSSに貼るだけで改善されました。
②読了時間（この記事は何分で読めます）
こちらも「Random Life Blog」さんの記事を参考にしました。
コードをはてなブログの設定画面の左メニューの【デザイン】、スパナマークの【カスタマイズ】、【記事】、【記事上】の記入領域にコピペするだけです。
<script type=”text/javascript“>
addEventListener(‘DOMContentLoaded’, function() {
var wpm = 500;
var length = $(‘.entry-content’).text().trim().replace(/[\n\r]/g,”).length;
var message = ‘<p style=”font-size: 80%; color: #999999; text-align: right;”>この記事は約’+ Math.ceil(length/wpm) +’分で読めます。</p>’;
$(‘.entry-content’).prepend(message);
}, false);
</script>
③上に戻るボタンを導入
正直そこまで必要性はないかもしれませんが導入してみました。
④グローバルメニューを導入
「Life is bitter」さんのブログ記事を参考にしました。
2016年に書かれた記事で不安でしたがとても参考になりました。参考にした理由として同じテーマ「DUDE」を使用していたからです。
他の方のオシャレでカラフルなグローバルメニューも参考にしようとしましたが、コードを借りても自分のブログでは上手く反映されないことが多く導入を諦めました。
⑤太字・斜線ボタンでラインマーカーを引く
他の人のはてなブログを見ていると、蛍光ペンで線を引いたような、、、これどうやっているのだろう？とずっと疑問だったのですが、無事に導入できました。今回は「ずぼらな夫婦の家づくり〜ウイザースホーム〜」さんの記事を参考にしました。
斜線マーカーに関する記事は他にも書いている人が多くどれを参考にしようか迷ったのですが、設定＞詳細設定＞headに要素を追加、ととても簡単にできました。iPhoneにも対応していることがありがたかったです。
⑥更新日時表示機能を追加
これが一番時間がかかりました。
ブログ記事の作成日の隣に更新日を表示する、、、
ここまでコードを貼るだけという簡単作業だったのですが、
「GoogleSearch Console」に登録して「サイトマップを送信する」と、さらには更新日のアイコンを表示するために「Font Awesome」のアイコンフォントを実装するなど、初めてのことが多くかなり手こずりました。
参考にしたのは「redoブログ」さんの記事です。懇切丁寧で非常に助かりました。
⑦カテゴリーを階層化
「とよブロ」さんの記事を参考にしました。
ブログを始めた当初はカテゴリーに分類する余裕はなかったのですが、
記事が増えてきてカテゴリーをつけ始めるとどんどんごちゃごちゃになっていくという。カテゴリーを階層化にすることで、見やすく整理されました。
さいごに
休日に軽い気持ちで、はてなブログをいじろう！と実際に取り掛かったら休みが丸一日消えて焦りました。ですがお陰様で自分のブログがだいぶ進化したので頑張って色々変更・改善した意味がありました。先駆者の方々には感謝です。ありがとうございました！
