# トピックに重なるように、モバイルユーザー向けのフッターをアイコン付きでホームに作成する方法はありますか？
**URL:** https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541
**Category:** Development
**Created:** [2023 年 3 月 8 日午後 9:35 UTC](https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541 "2023-03-08T21:35:52Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2023 年 3 月 8 日午後 9:35 UTC](https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541/1 "2023-03-08T21:35:52Z")
ホームページ（およびすべてのページ）にフッターを作成し、そのフッターに他のオプションにアクセスするためのアイコンを配置することを考えていました。スクリプト、CSS、またはテーマコンポーネントでこれを行う方法はありますか？
---
### Author:  [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [2023 年 3 月 8 日午後 10:14 UTC](https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541/2 "2023-03-08T22:14:02Z")
はい、CSSの特定のセクションにコードを追加し、ホームページにのみ表示する方法を見つけることができます（おそらくヒントがあるはずです）。
> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648/1):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…
---
### Author:  [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2023 年 3 月 8 日午後 10:16 UTC](https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541/3 "2023-03-08T22:16:39Z")
この素晴らしいコンポーネントを見つけました。これが最新のものか知っていますか？
それとも、他に新しいコンポーネントはありますか？
> [@Discourse Tab Bar for Mobile](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696):
>
> GitHub repository: Screenshots Installation Follow the instructions in this #howto topic: Customization See the [readme](https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/master/README.md) file in the theme’s GitHub repository. Ideas to improve this theme are very welcome slightly_smiling_faceUpdate 24/12/2018: You no longer need to overwrite any code in order to customize this theme. It’s now shipped with theme settings that allow customization for each of the 6 tabs with ability to disable any tab. See the [readme](https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/master/README.md) file for detai…
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023 年 3 月 9 日午前 10:10 UTC](https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541/4 "2023-03-09T10:10:21Z")
もし「フッター」や「固定フッター」などの用語で探しているものが見つからない場合は、誰かに依頼するか、自分で作成する必要があるでしょう。
* * *
カスタムフッターを自分で作成したい場合は、ここから始められます。
フォーラムに新しいテーマコンポーネントを作成します。CSS/HTMLの編集で、「📱 Mobile」タブ → 「Body」に、次のHTMLコードを貼り付けます。
```html
```
「📱 Mobile」タブ → 「CSS」に、次のSCSSコードを貼り付けます。
```css
#footer-test {
position: sticky;
bottom: 0;
z-index: 2;
height: 80px;
background: red;
text-align: center;
body[class=""] & { // prevent the footer from being displayed during the splash screen
display: none;
}
}
```
結果：
---
### Author:  [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2023 年 3 月 9 日午後 3:26 UTC](https://meta.discourse.org/t/is-there-a-way-to-create-a-footer-on-the-home-with-icons-only-for-mobile-users-and-overlapping-the-topics/257541/5 "2023-03-09T15:26:23Z")
手伝ってくれてありがとう。でも、ここで動作するコンポーネントを見つけました。
> [@Discourse Tab Bar for Mobile](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696):
>
> GitHub repository: Screenshots Installation Follow the instructions in this #howto topic: Customization See the [readme](https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/master/README.md) file in the theme’s GitHub repository. Ideas to improve this theme are very welcome slightly_smiling_faceUpdate 24/12/2018: You no longer need to overwrite any code in order to customize this theme. It’s now shipped with theme settings that allow customization for each of the 6 tabs with ability to disable any tab. See the [readme](https://github.com/OsamaSayegh/discourse-tab-bar-theme/blob/master/README.md) file for detai…
これで、最後の「ボタン」に、さらに多くのボタンを残すオプションを追加する方法を知るだけで済みます。
