簡単でレスポンシブなフッター

Discourse · 2018 年 8 月 28 日午前 8:19

このテーマコンポーネントをインストール

機能

デスクトップ

モバイル

設定

名前	説明
heading	フッターの見出しテキスト（例：サイト名） - 最大 25 文字
blurb	コミュニティに関する短い説明文 - 最大 180 文字
sections	フッターに表示するセクション
small links	利用規約やプライバシーポリシーなどのフッター下部の小さなリンク
social links	フッターに追加したいソーシャルリンク
show footer on login required page	ログインが必要なページにフッターを表示したい場合はこの設定にチェックを入れてください（サイトが非公開の場合のみ有効）
svg icons	上記のソーシャルリンク設定で使用される FontAwesome 7 アイコンのリスト。

このコンポーネントには、簡単に設定を構成するための 6 つの設定項目があります。

1. 見出し

フッターの見出しテキスト（例：サイト名） - 最大 25 文字

2. 説明文

コミュニティに関する短い説明文 - 最大 180 文字

3. リンクセクション

リンクセクションを追加します。理想的なセクション数は 6 です。1 行に 1 つの項目を以下の順序で入力：テキスト、タイトル
テキスト：フッターに表示される文字
タイトル：項目にカーソルを合わせたときに表示される文字

4. リンク

リンクセクションにリンクを追加します。1 行に 1 つの項目を以下の順序で入力：
親、テキスト、URL、ターゲット、タイトル
各セクションのリンク数を同程度に保つことをお勧めします
親：このリンクが表示される親セクションの名前。上記のリストから text 値を使用
テキスト：このリンクに表示される文字
URL：この項目がリンクするパス。相対パスも使用可能
ターゲット：この項目を新しいタブで開くか、同じタブで開くかを選択。新しいタブで開く場合は空白、同じタブで開く場合は self を使用
タイトル：リンクにカーソルを合わせたときに表示される文字

5. 小さなリンク

利用規約やプライバシーポリシーなどの小さなリンクをフッターの下部に追加できます。1 行に 1 つの項目を以下の順序で入力：
テキスト、URL、ターゲット
テキスト：小さなリンクに表示される文字
URL：リンクのパス
ターゲット：新しいタブで開く場合は空白、同じタブで開く場合は self を使用

6. ソーシャルリンク

以下の形式でフッターに追加したいソーシャルリンクを入力してください：
プロバイダー、タイトル、URL、ターゲット
プロバイダー：Facebook や Twitter などのプロバイダー名
タイトル：リンクにカーソルを合わせたときに表示される文字
URL：リンクが持つパス
ターゲット：新しいタブで開く場合は空白、同じタブで開く場合は self を使用

注意事項

コンポーネントのデフォルトとしてプレースホルダー項目を残しています。これで、設定がどのように見えるか簡単に確認できます。
このコンポーネントはテーマのカラースケームを使用して、要素に使用される色を生成します。ただし、必要に応じて上書きできるように、すべての要素には一意のクラスが追加されています。
このコンポーネントはテーマ設定を使用するため、将来のアップデートで修正や改善が行われても、入力したデータは失われません

当社のホスティングサービスをご利用中ですか？ プロ、ビジネス、エンタープライズプランではテーマコンポーネントを利用できます。

Johani · 2020 年 11 月 29 日午後 12:24

いくつかの修正をプッシュしました。

主な変更点：

コンポーネントが CSS 変数を使用するようになったため、ダークモードに対応しました
@mbauman が報告したバグを修正するために、メディアクエリの一部を修正しました
ログインが必要なページでフッターを表示するかどうかを制御できる設定を追加しました

image1102×307 37.7 KB

この原因は CSS 特異度です。あなたの CSS は .wrap をターゲットにしており、機能していますが、このコンポーネントにも #main-outlet をターゲットにして、短いページでもフッターを下部に保つためのプロパティを追加する CSS が含まれています。

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

#main-outlet セレクターは ID ベースであるため、あなたの .wrap セレクターよりも特異度が高く、スタイルを上書きしてしまいます。

以下の CSS を追加することで修正できます。

#main {
  #main-outlet {
    width: 1200px; // お好みの幅に変更してください
  }
}

はい、設定で不要な列をすべて削除すれば、3 列になります。

この問題は再現できませんが、エラーから設定が正しくないことが推測されます。各設定の下の指示に従ったか、もう一度確認してください。問題が解決しない場合は、問題が発生しているサイトのリンクを共有してください。

\u003chr\u003e

少し整理を行い、コンポーネントを更新することで修正されるバグに関する返信を削除しました。問題が解決しない場合は、再度投稿してください。

dadberg · 2021 年 2 月 9 日午前 11:41

ヘッダーテキスト（This is a header）をロゴに置き換えられるかどうか、[Easy Footer Theme Component by Joe] 内で気になっています。

hbs ファイルを変更するためにコンポーネントをエクスポートしてみましたが、うまくいきませんでした。何かヒントが必要だと思います。

ご助言いただければ幸いです

dax · 2021 年 2 月 9 日午後 1:17

