はじめに

こんにちは！エンジニアのjunです。
本日2024年10月1日、新テーマ「Fusion Corporate」が公開されました🎉

Fusion Corporate

この「Fusion Corporate」は、デザイン性と更新性のfusion（融合）を目指して制作されたテーマです。
更新性の肝となるのが、6月に公開された、かんたんデザイン編集機能！

「Fusion Corporate」はかんたんデザイン編集機能をどのように組み込んでいるのでしょうか？
これから3回に分け、テーマ制作者に向けた具体的な実装を紹介したいと思います。
「既存のテーマをかんたんデザイン編集に対応させたい！」「テーマをイチから作ってみたい！」
そんな時の参考になれば嬉しいです。

1. CSS編　← 今回はココ！
2. かんたんデザイン編集編
3. MTテンプレート編

さあ、CSS編、スタートです！！

ライブラリとクラスの接頭語

新テーマでは、ライブラリとして Google Fonts、Bootstrap、Tailwind CSS を利用しています。
加えて Bootstrap のカスタマイズスタイル、テーマ独自スタイルを読み込んでいます。
Google Fonts は外部ドメイン、それ以外はテーマと同じドメインへ配置しています。
それぞれ、クラス名には接頭語をつけています。
まとめると、以下の表のようになります。

それぞれ、詳しくみていきましょう！

Google Fonts

まずは、Google Fonts から。新テーマでは、2種類を利用しています。

1つ目は、 Noto Sans JP。サイト全体で利用しており、Bootstrap のカスタマイズとして、以下のように設定しています。

:root{
  --bs-font-sans-serif: 'Noto Sans JP', sans-serif;
}

もうひとつが、Material Symbols。
こちらは、カスタムブロック「ファイル」の装飾に利用しています。
CSSの記述はどこにもなく、ファイルを読み込むのみ。
アイコンを表示させたい場合は、以下のように記述します。

<span class="material-symbols-outlined">search</span>

Bootstrap スタイル

メインのフレームワークとして、圧倒的な知名度と利用率を誇る Bootstrap を採用。
公式ドキュメント含め、情報が充実している点も魅力の1つです。
バージョンは５.３.３。
SCSSを利用したカスタマイズは行なっていません。
JavaScript もオリジナルを読み込んでいるので、Bootstrap の全てが利用可能です。

SCSSを利用していない理由は、MovableType.net の管理画面で完結できるようにするためです。
カスタマイズ用のファイルはインデックステンプレートになっているので、管理画面からすぐに編集できます。
もし「かんたんデザイン編集と組み合わせて、色を自由に設定できるようにしたい」といった場合にも、対応が容易になります。SCSSにしてしまうと、逆に手間がかかってしまうと思います。

Bootstrap とテーマ独自スタイルの線引き

Bootstrap と独自スタイルが共存していますが、基本的には Bootstrap で記述するよう心掛けました。
考え方としては逆で、「theme.cssをどれだけ小さく保てるか」を意識しています。
そのため、ユーティリティクラスも多様しています。
以下のような箇所を見ると、クラスが多く、ギョッとされる方もいるかもしれません。
それでも、独自スタイルを減らすことを優先しました。

<ul class="d-flex flex-column flex-sm-row flex-wrap column-gap-5 row-gap-2 list-unstyled m-0 small">

独自スタイルは、主に、全体レイアウトとカスタムブロックで利用。
より具体的に言えば、display: grid、:not()、:has()を用いたい場合に登場します。

また、カスタムブロックは「あとからの変更に弱い」という弱点があります。
ブログを長く運用していると、ブロックのスタイルを変更したい場面は何度もあると思います。そのような時に、上記のようなユーティリティクラスでは対応が難しくなります。そのため、.theme-blockで始まる専用のクラスを設定しています。

アコーディオン

すこしややこしいのが、アコーディオンです。

アコーディオンはカスタムブロックになっていますが、
CSSは Bootstrap／JavaScript はなし／HTMLは独自、という特殊な状況になっています。

