はてなブログのデザインを変更したので、メモ書き程度にやったことを記録しておく。
ちょうどアクセスが落ち着いたタイミングで、ブログのデザインを変更しました。
今回の記事では、デザインを変更するにあたってやったことをメモ書き程度に記していきます。
ざっくりと、やったことまとめ。
ブログデザインを変更した／グローバルナビを設置した
はてなの公式デザインである「Report」から、グローバルナビが設置できて、なおかつシンプルだけどオシャレなデザインに変えたくて、シロマティ (id:shiromatakumi) さんの「Brooklyn」を選択しました。
cssのカスタマイズも容易にできるということで、タイトルロゴの変更なども後々やっていく予定です。
ちなみに、グローバルナビもBrooklynへの変更と同時に設置しました。ページを下にスクロールしても追従してくるのが良い感じです。
シェアボタンを変更した
いろいろと試してみましたが、最終的にユーザビリティよりブログデザインに合っているものを選択しました。設置したのは、これまたシロマティ (id:shiromatakumi)さんのデザイン。
ユーザビリティを意識して設置するなら、shun (id:shun_prog0929)さんのこちらのボタンがおすすめ。
スマホ版の方もシロマティさんのデザインを拝借しようとしたんですが、htmlをコピペしても、なぜかテキストのみ箇条書きに表示されるだけでしたので、スマホ版は別のデザインを採用することにしました。選択したのはだいぱんまん (id:donchan922)さんのデザイン。
こちらはコピペだけで設置に成功したので、そのまま使わせてもらっています。
「読者になる」ボタンを変更した
「読者になる」ボタンもシロマティ (id:shiromatakumi) さんのデザインを拝借。ブログデザインがモノトーン、「読者になる」ボタンもモノトーンだと埋もれてしまう感じだったので、目立つようにあえてレッドにしました。
このhtmlをスマホ版にもコピペしてみましたが、シェアボタン同様、テキストのみ表示されるので、応急処置としてはてなブログ公式の「読者になる」ボタンを設置しました。
設置方法は、
PC版のダッシュボード＞設定＞詳細設定＞読者になるボタン のHTMLコードをコピー。
PC版のダッシュボード＞デザイン＞スマートフォンタブ（スマホのアイコン）＞記事＞記事下にペースト。
これでデフォルトの「読者になる」ボタンがスマホ版の記事下に設置されました。
サイドバーの「ツイート」をスクロールバー式にした
サイドバーに埋め込んでいる「ツイート」を表示するウィジェットが、これまでは最新のツイートをそのまま表示する形式にしていたので、見た目重視でスクロールバー付きの形式に変更しました。
スクロールバー付きのデザインの設定はてつ (id:mutant-tetsu) さんの方法を参考にしました。
関連記事の表示方法を変更した
やぎぺー（八木仁平）さんのやぎろぐ にまとめ記事があったので、そちらを参考にさせていただきました。
一番スタイリッシュでコピペでかんたん設置可能ということで、ぼくが選んだのはこちらのデザイン。
はてなブログに設置する方法はこちらです。
Milliard関連ページをはてなブログで設定する方法 | シスウ株式会社
以上が、今回ブログのデザインを変更するにあたってやったことです。
参考にさせていただいたはてなブロガーのみなさまには、この場を借りて御礼申し上げます。
