空いた時間でブログを色々カスタマイズしてみた
最近は採用活動と研修準備で新しい記事を書く余裕がなかったので、記事を書く以外でブログを工夫してみようとふと思い立ち、色々やってみました。
まずは本質的なSEO対策として王道らしい目次とパンくずリストを設定してみた他、関連記事の自動生成とシェアボタンのデザイン変更にチャレンジ。本記事はその過程の紹介です。
はてなブログで目次を自動生成する
まずは目次の自動生成です。
はてなブログでは、
[:contents]
と書くと目次が自動で生成されます。
でもこれだと、昔の記事全てに手動で追加しなければならず大変なので今回は下記のように全ての記事に自動で目次が追加されるように設定しました。
といっても自力ではできないので、下記ブログを参考にしました。
基本的には上記のブログを参考にしてCSSとJavascriptを設定すればいけます。
私のブログでは見出しにh3を使っていたので、コピペしたあとにh2をh3に変更しました。
ぺろぺろっとコピペをいくつかするだけで本記事冒頭のような目次が全ての記事に追加されます。しかも目次をクリックするとにゅるーんと動く！
PC表示とスマホ表示のHTMLを別で設定している方は、スマホの方にもコピペすればOKです。
はてなブログでパンくずリストを設定する
続いて、パンくずリストを設定してみました。
パンくずリストが分からない方は下記サイトへ。
（引用）
パンくずリストとは、ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくするため、上位の階層となるWEBページを階層順にリストアップしてリンクを設置したリストのこと
要は、のようなやつです↓
いくつかやり方を紹介している記事がありましたが、今回は下記を参考にしました。
見た目はあまり変わらないけれど、SEOにじわりとでもきいてくれたら嬉しいなあ。
はてなブログで関連記事を自動生成
これはたくさんのやり方、見せ方があるみたいなのですが、見た目がコンパクトで好みだったのでサムネイル形式の関連記事が自動生成されるLinkWithinを使ってみました。
参考にしたのは下記の記事です。
LinkWithinのサイトで、メールアドレス、ブログのアドレスを入力し、Platform（はてなブログなら「other」）とWidth（横に何個表示させたいか）を選択すると、コードを表示してくれます。
表示されたコードを、「デザイン」→「カスタマイズ」→「記事」→「記事下」の入力欄にコピペするだけでOK！（linkwithin_textは好みのテキストに変更しましょう）
下記のように関連記事が自動で表示されるようになります。
高まれ！回遊率！！
シェアボタンを今っぽいデザインに
最後にシェアボタンについて。
はてなブログのデフォルトのシェアボタンはシンプルで嫌いじゃないのですが、やたら重いのとあまり目立たないので、今っぽいデザインに変更してみました。
例によって下記の記事を参考にしました。
↑の記事にしたがってコピペ＆コピペするだけで、下記のように今っぽいデザインに！
【変更前（やたら重い）】
【変更後】
拡散してくれ、ソーシャル！！
以上、地味に色々変更してみた報告でした。完全に人事ブログではなくなってきてますね。
