# Discourseの初期設定方法

**URL:** <https://forum.spacecubics.com/t/discourse/43>\
**Category:** Community\
**Tags:** lang-ja\
**Created:** [January 15, 2022, 7:59am UTC](https://forum.spacecubics.com/t/discourse/43 "2022-01-15T07:59:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Masayuki](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.spacecubics.com/masayuki/32/66_2.png) [@Masayuki](https://forum.spacecubics.com/u/Masayuki)\
**Post date:** [January 15, 2022, 7:59am UTC](https://forum.spacecubics.com/t/discourse/43/1 "2022-01-15T07:59:57Z")

</div>

このSpace CubicsのForumを立ち上げる時にやったDoscourseの設定をまとめます。皆さんがCommunityを立ち上げる時に役立ててください。

English page is here 👇

> [@How to setup Discourse site design](https://forum.spacecubics.com/t/topic/63):
>
> This is a summary of the Discourse settings when we launched this Space Cubics forum. We hope you will find it useful when you start your own community. 日本語の解説はこちら point_downTheme We chose the Default theme. Header To easily change the appearance of your site, it’s better to use the [Discourse theme](https://meta.discourse.org/c/theme/61/none/l/top). We used [Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588) to design the header. From the settings, select Customize → Themes → Components, and press the Install button at the bottom. When you select …

### テーマの選択

テーマはデフォルトのまま使っています。

 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/6f29ecebf34122fc462f9bba33091b1f8bfba550.png)

### ヘッダーの設定

サイトの外観を簡単に変えるには[Discourseのテーマ](https://meta.discourse.org/c/theme/61/none/l/top)を使うのが便利です。  
ヘッダーのデザインには[Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588)を使用しました。

サイトの設定から、カスタマイズ→テーマ→コンポーネントを選択し、下にあるインストールボタンを押します。

 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/4815d6c969979546f41b822a26c349befdec871d.png)

リポジトリからをを選ぶと、右側にURLを入れるボックスが出るので、上記の各テーマのページのどこかにあるRepositoryのアドレスを入力し、インストールボタンを押します。テーマやコンポーネントのインストールは基本的に全部このやり方です。

 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/328a742087f64e13b2c23dda162ab6090786463f.png)

次に設定を紹介していきます。  
適用するテーマにDefaultを指定。これはどのコンポーネントの設定でも必須です。

![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/optimized/1X/b2dac86935a4d2b13ec5254c44d80fabc7c5f818_2_517x47.png)

リンクの設定。Space Cubicsのホームページのデザインに似せています。

 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/f5131618422e864c8c11d58f1933a9b297b99a1e.png)

フォントが少し大きかったのでCSSを編集して小さくしました。テーマ設定のCSS/HTMLの編集ボタンを押します。

 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/933226918aa1a3979c1ace3632853174a2c1b12f.png)

下記のコードを、共通→CSSの画面に貼り付けます。

```auto
.custom-header-links {
  .headerLink {
    list-style: none;
    a {
      font-size: smaller
    }
  }
}

```

### 検索ウィンドウの設置

[Search banner theme component](https://meta.discourse.org/t/search-banner-theme-component/122939)をインストール

**設定：**

- 背景の設定
- 表示される文字の編集

検索画面の文字色を変えるためにCSS編集画面に以下のコードを貼り付けます。

```auto
.custom-search-banner-wrap {
  color: white;
}

```

### フッターの設定

[Easy responsive footer](https://meta.discourse.org/t/easy-responsive-footer/95818)をインストール

**設定：**

- Headingに社名を入力
- Blurbにショートインフォを入力
- Link sectionsの1行目にCategory、2行目にLinkを設定

 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/1250dac3f94057cbb5c24799a044b70ab1b44b82.png)

- Linksにカテゴリーページへのリンクと、ホームページへのリンクを設定

 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/da62d93bafaeb497462f1a48b5c170b99bfc25ef.png)

- Small linksは今回不要だったので削除
- Social linksの設定
- svg iconsに使用したSocial linksのアイコンを設定

このままだとユーザーのブラウザがダークモードに設定されていると色がおかしくなったので、下記のコードをCSS編集画面に貼り付けます。  
外観をかなり変更できるのでお好みで設定を変えてください。基本的にインストール時に入力したRepositoryのURLに行き、Commonフォルダに行くと.scssファイルがあります。その中身をコピーして色々いじると設定が読み解けます。

```auto
.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](https://meta.discourse.org/t/scroll-to-top-component/116506)をインストール。これはインストールするだけで、ページの一番上に瞬間移動するボタンを設置できます。

### サイトの設定

細かな設定は設定画面で行います。

**ブランディング**

- 会社ロゴをアップロードします。ブラウザのダークモード対策に白黒反転のロゴも入れました。

 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/6c540f2eca605e3d96e455bb4369c0463fe5a146.png)  
 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/ba55ab3e59b33de3efb596fb980ad590365e7276.png)

**基本設定**

- トップ画面はトピック表示ではなくカテゴリー表示にしたかったので、top menuの順番をcategoryが最初になるように並べ替えます。
- ダークモードのカラースキームをDarkにします。
- 今後カテゴリーが増えたときに並べ替えたいので、fixed category positionsをチェックします。

 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/0457b15a930520eace6111af55ca3a231fcc2462.png)  
  

**投稿設定**

- 未分類の投稿を防ぐために、allow uncategorized topicsのチェックを外す

 ![image](https://canada1.discourse-cdn.com/flex029/uploads/spacecubics/original/1X/8fe07cfa9a6ce31c89d9cdf054699abc5555931c.png)

  
以上です。今後デザインを追加した場合は本トピックに追加していきたいと思います。