ブログデザイン備忘録 ～ はてなブログテーマの自作4
Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回はPC版のデザインについて仕上がりつつあるので紹介していきたい。
1. ブログトップ
ブログトップ・全体のデザインは以下のようにしている。Boilerplateからの主要なもの変更点は、2カラムデザインだが表示領域幅を右側に増やしている。サイドメニューに関しては、本ブログを踏襲したCSSのコードを追加して装飾を行った。目次についても同様に装飾をおこなったが、目次領域の見出しを目次、もくじ、Indexなどいろいろ考えられるのでデフォルトでは入れないことにして、テーマ使用時にCSSに追記することを想定している。 ナビゲーションバーについては、HTMLを記述するだけで表示できるようにしており、またマウスオーバーするとサブメニューがあらわれる仕組みになっている。
2. 見出し・戻るボタン
見出しについてはh2～h4までデザインを行った。h1は記事タイトルに使われるので、記事内の見出しとしてはh2以降を使うことが多いと思う。マークダウンで##などを使用すれば自動的に以下のような見出し装飾されるようになっている。戻るボタンに関してはjQueryの読み込み、JavaScriptの記入をすればページ上に表示されるようになっている。
3. 引用のデザイン
引用はSmoothベースの背景色・アイコンとは異なる新たなデザインを以下のように行った。リストに関しては特に変更していない。
4. コード・表のデザイン
コードについてはBoilerplateのデフォルトだと灰色だが、黒（実際には#222222）に変更した。表については本ブログのデザインを踏襲している。
5. フッター
本ブログではフッターにもリンクなどを表示しているが、トップやサイドメニューのリンクでも十分に機能しているので、テーマとしてはシンプルにバックグラウンドのみを追加するということにした。
6. 今後
スマホのレスポンシブや様々な画面サイズに対するレイアウト対応、ダークモード対応を行う予定。一度完成したら、はてなにテンプレートを非公開で登録して、カスタマイズのテストなども行わなければならない。
