池の鯉も大海を知らず

プログラミングとか作品制作とか

10記事ちょっと書いたしブログ装飾リニューアル

f:id:izumi_ikezaki:20190430063356p:plain



このブログも10記事ちょっと(正確に数えると13記事)更新してきたのでブログデザインもリニューアルします。

記事カテゴリの見直し

まずは現状のカテゴリ分けの状態を見直しました。

以前までカテゴリの内容によっては

プログラミング∈JavaScript

のように親子関係ができるものがあったりしたのでその点を改良します。とは言いつつも考え方を以下のように変えるだけです。

 

  • 3DCG
    • MAYA
    • glTf
  • プログラミング
    • JavaSript
  • デザイン
  • 日記
  • このブログについて
  • web開発

こんな感じの構成にしようかなと思います。(2019/04/29現在)

メインカテゴリを「3DCG」「プログラミング」「デザイン」「日記」に分けて、その中で細分化する方向性です。「web開発」などはメインカテゴリが違っていても似た内容があったときにくくるための補助的なカテゴリにします。

 

そして人力で過去の記事を再分類・・・

まあ10個程度なのでそんなに時間はかかりませんでした。

ブログの装飾:テーマの変更

実はこのブログのオリジナルテーマを制作中なんですが完成までに時間がかかりそうですし、作り上げても既存のテーマとあまり変わらなさそうだったのでとりあえず rokuzeudon様のUnderShirtを利用しました。全体的にシンプルなテーマでいいですよね。

blog.hatena.ne.jp

f:id:izumi_ikezaki:20190429192811p:plain

こんな感じになりました。(てか今までのデザインCSSに書いてあった情報が全部上書きで消されたんですが・・・)

あと少しだけ手を加えます。

ブログの装飾:ヘッダー部分にグローバルメニューを設置

 ヘッダー部分に

  • 3DCG
  • プログラミング
  • デザイン
  • 日記

のメニューを置きましょう

設定 > カスタマイズ > ヘッダ > タイトル下

に以下のHTMLを記述しました。

 

gist8e24d0ac0ae8c7a7e3b4d49363343d0f

 はい、これで下図のようなメニューができました。

f:id:izumi_ikezaki:20190430013107p:plain



勿論レスポンシブにも対応してます。

おそらくスマホではこのような形で表示されると思います。

f:id:izumi_ikezaki:20190430013150p:plain

 

ブログの装飾:大カテゴリのタグのスタイルをカスタム

次に大カテゴリのみの表示を変更します。

実は記事内に見えているカテゴリ表示の要素、HTML上ではそれぞれにクラスが割り当てられてるんですよね。

f:id:izumi_ikezaki:20190429214323p:plain

f:id:izumi_ikezaki:20190429214445p:plain

これを利用して特定のカテゴリのみ別の色になるよう設定します。

gistc1946262050dc4cddf5ae33c52926841

f:id:izumi_ikezaki:20190429220226p:plain

こんな感じで変わります。

f:id:izumi_ikezaki:20190429220321p:plain

一覧画面もこの通り、メインカテゴリとサブカテゴリの区別も明瞭です。

ちなみにこの変更した色は過去記事で制作した自身のカラーテーマに基づいています。

izumiikezaki.hatenablog.com

 とりあえずは一通りできました。かなりいい感じになった気がします。

もう少し余裕ができたら1からオリジナルのブログテーマを完成させたいですね。