ブログデザイン変更メモ

今回、また少しブログのデザインをいじったので、さらっと(?)メモ。

タグとパーマリンク追加

わからないことがあって検索してる時に、その記事のタグから更に関連情報を拾うことがあります。が、自分のサイトでは、それができないことに気づきました。ということで、タグを記事の下部に追加しました。今は記事数が少ないので、あまり役に立たないのですが、後々便利になっていくと信じます。

もう一つ、ページ下部にパーマリンクをつけてみました。これは、ページ下部にタグだけだと締まりが悪かったので、とりあえずブログっぽくなるかなと置いてみました。もしかしたら、いつの間にか無くなっているかもしれません。

アイコンフォント増やした

前回ブログのデザインを変更した際、検索フォームに飛ぶためのボタンを右上に設置したのですが、そこにテキストと併記するかたちで、虫眼鏡アイコンを置きました。せっかく使い方がわかったのだからと欲が出て、新たに2箇所アイコンフォントを置きました。

1箇所は、記事上部の日付の部分です。カレンダーのアイコンフォントを設置しました。このブログでは、記事タイトルに独自の数字を入れていて、数字ばかりでごちゃっとしてしまっているので、メリハリをつける意味で置きました。

もう1箇所は、上記したタグの部分です。このアイコンフォントがあると、タグであるということがとてもわかりやすくなると思います。

アイコンフォントに関しては、これからもう少し改良する予定があって、それはアクセシビリティに関する改善です。装飾をしたためにアクセシブルでない箇所が出てきてしまってはいけないので、こちらのサイトを参考にさせていただいた上で改善する予定です↓

run_prettify.js を prettify.js に変更

前回のブログデザイン変更時、ソースコードのハイライトツールを Syntax Highlighter から、 Google Code Prettify に変更しました。その際、勘違いして run_prettify.js を読み込んでいるのに、prettify.css も読み込んでしまっていました(prettify.css_prettify.scss にして、style.css@import していました)。

run_prettify.jsYou can load the JavaScript and CSS for prettify via one URL とあるように、単独で JS と CSS を読み込めます。私の環境では、prettify.css を別途読み込んでおり、CSS が重複してしまうので、prettify.js に変更しました。

今後実施を考えているデザイン変更

  • リンク文字色の変更(前回記事参照
  • アイコンフォントのラベル付け
  • 記事タイトル一覧ページ作成