@erlend_sh さん、素晴らしい指摘ありがとうございます！このトピックはまだ見ていませんでした。はい、昨年まさにこれについて時間を費やし、Flarum 風のヘッダーに近いものを手に入れようと試みました。これが 私たちのサイト での外観です：
そして、私たちが考案した HTML / CSS の核心部分は以下の通りです。
CSS:
（これはすべて「common」内にあります。これ以外に、デスクトップとモバイル向けのいくつかの小さなマージン/パディングの調整もありますが、以下には含めていません。）
/* GENERAL */
body {
overflow-x: hidden;
}
.custom-cat-header {
display: block;
margin-left: -9999px!important;
padding-left: 9999px!important;
margin-right: -9999px!important;
padding-right: 9999px!important;
text-align: center;
margin-top: -18px;
}
.custom-cat-header p {
color: #dddddd;
}
.custom-cat-header h1 {
display: inline-block;
margin-top: 20px;
color: #dddddd;
background-color: #222222;
border-radius: 5px;
width: inherit;
}
/* ALL CATEGORIES */
.custom-cat-header-all-categories {display: none;}
body.navigation-categories .custom-cat-header-all-categories, body.navigation-topics .custom-cat-header-all-categories {
display: block;
background-color: #b1880b;
}
.custom-cat-header-all-categories h1 {color: #d4a411;}
/* PLAYING TECHNIQUE */
.custom-cat-header-playing-technique {display: none;}
body.category-playing-technique .custom-cat-header-playing-technique {
display: block;
background-color: #9c2116;
}
.custom-cat-header-playing-technique h1 {color: #d62e1f;}
body.category-playing-technique .custom-cat-header-all-categories {display: none;}
/* repeat for all other categories! */
HTML（「After Header」セクション内）：
<!-- ALL CATEGORIES -->
<div class="custom-cat-header custom-cat-header-all-categories">
<a href="https://forum.troygrady.com/"><h1>All Categories</h1></a>
<p>Welcome to the Cracking the Code Forum!</p>
</div>
<!-- PLAYING TECHNIQUE -->
<div class="custom-cat-header custom-cat-header-playing-technique">
<a href="https://forum.troygrady.com/c/playing-technique"><h1>Playing Technique</h1></a>
<p>Pickslanting, chunking, fretting, motion mechanics — ask your technical questions here.</p>
</div>
<!-- repeat for all other categories! -->
これは非常に視覚的に洗練されていますが、同時に多くの反復的な手動編集を伴う、非常にカスタム/ハック的なアプローチでもあります。私たちの約 10 個のカテゴリーにとっては簡単ですが、より高い柔軟性を求めるなら、以下のような単純なプラグインとして実装するのが面白いかもしれません。
- カテゴリーの説明を自動的に取得して挿入する
- 色の計算を自動的に処理する（ ours はカテゴリーの色と似ていますが、より良いコントラスト/可読性のために、手動でヘッダーの背景色を少し暗くし、h1 の「ピル」テキストの色を少し明るくしました）。
プラグイン作成の経験はありません。しかし、現時点では、@lll さんと私が考案したものを組み合わせたテーマコンポーネントが次の良いステップのように思えます！