Discourse の独自テーマ作成に興味がありますか？あなたは正しいトピックにたどり着きました 
このガイドは、Discourse でのテーマ作成における SCSS/CSS の側面に焦点を当てています。JS/EmberJs/Handlebars にも精通している場合は、以下のガイドを参照することで、さらに深く掘り下げることができます。
ここでは、Discourse でのデザインとテーマ作成における私の個人的な方法について説明します。ほとんどのことと同様に、独自のデザインを実装する方法はたくさんあります。私はテーマ作成時にインスペクタツールを積極的に活用するのが好きで、この投稿の中でその方法を何度かご紹介いたします。
テーマ作成の準備
続ける前に、Discourse テーマの使い方入門ガイド と テーマの構造… をお読みください。現時点で深い知識は必須ではありませんが、これらの記事を読むことで、始める前に少し馴染みを得ることができます。
Discourse でテーマ作成を最も効果的に行うためには、以下の手順を踏むことをお勧めします。これにより、デザインプロセスが最も迅速かつスムーズになります。これらのステップを実行することで、Discourse サイトの管理パネルから「保存」してリフレッシュする必要なく、変更を即座に確認できるようになります。
管理コンソール（Discourse フォーラムへの管理者権限がある場合）を使用して、このガイドを進めることも完全に可能です。
- Discourse Theme CLI をインストールし、そのトピックを読んでその機能について理解してください。
- https://discourse.theme-creator.io/ から API キーを取得します
- Meta アカウントでサインインします
- My Themes をクリックします
- API Key をクリックします
- ポップアップモーダルで、Generate API Key をクリックし、生成されたキーをコピーします（後で使用します）
Discourse Theme CLI の実行
Discourse Theme CLI がインストールされ、API キーが準備できたら、好みのテキストエディタまたはターミナルウィンドウを開き、作業ディレクトリをテーマフォルダをセットアップしたい場所に移動します。
そこで、以下のコマンドを実行します：discourse_theme new your_theme_name。プロンプトに以下のように回答します。
-
テーマの名前は何にしますか？ テーマ名を選択してください
-
このテーマの監視を開始しますか？ はい
-
Discourse サイトのルート URL は何ですか？
https://discourse.theme-creator.io/ -
このサイト名を保存しますか？ はい
-
API キーは何ですか？ theme creator から取得した API キーを入力してください
-
この API キーを保存しますか？ はい
-
プロンプトが表示されたら、Create and Sync with a new theme を選択します
-
子テーマコンポーネントに関するプロンプトが表示されたら、Do Nothing を選択します
すべて正しく動作すれば、https://discourse.theme-creator.io/ の「My Themes」に移動すると、左側のテーマリストに新しいテーマが表示されるはずです。
これらの変更を実時間で確認するには、テーマ名をクリックし、情報エリアの下部にある Preview をクリックします。
Theme CLI は、新しく作成されたディレクトリ内の変更も監視しており、変更が発生するたびに保存し、theme-creator 上のテーマも更新します。
最初のステップ
Discourse Theme CLI は、先ほど実行したコマンドで指定したフォルダ名内にテーマのスケルトンを作成しました。使用しないファイルが多数生成されるため、以下のファイル以外をすべて削除します。
common/common.scss
desktop/desktop.scss
mobile/mobile.scss
about.json
ディレクトリ内では、git のバージョン管理を削除するために rm -rf .git も実行してください。このガイドでは不要です。
テーマディレクトリは以下のようになっているはずです。
これらのファイルに追加するスタイルは、それぞれの使用ケースでレンダリングされる点に注意してください。common.scss のスタイルはデスクトップとモバイルの両方に適用されますが、desktop.scss のスタイルはデスクトップブラウジング時のみ、mobile.scss のスタイルはモバイルビュー時のみ適用されます。
Hello World（色付きで）
Discourse はスタイル付けに SCSS を使用しています。スタイルを最大限に活用するためには、SASS に慣れることをお勧めしますが、そうでなくてもこのガイドに従うことは可能です。
さて、待ちに待ったテーマ作成へ進みましょう！
現在、about.json には color_schemes が定義されていないため、以下のコードをそのセクションに貼り付けて保存してください。
{
"name": "my theme",
"about_url": null,
"license_url": null,
"assets": {},
"color_schemes": {
"Default": {
"primary": "222222",
"secondary": "ffffff",
"tertiary": "0088cc",
"quaternary": "e45735",
"header_background": "ffffff",
"header_primary": "333333",
"highlight": "ffff4d",
"danger": "e45735",
"success": "009900",
"love": "fa6c8d"
}
}
}
ブラウザを開いていても、何も変更が反映されていないことに気づくでしょう。これは、スキームが存在しない場合に使用されるデフォルトの色スキームだからです。
テーマの概要
このガイドで実際に実装するものとして、このカラーパレットに基づいたシンプルなテーマの作成手順を説明します。
背景色と基本テキスト色の変更
非常に簡単な作業から始めましょう。現在の色スキームの "Secondary" 値を変更します。"secondary": "EEF4F7" に変更します（これで背景色が変わります）。また、"primary" 値を "203243" に変更します。
この 1 行だけで、フォーラムの見た目が大きく変わりました。色スキーム内の色を編集するだけで、多くのカスタマイズが可能です。
色スキームの使い方
以下のすべてのキーは、対応する色スキーム名の下にある about.json ファイルで定義されています。これらの説明は、各変数名の主な目的を理解するための良い参考になります。
| 色 | 説明 |
|---|---|
| primary | ほとんどのテキスト、アイコン、ボーダー |
| secondary | 主な背景色、一部のボタンのテキスト色 |
| tertiary | リンク、一部のボタン、通知、アクセント色 |
| quaternary | ナビゲーションリンク |
| header_background | サイトヘッダーの背景色 |
| header_primary | サイトヘッダー内のテキストとアイコン |
| highlight | ページ内のハイライトされた要素（投稿やトピックなど）の背景色 |
| danger | 投稿やトピックの削除などのアクションのハイライト色 |
| success | アクションが成功したことを示すために使用 |
| love | 「いいね」ボタンの色 |
これらの変数は、SCSS ファイル内で以下のように使用できます。
body {
background-color: var(--primary);
}
また、各色のバリエーションも作成されており、var(--primary-medium) や var(--primary-very-low) のように使用することで、同じ色の異なるトーンを取得できます。
「Default」色スキームの他の色も以下のように変更しましょう。
"Default": {
"primary": "203243",
"secondary": "EEF4F7",
"tertiary": "416376",
"quaternary": "5E99B9",
"header_background": "FaFaFa",
"header_primary": "EEF4F7",
"highlight": "86BDDB",
"danger": "8F393E",
"success": "70DB82",
"love": "FC94CB"
}
テーマを theme creator でプレビューしている間に、左側のメニューから Style Guide リンクをクリックすると、SCSS ファイルで使用可能なすべての変数を確認できます。
Style Guide は、カスタムテーマを作成する際に非常に役立つセクションです。各 Atom は、あなたのスタイルが適用されたときの Discourse の要素の表示方法を示してくれます。
さらに深く
前のセクションで基本を押さえたところで、SCSS のみで Discourse で何ができるか、もう少し深く掘り下げてみましょう。（ヒント：とてもたくさん！）
ヘッダーのスタイリング
色スキームの変更により、ヘッダーの見た目が少し物足りないことに気づくでしょう。アイコンがほとんど見えないのです！
Discourse のヘッダーには、サイトロゴと右側のナビゲーションアイコンを保持するコンテナ（背景色付き）が含まれています。これらすべてをカスタマイズできます。
ヘッダーをカスタマイズするターゲットクラスは .d-header です。
common/common.scss ファイルに、以下を追加しましょう。
.d-header {
box-shadow: none;
border-bottom: 1px solid var(--primary-low-mid);
height: 5em;
}
これにより、ヘッダーのデフォルトの box-shadow が削除され、高さが少し増え、ボーダーが追加されて分離が図られます。
アイコンについては、.d-header の SCSS ブロック内で、以下のようにネストされたコードを追加します。
.d-header {
// ...前のコード
.d-icon {
color: var(--primary-low-mid);
}
}
これで良くなりましたが、鋭い目には、ヘッダーの高さが増したことで、ヘッダーと Discourse フォーラムの他の要素との間の隙間が狭まっていることに気づくでしょう。
メインエリアとヘッダーの間の間隔は、#main-outlet ターゲットによって制御されます。以下のコードを common/common.scss ファイルの下部に追加して、この間隔を少し広げましょう。
#main-outlet {
padding-top: 6.5em;
}
ナビゲーションコンテナ
ナビゲーションコンテナには、以下の要素が含まれています。
左端はカテゴリ/タグフィルタードロップダウンで、次にナビゲーションリンク、そして「New Topic」ボタンで終わります。
カテゴリ/タグドロップダウン
このエリアに変更を加えましょう。そのために、common.scss ファイルに以下を追加します。
.navigation-container {
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
}
}
ここでは .select-kit-header をターゲットにして、それぞれに同じ border-radius と、より明るい背景色を与えています。
これらをクリックすると、ドロップダウンメニューが開きます。
現在、角が硬いため、これを丸めるスタイルを追加し、背景色をヘッダーと同じ色に変更しましょう。
.navigation-container {
.select-kit.combo-box {
// ...前のコード
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
}
}
}
これで、以下のような見た目になります。
よく見ると、検索エリアの右上に小さなボーダーが残っていることがわかります。
これを修正するために、ブラウザのインスペクタを確認しましょう。これは、正しくスタイルを適用するためにターゲットにする必要があるクラス/ID を学ぶのに非常に役立つツールです。
ドロップダウンメニューが表示されている状態で、検索エリアを右クリックし、ブラウザで要素を「Inspect」します。
この入力要素が select-kit-filter というクラスを持つ div 内に配置されていることがわかります。
このセレクタに適用されているルールを見ると、現在 border-top と border-bottom、そしていくつかのパディングが適用されていることが確認できます。border-top のスタイルのみを変更したいのです。
前述の .select-kit-body scss の中に、以下のコードをネストして追加します。
.select-kit.combo-box.category-drop,
.select-kit.combo-box.tag-drop {
.select-kit-body {
// ...前のコード
.select-kit-filter {
border-top: 0px;
}
}
}
これで、ナビゲーションコンテナのスタイリングコードは以下のようになります。
.navigation-container {
// カテゴリ + タグドロップダウン
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.select-kit-filter {
border-top: 0px;
}
}
}
}
}
ナビゲーションリンク
これらのナビゲーションリンクを以下のように見えるようにスタイリングしましょう。
ここでターゲットにするべきものを発見するために、再度インスペクタを使用しましょう。
ナビゲーション要素が "nav nav-pills ..." というクラスを持つ UL 内にあることがわかります。
common.scss ファイルに戻り、前のセクションの下、ただし navigation-container のネスト内に、以下を追加します。
.nav-pills {
& > li a {
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
}
}
この変更により、nav-pills の子要素で active クラスを持つリンクのみがターゲットになります。これにより、アクティブなリンクは以下のようになります。
これで問題ありませんが、下部ボーダーがテキストの幅だけ伸びるようにしたいです。そのために、&.active { の行の上に、ナビゲーション内の <li> タグ内のすべての A リンクに影響を与える以下のコードを追加します。
// ...他のコード
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
// ...他のコード
}
}
}
次に、「hover」効果を「active」と同じようにスタイリングする必要があります。
前の &.active の下に以下を追加します。
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
これで、すべてのナビゲーションコードは以下のようになります。
// Nav Pills
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
}
}
ボタン
Discourse のボタンは、さまざまな形状とサイズがあります。Style Guide の Buttons セクションで、それらのバリエーションを確認できます。
このテーマのほとんどのボタンを丸みを帯びたカスタムスタイリングに変更したいです。これにより、+ New Topic ボタンやサイト内の他のボタンも変更されます。
common.scss ファイルの下部に、以下を追加しましょう。
.btn {
background-color: var(--header_background);
color: var(--primary);
border-radius: 1.2em;
border: 1px solid var(--primary-low-mid);
.d-icon {
color: var(--primary);
}
&:hover {
background-color: var(--quaternary-low);
color: var(--primary);
.d-icon {
color: var(--primary);
}
}
&.btn-default,
&.btn-primary {
padding: 10px 12px;
}
}
これで、ボタンは以下のようになります。
ボタンをスタイリングしたところで、ボタンスタイリングについて的一点を指摘させてください。すべてのデザインをテストすることがなぜ重要なのかを理解するために重要です。
サイトプレビューでトピックに移動し、トピック返信の reply ボタン、またはトピックストリームの下部にある返信ボタンをクリックしてください。ボタンスタイリングが意図していなかった部分に影響を与えていることがわかります。
これらのテキスト編集ボタンは、以前のスタイリングの影響を受けないようにしたいです。これには少し複雑な SASS/CSS が必要ですが、:not() を使ってこれらのボタンに影響を与えないようにコードを書くことができます。
現在の .btn ターゲットの前に、以下のコード行を追加します。これにより、スタイルが .d-editor-button-bar の子要素ではないボタンにのみ適用されるようになります。
:not(.d-editor-button-bar) > .btn
これでうまくいきました…でも待ってください！今度は奇妙な反逆者が独自の動きをしています。
ブラウザでこれをインスペクトすると、このボタンには .select-kit-header というクラスが付いていることがわかります。これは、このギアをクリックするとさらに多くのオプションが表示されるためです。
このボタンをターゲットにしたくないことがわかったので、コードにさらに :not() 機能を追加しましょう。
:not(.d-editor-button-bar) >
.btn:not(.single-select-header)
これは、.d-editor-button-bar の子要素ではなく、かつ .single-select-header クラスを持たないすべてのボタンを選択します。少し混乱するかもしれませんが、Discourse 内には多くの動く部品があるため、要素に正しく影響を与えるためには、スタイリングが非常に具体的である必要がある場合があります。
また、現在のスタイリングがモーダル閉じるボタンに不自然に影響を与えていることに気づきました。モーダルを開くものをクリックすれば確認できますし、より簡単には、Style Guide のモーダルセクションに移動することもできます。
これを修正するために、コードに別のターゲットを追加します。
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close)
次へ…
コードの影響を受けていないもう一つのボタンが見えます。それは、トピック投稿ストリームの一番下にある Tracking ボタンです。
現在の .btn コードに、コンマの後に以下の行を追加します。
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close),
.topic-notifications-button > .select-kit > .btn
これで、このセクションに表示されるボタンが正しくターゲットされ、現時点ではフォーラムの上部エリアのスタイリングは完了です。
次のステップ
このガイドは、Discourse の独自テーマのカスタマイズ方法の表面をなでることを目的としていました。アプリの特定の領域をターゲットにして独自のカスタマイズを行う方法について、より多くの洞察を得られたことを願っています。
覚えておいてください SCSS のみを使用して、多くのものをカスタマイズできます。さらに深く開発を進めたい場合は、この投稿の上部にリンクされている記事を読むことをお勧めします。
質問があればお気軽にお尋ねください。喜んでお手伝いするか、正しい方向へ案内いたします。
このドキュメントはバージョン管理されています。変更を github で提案してください。