 |
概要 | Banner Featured Links を使用すると、リンクのバナーを作成できます。 |
 |
プレビュー | Theme Creator |
 |
リポジトリ | GitHub - Arkshine/discourse-banner-featured-links · GitHub |
 |
インストールガイド | テーマまたはテーマコンポーネントのインストール方法 |
 |
Discourse テーマに初めての方へ | Discourse テーマの使い方入門ガイド |
このテーマコンポーネントをインストール
概要
Banner Featured Links を使用すると、リンクのバナーを作成できます。
多様なカスタマイズオプションを提供します。
これは、素晴らしい「Meta Branded」Discourse テーマに着想を得た機能です。
機能
デフォルトの見た目は、テーマの色を使用します。
ボタンは個別にスタイルを設定できます:
plugin outlet 設定を通じて、リンクをさまざまな場所に配置できます。
一般的な場所のリストは説明に記載されています。
例えば、Meta Brand テーマを模倣したい場合は、search-banner-below-input アウトレットを使用します。これには、Search Banner コンポーネントがインストールされていることが前提です。
設定
一般
| 名前 | 説明 |
|---|---|
links |
ヘッダーに表示するテキストリンク。 |
show_for_members |
ログインユーザーにリンクを表示する。 |
show_for_anon |
匿名ユーザーにリンクを表示する。 |
display_on_mobile |
モバイルデバイスでリンクを表示する。 |
display_on_desktop |
デスクトップコンピュータでリンクを表示する。 |
display on homepage |
ホームページでリンクを表示する。 |
url must contain |
バナーを表示するパスを入力します。パスの末尾にワイルドカードとして * を追加します。 |
plugin outlet |
リンクを表示する場所。一般的な場所above-main-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-streamSearch Banner コンポーネント: search-banner-below-headlinesearch-banner-below-input |
links 設定:
| 名前 | 説明 |
|---|---|
| アイコン | リンクに表示するFontAwesome アイコンまたは絵文字。ショートカットWindows: Win + . Mac: Cmd + Ctrl + Space ChromeOS: Launch + Shift + Space |
| タイトル | リンクのタイトル。 |
| URL | リンク先の URL。 |
| ターゲット | リンクされたドキュメントを開く方法:_blank: 新しいウィンドウまたはタブで開く（デフォルト）_self: クリックしたフレームと同じフレームで開く_parent: 親フレームで開く_top: ウィンドウ全体で開く。 |
ボタンごとにスタイルを設定することも可能です。これはグローバルスタイルを上書きします。
| 名前 | 説明 |
|---|---|
| 幅 | ボタンの幅 (width)。 |
| フォント | ボタンのフォント (font)。 |
| 丸み | ボタンに適用する丸みの量 (border-radius)。 |
| 背景 | ボタンの背景色 (background-color)。 |
| 背景ホバー` | ホバー時のボタンの背景色 (background-color)。 |
| 色` | ボタンのテキスト色 (color)。 |
| 色ホバー` | ホバー時のボタンのテキスト色 (color)。 |
| 境界線 | ボタンの境界線 (border)。 |
| 境界線ホバー | ホバー時のボタンの境界線 (border)。 |
| 影 | ボタンの影 (box-shadow)。 |
| CSS クラス名 | ボタンに適用するカスタム CSS クラス。 ボタンを異なる方法でスタイル設定したい場合や、設定だけでは不十分な場合に便利です。 .banner-featured-links__link.your-classname {} でターゲット指定が可能です。 |
グローバルスタイル
リンクのデフォルトの間隔と見た目をカスタマイズします。
各リンクごとにボタンスタイルを上書きできます。
ボタンラッパーのスタイル
リンクのコンテナをカスタマイズします。
| 名前 | 説明 |
|---|---|
buttons wrapper max width |
ボタンラッパーの最大幅 (max-width)。 |
buttons wrapper margin |
ボタンラッパーの余白 (margin)。 |
mobile buttons wrapper max width |
モバイルでのボタンラッパーの最大幅 (max-width)。 |
mobile buttons wrapper margin |
モバイルでのボタンラッパーの余白 (margin)。 |
ボタンの間隔とテキストフォント
ボタンの間隔とテキストのフォントサイズをカスタマイズします。
| 名前 | 説明 |
|---|---|
buttons justify |
リンクの間と周囲にスペース (space)を分配する方法。 |
buttons gap |
ボタン間の隙間 (gap)。 |
buttons font |
ボタンのフォント (font)。 |
mobile buttons justify |
モバイルでのリンクの間と周囲にスペース (space)を分配する方法。 |
mobile buttons gap |
モバイルでのボタン間の隙間 (gap)。 |
mobile buttons direction |
モバイルでのボタンの方向 (direction)。 |
mobile buttons font |
モバイルでのボタンのフォント (font)。 |
ボタンのスタイル
ボタンのデフォルトの見た目をカスタマイズします。
| 名前 | 説明 |
|---|---|
button width |
ボタンの幅 (width)。 |
button padding |
ボタンの余白 (padding)。 |
button rounding |
ボタンに適用する丸みの量 (border-radius)。 |
button background |
ボタンの背景色 (background-color)。 |
button background hover |
ホバー時のボタンの背景色 (background-color)。 |
button color |
ボタンのテキスト色 (color)。 |
button colo hover |
ホバー時のボタンのテキスト色 (color)。 |
button border |
ボタンの境界線 (border)。 |
button border hover |
ホバー時のボタンの境界線 (border)。 |
button shadow |
ボタンの影 (box-shadow)。 |
高度なカスタマイズ
以下の CSS を使用してさらにカスタマイズできます:
.banner-featured-links {
&__wrapper {
}
&__wrapper-links {
}
&__link {
}
}
ボタンごとにカスタマイズを提供する場合は、CSS Classname 設定でクラス名を指定できます。
その後、以下のようにターゲット指定が可能です:
.banner-featured-links {
&__link.myclass {
}
}
便利なリンク
- Discourse コア CSS 変数: discourse/app/assets/stylesheets/color_definitions.scss at main · discourse/discourse · GitHub
”, “text”=>“New Widgets”, “target”=>“_self”, “button_color_hover”=>“
”, “text”=>“Join our Champion Program! “, “target”=>”_self”}]
。
