---
title: "Flarum のウェルカムバナーのホームページに背景を追加 - 憂いを忘れる一枚"
description: "まず言っておくと、またしてもあまり役に立たない Flarum のカスタマイズチュートリアルです。この記事ではサイト全体の Banner に背景を追加できるだけです。もし「カテゴリーに合わせて変化すればいいのに」と言う人がいたら、申し訳ありません。Beta 8 では Toby がウェルカムバナーを完全に廃止する予定です。"
canonical_url: "https://www.ikxin.com/ja/article/flarum-welcome-background"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": "まず言っておくと、またしてもあまり役に立たない Flarum のカスタマイズチュートリアルです。この記事ではサイト全体の Banner に背景を追加できるだけです。もし「カテゴリーに合わせて変化すればいいのに」と言う人がいたら、申し訳ありません。Beta 8 では Toby がウェルカムバナーを完全に廃止する予定です。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIOOBruOCpuOCp-ODq-OCq-ODoOODkOODiuODvOOBruODm-ODvOODoOODmuODvOOCuOOBq-iDjOaZr-OCkui~veWKoCAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~RmxhcnVtIOOBruOCpuOCp-ODq-OCq-ODoOODkOODiuODvOOBruODm-ODvOODoOODmuODvOOCuOOBq-iDjOaZr-OCkui~veWKoA%2Cdescription_~44G-44Ga6KiA44Gj44Gm44GK44GP44Go44CB44G-44Gf44GX44Gm44KC44GC44G-44KK5b2544Gr56uL44Gf44Gq44GEIEZsYXJ1bSDjga7jgqvjgrnjgr~jg57jgqTjgrrjg4Hjg6Xjg7zjg4jjg6rjgqLjg6vjgafjgZnjgILjgZPjga7oqJjkuovjgafjga~jgrXjgqTjg4jlhajkvZPjga4gQmFubmVyIOOBq-iDjOaZr-OCkui~veWKoOOBp-OBjeOCi-OBoOOBkeOBp-OBmeOAguOCguOBl-OAjOOCq-ODhuOCtOODquODvOOBq-WQiOOCj-OBm-OBpuWkieWMluOBmeOCjOOBsOOBhOOBhOOBruOBq-OAjeOBqOiogOOBhuS6uuOBjOOBhOOBn-OCieOAgeeUs-OBl-ios-OBguOCiuOBvuOBm-OCk-OAgkJldGEgOCDjgafjga8gVG9ieSDjgYzjgqbjgqfjg6vjgqvjg6Djg5Djg4rjg7zjgpLlrozlhajjgavlu4PmraLjgZnjgovkuojlrprjgafjgZnjgII%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS13ZWxjb21lLWJhY2tncm91bmQi%2Cs_rqPhsbePUhFsJ92l.png"
  "og:image:alt": "Flarum のウェルカムバナーのホームページに背景を追加 - 憂いを忘れる一枚"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Flarum のウェルカムバナーのホームページに背景を追加"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIOOBruOCpuOCp-ODq-OCq-ODoOODkOODiuODvOOBruODm-ODvOODoOODmuODvOOCuOOBq-iDjOaZr-OCkui~veWKoCAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~RmxhcnVtIOOBruOCpuOCp-ODq-OCq-ODoOODkOODiuODvOOBruODm-ODvOODoOODmuODvOOCuOOBq-iDjOaZr-OCkui~veWKoA%2Cdescription_~44G-44Ga6KiA44Gj44Gm44GK44GP44Go44CB44G-44Gf44GX44Gm44KC44GC44G-44KK5b2544Gr56uL44Gf44Gq44GEIEZsYXJ1bSDjga7jgqvjgrnjgr~jg57jgqTjgrrjg4Hjg6Xjg7zjg4jjg6rjgqLjg6vjgafjgZnjgILjgZPjga7oqJjkuovjgafjga~jgrXjgqTjg4jlhajkvZPjga4gQmFubmVyIOOBq-iDjOaZr-OCkui~veWKoOOBp-OBjeOCi-OBoOOBkeOBp-OBmeOAguOCguOBl-OAjOOCq-ODhuOCtOODquODvOOBq-WQiOOCj-OBm-OBpuWkieWMluOBmeOCjOOBsOOBhOOBhOOBruOBq-OAjeOBqOiogOOBhuS6uuOBjOOBhOOBn-OCieOAgeeUs-OBl-ios-OBguOCiuOBvuOBm-OCk-OAgkJldGEgOCDjgafjga8gVG9ieSDjgYzjgqbjgqfjg6vjgqvjg6Djg5Djg4rjg7zjgpLlrozlhajjgavlu4PmraLjgZnjgovkuojlrprjgafjgZnjgII%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS13ZWxjb21lLWJhY2tncm91bmQi%2Cs_rqPhsbePUhFsJ92l.png"
  "twitter:image:alt": "Flarum のウェルカムバナーのホームページに背景を追加 - 憂いを忘れる一枚"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **Flarum のウェルカムバナーのホームページに背景を追加**

2018.07.28 7,009  0

## 本文

まず言っておくと、またしてもあまり役に立たない Flarum のカスタマイズチュートリアルです。この記事ではサイト全体の Banner に背景を追加できるだけです。もし「カテゴリーに合わせて変化すればいいのに」と言う人がいたら、申し訳ありません。Beta 8 では Toby がウェルカムバナーを完全に廃止する予定です。その時点でこの機能は存在しなくなるため、この記事もおそらくすぐに使えなくなります。B7 バージョン専用です。

## 手順

ウェルカムバナーに背景を追加します（大きな画像を使用する場合は、幅が 1920px 未満でない画像をできるだけ選択してください。繰り返しを許可する画像を使用する場合は例外です）。

管理画面 — 外観設定 — カスタムスタイルを編集し、以下を追加します

 CSS

```
.Hero {
    background: url(图片链接) no-repeat top fixed;
    text-align: center;
    color: #FFFFFF;
    height: 180px;
    width: 100%;
}
```

繰り返しを許可する画像の場合は、`no-repeat` を `repeat-x` または `repeat-y`（横方向の繰り返しと縦方向の繰り返し）に変更してください。横方向と縦方向の両方を繰り返す場合は `repeat` です。

ホームページに背景を追加する方法です（ウェルカムバナーの背景を追加した場合、ホームページの背景のバナー部分はウェルカムバナーの背景で覆われます）。

管理画面 — 外観設定 — カスタムスタイルを編集し、以下を追加します

 CSS

```
.IndexPage {
    background: url(图片链接) no-repeat center fixed;
    background-size: contain;
}
```

## デモ画像

![デモ画像](https://www.ikxin.com/_ipx/animated_true&w_1734&f_webp/https://img.8b5.cn/2019/06/27/5d145f7461443.png)

## **コメント**

(0)

まだコメントはありません

## **コメントを投稿**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/flarum-welcome-background#webpage","@type":"WebPage","description":"まず言っておくと、またしてもあまり役に立たない Flarum のカスタマイズチュートリアルです。この記事ではサイト全体の Banner に背景を追加できるだけです。もし「カテゴリーに合わせて変化すればいいのに」と言う人がいたら、申し訳ありません。Beta 8 では Toby がウェルカムバナーを完全に廃止する予定です。","name":"Flarum のウェルカムバナーのホームページに背景を追加","url":"https://www.ikxin.com/ja/article/flarum-welcome-background","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/flarum-welcome-background"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.