このガイドは、サイトのヘッダーをリンク、アイコン、またはメニューで飾りたいユーザーを対象としています。シンプルなテーマコンポーネントを使用しているか、より複雑なカスタマイズを選択しているかにかかわらず、このマニュアルは、技術的な知識レベルに関係なく、目的の変更を加えるのに役立つ明確なステップバイステップの手順を提供します。
必要なユーザーレベル: Administrator
簡単な方法（テーマコンポーネント）
各テーマコンポーネントは異なるため、サイトに最も適したコンポーネントを選択する前に、さまざまなコンポーネントに関連するトピックをお読みください。
-
Custom Header Links は、虫眼鏡の隣にヘッダー内にメニューを作成します
-
Custom Header Links (icons) は、虫眼鏡の隣にクリック可能なアイコンを作成します
-
Brand Header は、ヘッダーの上にメニューを作成します
-
Header Submenus は、サブメニュー付きのヘッダーの上にメニューを作成します
各コンポーネントは個別のスタイルシートでさらにカスタマイズできるため、コンポーネントが更新されても変更が上書きされることはありません。必要なのは少量のCSSだけで、好みに合わせてヘッダーをスタイリングできます。
これらのソリューションの利点は、すべてのコンポーネントがDiscourseチームによって管理、維持、更新されており、すでにモバイルに対応していることです。
難しい方法
独自のカスタマイズを作成します。
これを行うには、少なくとも Beginner's guide to using Discourse Themes と Developing Discourse Themes & Theme Components を読む必要があります。
Discourseのテーマに慣れたら、独自のテーマの作成を開始できます。
試してみる
common タブを選択し、Before Header タブにカスタムHTMLを追加します。プラットフォーム固有のカスタマイズが必要な場合は、「高度な表示」トグルで desktop および mobile タブも利用できますが、開始点としては common が推奨されます。
例として、メニューのHTML部分を Before Header タブに追加し始めることができます。
<div>
<span id="top-navbar-links">
<a href="http://example.com">Home</a>
<a href="http://example.com/about/">About</a>
<a href="http://example.com/news/">News</a>
<a href="http://example.com/products/">Products</a>
<a href="http://blog.example.com/blog">Blog</a>
<a href="http://forums.example.com/">Forums</a>
</span>
</div>
これにより、基本的なメニューが作成されます。
次に、ヘッダーをスタイリングするための適切なCSSを追加できます。
CSS タブにCSSを追加します。例：
//サイトのロゴにメニューを揃える
#top-navbar {
margin-right: auto;
margin-left: auto;
margin-top: 10px;
max-width: 1110px;
//メニューを左、中央、または右に移動できます
text-align: center;
}
そして、メニューのカスタマイズを開始します。
#top-navbar-links a {
font-size: larger;
color: #CD0604;
border-top: 1px solid;
border-bottom: 1px solid;
padding: 0 3px;
margin-right: 10px;
//その他
}
ヒントとコツ
メニューを訪問者のみ（またはログインユーザーのみ）に表示する
非登録の訪問者にのみメニューを表示し、ログインしているユーザーには非表示にすることができます。
CSS内にこの display: none; を追加するだけです。
#top-navbar {
[...]
display: none;
}
そして、新しいルールを追加します。
.anon #top-navbar {
display: block;
}
display プロパティのルールを逆にすることで、その反対を行うことができます。
#top-navbar {
[...]
display: block;
}
.anon #top-navbar {
display: none;
}
これにより、ログイン済みのユーザーのみがメニューを表示するようになります。
メニューを特定のグループのメンバーにのみ表示する
これはプライマリグループにのみ機能します！
body:not(.primary-group-GROUP-NAME) #top-navbar {
display: none;
}
メニューを表示できるようにするグループ名に GROUP-NAME を置き換えてください。
リンクを外部リンクタブで開く
HTMLコードでプロパティ
target="_blank"
を追加します。
例：
<div>
<span id="top-navbar-links">
<a href="http://example.com" target="_blank">Home</a>
[...]
</span>
</div>
内部リンクは許可されており（相対パスを使用しても）、外部リンクとして開くこともできることに注意してください。
<div>
<span id="top-navbar-links">
[...]
<a href="/c/site-feedback" target="_blank">Forums</a>
</span>
</div>
関連記事: