このブログも10記事ちょっと(正確に数えると13記事)更新してきたのでブログデザインもリニューアルします。
記事カテゴリの見直し
まずは現状のカテゴリ分けの状態を見直しました。
以前までカテゴリの内容によっては
プログラミング∈JavaScript
のように親子関係ができるものがあったりしたのでその点を改良します。とは言いつつも考え方を以下のように変えるだけです。
- 3DCG
- MAYA
- glTf
- プログラミング
- JavaSript
- デザイン
- 日記
- このブログについて
- web開発
こんな感じの構成にしようかなと思います。(2019/04/29現在)
メインカテゴリを「3DCG」「プログラミング」「デザイン」「日記」に分けて、その中で細分化する方向性です。「web開発」などはメインカテゴリが違っていても似た内容があったときにくくるための補助的なカテゴリにします。
そして人力で過去の記事を再分類・・・
まあ10個程度なのでそんなに時間はかかりませんでした。
ブログの装飾:テーマの変更
実はこのブログのオリジナルテーマを制作中なんですが完成までに時間がかかりそうですし、作り上げても既存のテーマとあまり変わらなさそうだったのでとりあえず rokuzeudon様のUnderShirtを利用しました。全体的にシンプルなテーマでいいですよね。
こんな感じになりました。(てか今までのデザインCSSに書いてあった情報が全部上書きで消されたんですが・・・)
あと少しだけ手を加えます。
ブログの装飾:ヘッダー部分にグローバルメニューを設置
ヘッダー部分に
- 3DCG
- プログラミング
- デザイン
- 日記
のメニューを置きましょう
設定 > カスタマイズ > ヘッダ > タイトル下
に以下のHTMLを記述しました。
gist8e24d0ac0ae8c7a7e3b4d49363343d0f
はい、これで下図のようなメニューができました。
勿論レスポンシブにも対応してます。
おそらくスマホではこのような形で表示されると思います。
ブログの装飾:大カテゴリのタグのスタイルをカスタム
次に大カテゴリのみの表示を変更します。
実は記事内に見えているカテゴリ表示の要素、HTML上ではそれぞれにクラスが割り当てられてるんですよね。
これを利用して特定のカテゴリのみ別の色になるよう設定します。
gistc1946262050dc4cddf5ae33c52926841
こんな感じで変わります。
一覧画面もこの通り、メインカテゴリとサブカテゴリの区別も明瞭です。
ちなみにこの変更した色は過去記事で制作した自身のカラーテーマに基づいています。
とりあえずは一通りできました。かなりいい感じになった気がします。
もう少し余裕ができたら1からオリジナルのブログテーマを完成させたいですね。