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

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

|||
-|-|-|
| 概要 | Easy Responsive Footer は、プレーンテキストのみを使用して完全にレスポンシブなフッターを構築できるようにします。
| | プレビュー | Discourse Theme Creatorでプレビュー |
| リポジトリリンク | \u003chttps://github.com/discourse/Discourse-easy-footer\u003e
|Discourseテーマ初心者ですか？ | Discourseテーマの使用方法に関する初心者ガイド

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

機能

デスクトップ

モバイル

設定

名前	説明
heading	フッターの見出しのテキスト。サイト名などを使用できます。最大長25文字。
blurb	コミュニティに関する短い説明を入力してください。最大長180文字。
sections	フッターに表示するセクション。小さいリンク。
social links	フッターに追加したいソーシャルリンク。
show footer on login required page	サイトがプライベートな場合のみ、ログインが必要なページにフッターを表示したい場合は、この設定をチェックしてください。
svg icons	上記のソーシャルリンク設定で使用されるFontAwesome 5アイコンのリスト。

このコンポーネントには、簡単に設定できる6つの設定があります。

1. 見出し

フッターの見出しのテキスト。サイト名などを使用できます。最大長25文字。

2. 説明文

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

3. リンクセクション

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

4. リンク

リンクセクションにリンクを追加します。1行に1項目、次の順序で入力します：
親、テキスト、URL、ターゲット、タイトル
各セクションのリンク数は似たような数に保つことをお勧めします。
親：このリンクが表示される親セクションの名前。上記のリストの text 値を使用します。
テキスト：このリンクに表示されるテキスト。
URL：この項目がリンクするパス。相対パスも使用できます。
ターゲット：この項目を新しいタブで開くか、同じタブで開くかを選択します。リンクを新しいタブで開くには blank を使用し、同じタブで開くには self を使用します。
タイトル：リンクにマウスを合わせたときに表示されるテキスト。

5. 小さいリンク

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

6. ソーシャルリンク

フッターに追加したいソーシャルリンクを次の形式で入力します：
プロバイダー、タイトル、URL、ターゲット
プロバイダー：FacebookやTwitterなどのプロバイダー名です。
タイトル：リンクにマウスを合わせたときに表示されるテキスト。
URL：リンクのパス。
ターゲット：リンクを新しいタブで開くには blank を使用し、同じタブで開くには self を使用します。

注意事項

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

\u003cbr\u003e

\u003e:discourse2: 私たちによってホストされていますか？ テーマコンポーネントは、Pro、Business、Enterpriseプランで利用できます。

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	31591	2025 年 8 月 4 日
FKB Pro - Social theme Theme	465	30449	2026 年 2 月 2 日
Custom Header Links Theme component official , custom-header-links	67	52430	2026 年 2 月 28 日
Discourse Category Headers theme component Theme component	191	17491	2026 年 3 月 7 日
⬇️ Dropdown Header Theme component pavilion	69	7518	2026 年 3 月 2 日

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

機能

設定

注意事項

関連トピック