このSpace CubicsのForumを立ち上げる時にやったDoscourseの設定をまとめます。皆さんがCommunityを立ち上げる時に役立ててください。
English page is here 
テーマの選択
テーマはデフォルトのまま使っています。
ヘッダーの設定
サイトの外観を簡単に変えるにはDiscourseのテーマを使うのが便利です。
ヘッダーのデザインにはCustom Header Linksを使用しました。
サイトの設定から、カスタマイズ→テーマ→コンポーネントを選択し、下にあるインストールボタンを押します。
リポジトリからをを選ぶと、右側にURLを入れるボックスが出るので、上記の各テーマのページのどこかにあるRepositoryのアドレスを入力し、インストールボタンを押します。テーマやコンポーネントのインストールは基本的に全部このやり方です。
次に設定を紹介していきます。
適用するテーマにDefaultを指定。これはどのコンポーネントの設定でも必須です。
リンクの設定。Space Cubicsのホームページのデザインに似せています。
フォントが少し大きかったのでCSSを編集して小さくしました。テーマ設定のCSS/HTMLの編集ボタンを押します。
下記のコードを、共通→CSSの画面に貼り付けます。
.custom-header-links {
.headerLink {
list-style: none;
a {
font-size: smaller
}
}
}
検索ウィンドウの設置
Search banner theme componentをインストール
設定：
- 背景の設定
- 表示される文字の編集
検索画面の文字色を変えるためにCSS編集画面に以下のコードを貼り付けます。
.custom-search-banner-wrap {
color: white;
}
フッターの設定
Easy responsive footerをインストール
設定：
- Headingに社名を入力
- Blurbにショートインフォを入力
- Link sectionsの1行目にCategory、2行目にLinkを設定
- Linksにカテゴリーページへのリンクと、ホームページへのリンクを設定
- Small linksは今回不要だったので削除
- Social linksの設定
- svg iconsに使用したSocial linksのアイコンを設定
このままだとユーザーのブラウザがダークモードに設定されていると色がおかしくなったので、下記のコードをCSS編集画面に貼り付けます。
外観をかなり変更できるのでお好みで設定を変えてください。基本的にインストール時に入力したRepositoryのURLに行き、Commonフォルダに行くと.scssファイルがあります。その中身をコピーして色々いじると設定が読み解けます。
.custom-footer {
background: #01144E;
.flexbox {
color: white;
}
.first-box {
color: white;
.blurb {
color: gray;
}
}
.second-box {
color: white;
}
.third-box {
color: white;
.social {
.social-link {
.d-icon {
color: white;
}
}
}
.small-link {
color: gray;
}
}
.footer-section-link-wrapper a {
color: gray;
}
}
ジャンプボタンの設置
Scroll to Top Componentをインストール。これはインストールするだけで、ページの一番上に瞬間移動するボタンを設置できます。
サイトの設定
細かな設定は設定画面で行います。
ブランディング
- 会社ロゴをアップロードします。ブラウザのダークモード対策に白黒反転のロゴも入れました。
基本設定
- トップ画面はトピック表示ではなくカテゴリー表示にしたかったので、top menuの順番をcategoryが最初になるように並べ替えます。
- ダークモードのカラースキームをDarkにします。
- 今後カテゴリーが増えたときに並べ替えたいので、fixed category positionsをチェックします。
投稿設定
- 未分類の投稿を防ぐために、allow uncategorized topicsのチェックを外す
以上です。今後デザインを追加した場合は本トピックに追加していきたいと思います。