デザイン改定履歴

このページでは「おんかぼ!」のデザインや機能の変更履歴を掲載します。

Kabocy Emot-a

「おんかぼ」にはデザインテーマである「Kabocy Emot」をベースとした、Kabocy Emot-aが使用されています。

d240703v1013

2024年07月03日

バージョンの混乱やリグレイションへの対応、デザインのアップデートやJSの修正を行いました。

  • バージョンの混乱とリグレイションへの対応
    • d231018v1012から発生していたバージョンに関する問題を解決
    • 追跡不能な変更をキック
  • デザインのアップデート
    • 「あのかぼ」(Kabocy Emo)で試験中だったデザインを採用し、ブランド間のデザインを強化しました。
  • JSの修正
    • X (旧Twitter)で共有する際、ハッシュタグが「#ようかぼ」になっていたため「#おんかぼ」になるように修正しました。

d231018v1012

2023年10月18日

アクセシビリティの改善とメンテナンス性、パフォーマンス、可読性の向上するアップデートを行いました。

  • メンテナンス性の向上
    • トップページの出力ロジックの修正と改善 (06)
    • 404ページの出力と記事一覧ページへのリンクに関する改善(07)
    • 新しいマネジメントページの作成と読み込み(07)
    • マネジメントページの改良(08)
    • 404ページのセキュリティ向上(09)
    • トップページの表記と各種リンク先の柔軟な対応(09)
    • マネジメントページの改良(09)
  • パフォーマンスとアクセシビリティの改善と向上
    • CSSの記述を改良し、読み込み時の快適性が向上しました。(10)
    • 一部表記の視認性が改善しました。(10)
    • CSSの記述を改良し、読み込み時の快適性が向上しました。(11)
    • アクセスランキングのロジックを全く新しいものに変更しました。(11)
    • 投稿ページの表示ロジックを変更し、読み込み時の快適性が向上しました。(12)
    • あのかぼで使用されている「Kabocy Emo」で行ったアクセシビリティ関連の改良を取り入れました。
      • 各記事ページにおけるリンクの装飾を可読性の高いバージョンに変更しました。(10)
      • アニメーションを見直し、一部廃止しました。(10)
      • Kabocy EmoのRSSブロックデザインを移植しました。(11)
  • ブロックベースのウィジェットに対応しました。
    • 既存のブロックを含む多数のウィジェットをブロックベースのウィジェットに変更しました。(11)

d230920v1005

2023年9月20日

トップページのアクセシビリティの改善、可読性の向上とメンテナンス性を改善するアップデートを行いました。

  • アクセシビリティ関連の改善
    • トップページに表示される各アイキャッチ画像にALT属性が反映されていなかったトラブルを修正
  • 可読性の向上
    • スマホで開いた際のトップページの「新着情報」一覧のデザインを変更
  • メンテナンス性の向上
    • 各ロゴの差し替えを容易にしました。

d230907v1003

2023年9月7月

アーカイブページでの出力エラーの解決と読みやすさ向上を目的とした多数の改善を行いました。

  • エラーの解決
    • アーカイブページで別のタグやカテゴリーの記事が混じるトラブルを解決しました。
  • モバイル端末向けの改善
    • 投稿ページ
      • 各投稿ページの複数のコンポーネントを調整しました。
    • アーカイブページ
      • 2列表示を1列表示に変更しました。
      • リードの調整を行いました。

▼ 新旧の比較

左: 改善前 右: 改善後

カテゴリーやタグを選択した際、別のカテゴリーやタグを含む記事が表示されるエラーを修正しました。


左: 改善前 右: 改善後

アーカイブページを2列から1列に変更しました。(試験中)
また、リード部分の文字サイズや間隔を調節しました。


左: 改善前 右: 改善後

投稿ページのタイトルの文字サイズを調節しました。

左: 改善前 右: 改善後

投稿ページの見出し2~6の文字サイズを調節しました。
本文の文字サイズとulタグ、olタグに関しても表示を調節しています。

左: 改善前 右: 改善後

引用のデザインも調節し、画面が小さなデバイスでも快適に閲覧できるように改善しました。

弊ブログは今後も快適なWebサイトになるべく、改善を続けていきます。

d230107v1001

Kabocy Emoに追加された「補足」、「好事例」、「非推奨」、「警告」の4つのブロックを弊メディアサイトに使用されているKabocy Emot-aに追加しました。

また、Kabocy Emoに先行し、4つのブロックの角を丸めて柔らかい雰囲気にしました。

d220821v1000

  • Kabocy Emot-a テーマ
  • 「ようかぼ」で使用されている「Kabocy Emot」に少しだけクールを足しました。

Kabocy Emot-a d220821v1000は、Kabocy Emot d220528v1033をベースに作成されています。