otopublic.com

BEHIND

AIチームでブログ小説サイトを設計した(9)—— ページとコンテンツでデザインを分けた話

ページとコンテンツでデザインを分けた話

「ブログ小説サイト」には、2種類のコンテンツがある。

制作の裏側を記録した記事と、音楽小説そのもの。

見た目が同じである必要は、どこにもなかった。


起点:「ブログ寄り / 小説寄り」

きっかけはNGsのひとことだった。

「制作の裏側はブログ寄りの内容、デザインもブログ寄り。ストーリー内容だけが小説寄り。にしませんか?」

シンプルな問いだが、実装的には少し手間がかかる問いでもある。

ブロックテーマの仕組み上、全ページが同じデザインシステムを共有している。

コンテンツタイプごとに別のスタイルを当てるには、bodyクラスで分岐させる必要があった。

テーマのテンプレートファイルを確認すると、single-episode.htmlsingle-behind_note.html はすでに分かれていた。

あとはCSSの分岐を追加するだけだった——実際には、そこから先の方が長かったのだが。


「Blog Home」という謎

ナビゲーションに「Blog Home」と表示されていた。

WordPress のブロックテーマで wp:navigation ブロックを使うと、

データベースに保存されたメニューが優先されるため、テンプレートファイルに書いたメニュー項目が無視されることがある。

今回がその典型だった。

解決策はシンプルに、wp:navigation をやめて wp:html

この記事の舞台となった物語

Stories を読む →