理由は、カスタムブロック化が困難なためです。
Bootstrap のアコーディオンは JavaScript で開閉を制御していますが、その対応が難しいのです。

そこで、見た目は Bootstrap を利用しつつ、開閉制御はブラウザ標準の <details> で対応しました。
状況はややこしいですが、マークアップとしてはより適切になったと思います。

<div class="accordion">
  <details class="accordion-item">
    <summary class="accordion-header">
      <span class="accordion-button">Accordion Item #1</span>
    </summary>
    <div class="accordion-collapse">
      <div class="accordion-body">This is the first item's accordion body. </div>
    </div>
  </details>
</div>

Bootstrap のカスタマイズ

Bootstrap のカスタマイズは、インデックステンプレート「bootstrap.css」へまとめて記述しています。
出力ファイル名は assets/css/bootstrap.cssです。

Bootstrap には、非常に多くのCSS カスタムプロパティ（変数）が用意されているため、カスタマイズも主にそれらで行います。
Bootstrap のCSS変数には--bsの接頭語が付けられています。

例えば、ルートのフォントサイズは以下のように変更しています。 

:root{
  --bs-body-font-size: 16px;
}
@media (min-width: 768px){
  :root{
    --bs-body-font-size: 18px;
  }
}

コンポーネントをカスタマイズしたい場合も同様です。
新テーマでは、ボタンコンポーネントに対して、以下のようなカスタマイズを行なっています。

.btn{
  min-width: min(8rem, 100%);
  touch-action: manipulation;
}
.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-body-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--bs-body-color);
}

もちろん、全てがCSS変数になっているわけではありません。
その場合は、従来通りにプロパティと値を記述しています。

ブレイクポイント

レスポンシブ対応のためのブレイクポイントは、Bootstrap デフォルトのままです。
ブレイクポイントを変更するためには、SCSSが必要になります。

メディアクエリの指定には(min-width: 768px)などと、しっかりと値を記述する必要があります。
「768pxを786pxと間違えていた！」などがないよう、ご注意ください（自戒）。

ここで少し余談。
2024年10月現在、メディアクエリにはCSS変数を用いることができません。これは、CSS自体の制限です。
ただ、 @custom-mediaなる機能の導入が検討されているようです。
これが採用されれば、上記のような凡ミスもなくなり、管理や変更が容易になるはず！
今後のCSSの進化に期待です！

テーマ専用スタイル

テーマ専用スタイルは、インデックステンプレート「theme.css」へまとめて記述しています。
クラスの接頭語は.theme、CSS変数の接頭語は--theme、出力ファイル名はassets/css/theme.cssです。

主な利用箇所は、全体レイアウトとカスタムブロックです。

全体レイアウト

グローバルナビゲーション、メイン、フッター。
3つのエリアをレイアウトするために、display: gridを用いています。
Bootstrap@5.3.3 のデフォルトでは、CSS Gridが無効になっているため、全体レイアウトは独自スタイルで記述しています。
ただし、背景色などは Bootstrap のユーティリティクラスを利用しています。

<div class="theme-wrapper">
  <div class="theme-nav bg-white"></div>
  <div class="theme-content bg-white overflow-hidden"></div>
  <div class="theme-footer bg-white"></div>
</div>

@media (min-width: 992px){
  .theme-wrapper{
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    grid-template-rows: 1fr max-content;
  }
}

カスタムブロック

カスタムブロックのスタイルは以下の通りです。ボタンやアコーディオンもカスタムブロックですが、独自スタイルではなく、Bootstrap スタイルです。

.theme-block-section、.theme-block-columns、.theme-block-file、.theme-block-chat-item

条件によってスタイルが変わる場合には、--theme-blockで始まるCSS変数を定義しています。
例えばファイルブロックでは、リンク先の拡張子によってラベルやアイコンを変化させるためにCSS変数化しています。

