Meiryo’s blog

やってみて詰まったことを備忘録として残すブログ

【初心者】はてなブログをはじめてすぐにやっておけばよかったことと行ったカスタマイズ 

つい先日、ブログのデザイン等を
いろいろカスタマイズしたのですが
終えた後に過去の記事を全部見直すことになりました

早くやっておけば楽だったのに・・・
ということがいくつもあったので
新しく初める方が
同じことにならないようメモを残しておきます。

URLはデフォルトではなくカスタムURLを使う

※既に大量のアクセスがある記事の場合は
URLの変更しないほうが良いかもです。

記事のURLはデフォルトのより
カスタムURLの方が良いということを知り、
過去記事のURLを全てカスタムURLに変更したのですが
これが後処理も含めて結構めんどくさかったです。

過去記事を変更したことにより起こったことと
対処法、またなぜカスタムURLが良いのかは
下記の記事にまとめましたので気になられた方は
ご一読ください。
【はてなブログ】過去記事をカスタムURLにしたらやらなければいけないこと - meimaru’s blog

この作業が発生しないよう、
最初からURLはカスタムURLにしておくことを
おすすめします。

見出しの変更とルールを考えとく

見出しを変更した時の話は
下記の記事にまとめました。
【はてなブログ】minimalismの見出しのカスタマイズ - meimaru’s blog

当ブログの本文では
見出しのタグは今の所h2、h3だけ使っています。
h1はどうしたかというと
タイトルでもう使われているので
使わないようにしました。

f:id:meimaru:20210416103949p:plain:w600

それぞれ使った時の大きさと装飾は
下記画像の通りです。

f:id:meimaru:20210416104807p:plain

で、何をやっておけばよかったかというと
見出しタグの使い方のルール決めです。

以前はルール決めなどしていなかったので
記事ごとに見出しの大きさがバラバラで
h1とh2だけ使っている記事もあれば
h2とh3だけ、h3とh4だけ使っている記事もあり
統一性がありませんでした。

そんな統一性の無い中、
ふと見出しを変えたいと思って変えたのですが

過去記事を全部見て見出しを揃える作業が発生しました

具体的に言うと過去記事から
h2とh3以外を使っているところを探し、
書き換えるということを40記事分やりました。
こんな作業をしなくても良いように
見出しタグの使い方のルールを考えておいたほうが良いです

コードブロックの言語指定

行間とコードブロックの調整を行った時の話。
調整した内容は下記のページでまとめています。
【はてなブログ】minimalismの行間とコードブロックのカスタマイズ - meimaru’s blog

この調整のときに
コードブロックで言語を指定すると
シンタックスハイライト(色付きになる)が使える

ことに気が付きました。
シンタックスハイライトを使うと
どう変わるかと言うと

/* ### ヘッダーの背景色 ### */
#blog-title{
  background: #33CC99;
}
/* ### ヘッダーの背景色 ### */
#blog-title{
  background: #33CC99;
}

こう変わります。
シンタックスハイライトを使う方法ですが
Markdownだと
コードブロックの```の横に言語を書くだけです。

f:id:meimaru:20210415200511p:plain

このことに気づいたので、
コードを書いた過去記事を探し、
それらに言語を書きに行く

という作業が出ました。
コードブロックの言語指定は
やっておきましょう。

終わりに

記事はこれで終わりなのですが
また見直ししなきゃいけないことが
発生したら追記します。
(できればもう発生してほしくない)