やりたいことに応じて、次のようなことを試すことができます。

Easy responsive footer のテーマ設定で、「Blurb」設定内のテキストを削除します。「Heading」設定内のテキストを削除することもできます。

新しいテーマコンポーネントを作成し、「Common > CSS」タブに追加します。

.custom-footer .first-box .blurb::before {
    background-image: url(LOGO-URL);
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    /*ロゴのサイズに合わせて以下の設定を変更してください*/
    background-size: 200px 200px;
    width: 200px;
    height: 200px;
}

これにより、次のような結果が得られます。

dadberg · 2021 年 2 月 9 日午後 1:43

解決しました！

オープンソースエコシステムへの私の信念は、あなたのような素晴らしい人々によって最初に支えられました。

Jcava5 · 2021 年 4 月 2 日午前 12:02

背景色やテキストの色を CSS でカスタマイズできるオプションがあるとよいでしょう。デフォルトではヘッダーと色が合いません。

それ以外は非常に良く動きます！ありがとうございます！

thaidb · 2021 年 4 月 2 日午前 8:10

こんにちは、Joe。ここと同じようにウィジェットを追加することはできますか？

b481 · 2021 年 5 月 4 日午前 9:43

これにより、コンポーネントで指定したにもかかわらず、検索結果の blurb::before にロゴが表示されてしまいました。

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);
}

検索結果には表示されず、フッターには表示されるようにする方法はありますか？

littleviolette · 2021 年 8 月 28 日午後 5:42

素晴らしいフッターをありがとうございます！Font Awesome の Tiktok ロゴが表示されない問題に直面しています。SVG アイコン設定に fab-tiktok、fa-tiktok、fas-tiktok、tiktok を追加してみましたが、どれも Tiktok ロゴがレンダリングされません。

ご協力いただきありがとうございます！

bekircem · 2021 年 9 月 14 日午後 10:29

タイトルの25文字制限を変更したいです。CSSでタイトルを配置したいのですが、最も簡単な方法はありますか？

keegan · 2021 年 9 月 14 日午後 11:45

@bekircem
文字数制限を超えると一部が破損する可能性がありますが、以下をお試しください。

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
}

ただし、visibility: hidden を使用すると空白スペースが維持されてしまいます。タイトルがどの程度大きくなるかによりますが、代わりに以下を試してみてください。

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

bekircem · 2021 年 10 月 20 日午後 10:20

href属性なしのリンクセクションにテキストを追加することは可能でしょうか？

IAmGav · 2021 年 10 月 20 日午後 10:50

URL が来る場所に # を追加するだけです

bekircem · 2021 年 10 月 20 日午後 10:52

この場合、それでもクリック可能な URL として表示されます。a タグを表示させずに追加する方法はありますか？

Johani · 2021 年 12 月 9 日午前 10:51

テーマのどこかにこのCSSを追加できます

.custom-footer a[href="#"] {
  pointer-events: none;
}

pfaffman · 2021 年 12 月 15 日午後 2:26

これを提出しました。

これにより、pluginId がないことによる非推奨の問題が修正されるはずです。テストはしていませんが、私には正しく見えます。

編集：しかし、全く正しくありませんでした。

umbergerba · 2022 年 2 月 8 日午後 5:01

FYI バグ >>> 次を追加すると…「Community, Tags List, /tags, self, List of all Tags」… フロントエンドに水平線が表示されます。「Tags List」の間の [スペース] を削除し、「TagsList」に変更すると、HR は消えます。

mkschulze · 2022 年 2 月 12 日午前 10:14

こんにちは。ソーシャルリンクとFontawesomeアイコンについて2つの問題があります。

ソーシャルエリアで他のFontawesome 5アイコンを設定しようとしましたが、表示されません。
<i> class="fad fa-home"></i> を使用したいです。
GitHubリンクを設定したところ、svg-iconsのリストに実際にはアイコンを追加していないのに、すでにページにアイコンが表示されています。

編集：アイコン名を「home」にするだけで解決しました

AquaL1te · 2022 年 5 月 7 日午後 4:58

このテーマコンポーネントを携帯電話で使用すると、幅が画面幅に設定されません。幅が拡張され、ほぼデスクトップモニターのサイズになります。

テストはここで実行できます：https://forum.tzm.community/

携帯電話で開くか（またはブラウザのデバッグオプションを使用してください。FirefoxではGalaxy Note 20 Linuxプロファイルを使用してバグをトリガーできます）。

dax · 2022 年 5 月 11 日午後 7:43

コンポーネントは修正されました。更新が必要です。

トピック		返信	表示
Custom Header Links (icons) Theme component official , custom-header-icons	119	31663	2025 年 8 月 4 日
FKB Pro - Social theme Theme	473	31510	2026 年 4 月 29 日
Custom Header Links Theme component official , custom-header-links	67	52551	2026 年 2 月 28 日
Discourse Category Headers theme component Theme component	191	17628	2026 年 3 月 7 日
⬇️ Dropdown Header Theme component pavilion	69	7594	2026 年 3 月 2 日

簡単でレスポンシブなフッター

機能

設定

注意事項

関連トピック