.theme-block-file{
  --theme-block-file-decoration-label: 'リンク';
  --theme-block-file-decoration-materialSymbols-name: 'attach_file';
}
.theme-block-file:has(a[href*=".docx"]){
  --theme-block-file-decoration-label: 'Word';
  --theme-block-file-decoration-materialSymbols-name: 'description';
}

また、ブレイクポイントによってフォントサイズを変更したい場合なども同様です。

.theme-block-file{
  --theme-block-file-decoration-fontSize: 0.75rem;
}
@media (min-width: 768px){
  .theme-block-file{
    --theme-block-file-decoration-fontSize: 1rem;
  }
}

.theme-prose

.theme-proseは、少し見慣れないクラス名かもしれません。
いわゆる WYSIWYG エディタの親へ設定するクラスで、子要素の見出しや段落、リストアイテムなどにスタイルを適用させます。

元ネタは、Tailwind CSS の公式プラグイン「@tailwindlabs/tailwindcss-typography」。
プラグインをインストールすると、.proseクラスが利用可能になります。このクラス名を拝借しました。

--theme-block-margin

.theme-proseのスタイルには、以下のような箇所があります。

.theme-prose > * + *{
  margin-block-start: var(--theme-block-margin, 2rem);
}

これは、子要素間の上の余白を設定するスタイルです。
デフォルトを 2rem にしているので、例えば段落と段落の間は 2rem の余白がつきます。

段落ではなく見出しの場合は、もう少し大きな余白をつけています。
具体的には、以下のように設定しています。

.theme-prose > :where(h1,.h1,h2,.h2){
  --theme-block-margin: 6rem;
}
@media (min-width: 768px){
  .theme-prose > :where(h1,.h1,h2,.h2){
    --theme-block-margin: 7rem;
  }
}

なお、元ネタは、Bootstrap のStacksや Tailwind CSS のSpaceです。

かんたんデザイン編集専用スタイル

出番は少ないですが、 かんたんデザイン編集のプレビュー画面（編集画面）専用スタイルがあります。
接頭語は .MTSE。 Movable Type Site Editor の頭文字です。

例えば、フッターで登場します。
フッターには、各種SNSアカウントを表示させることが出来ます。

かんたんデザイン編集で悩ましいのが、入力欄が空の場合の対応です。
SNSアカウントを未設定の場合は、実際の画面では何も表示させたくありません。
ただ、プレビュー画面では、何も表示されないと、入力欄に気が付かない可能性が高いです。

プレビュー画面では常に表示させ、実際の画面では入力された場合のみ表示させたいわけです。
これを実現するために、専用クラスを用いて以下のようにしています。

body:not(.MTSE) .theme-footer-sns-list:not(:has(a[href^="http"])){
  display: none;
}
body:not(.MTSE) .theme-footer-sns-list a[href=""]{
  display: none;
}

.MTSEで始まるクラスは、次回の記事でも解説予定なので、また改めて！

Tailwind CSS スタイル

「ユーティリティファースト」として人気急上昇の Tailwind CSS も同梱しています。
ただ、あくまでもオマケです。
Bootstrap には5段階の余白が用意されていますが、物足りなく感じることもあるかもしれません。
より細やかな余白を設定できるよう、Tailwind CSS 標準の margin、padding を利用できるようにしています。
safelist機能を用い、事前にビルドしたファイルを読み込んでいます。

{
  pattern: /^tw-(m|p)\w?-(auto|\d|1\d|2\d|32)$/,
  variants: ['sm', 'md', 'lg', 'xl', 'xxl'],
}

接頭語と合わせて、.tw-mt-10, .tw-p-4のような指定が可能です。

まとめ

すっかり長文になってしまいました。。。
ただ、お伝えしたいことは漏らさず書けたと思います！もし、1つでもお役に立てるものがあれば嬉しいです！

それでは、CSS編はここまで！
後ほど公開するかんたんデザイン編集編、MTテンプレート編もよろしくお願いします！