---
title: "Flarumのカテゴリページのカテゴリに背景を追加する方法 - 憂いを忘れる一枚"
description: "この記事はFlarum公式フォーラムの投稿をもとにしたもので、CV 7.4.0で動作を確認済みです。その他のバージョンについては各自でお試しください。"
canonical_url: "https://www.ikxin.com/ja/article/flarum-category-background"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": "この記事はFlarum公式フォーラムの投稿をもとにしたもので、CV 7.4.0で動作を確認済みです。その他のバージョンについては各自でお試しください。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVt44Gu44Kr44OG44K044Oq44Oa44O844K444Gu44Kr44OG44K044Oq44Gr6IOM5pmv44KS6L-95Yqg44GZ44KL5pa55rOVIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~RmxhcnVt44Gu44Kr44OG44K044Oq44Oa44O844K444Gu44Kr44OG44K044Oq44Gr6IOM5pmv44KS6L-95Yqg44GZ44KL5pa55rOV%2Cdescription_~44GT44Gu6KiY5LqL44GvRmxhcnVt5YWs5byP44OV44Kp44O844Op44Og44Gu5oqV56i~44KS44KC44Go44Gr44GX44Gf44KC44Gu44Gn44CBQ1YgNy40LjDjgafli5XkvZzjgpLnorroqo3muIjjgb~jgafjgZnjgILjgZ3jga7ku5bjga7jg5Djg7zjgrjjg6fjg7PjgavjgaTjgYTjgabjga~lkIToh6rjgafjgYroqabjgZfjgY~jgaDjgZXjgYTjgII%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS1jYXRlZ29yeS1iYWNrZ3JvdW5kIg%2Cs_fPo_NlPmcQPY9xNG.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_~RmxhcnVt44Gu44Kr44OG44K044Oq44Oa44O844K444Gu44Kr44OG44K044Oq44Gr6IOM5pmv44KS6L-95Yqg44GZ44KL5pa55rOVIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~RmxhcnVt44Gu44Kr44OG44K044Oq44Oa44O844K444Gu44Kr44OG44K044Oq44Gr6IOM5pmv44KS6L-95Yqg44GZ44KL5pa55rOV%2Cdescription_~44GT44Gu6KiY5LqL44GvRmxhcnVt5YWs5byP44OV44Kp44O844Op44Og44Gu5oqV56i~44KS44KC44Go44Gr44GX44Gf44KC44Gu44Gn44CBQ1YgNy40LjDjgafli5XkvZzjgpLnorroqo3muIjjgb~jgafjgZnjgILjgZ3jga7ku5bjga7jg5Djg7zjgrjjg6fjg7PjgavjgaTjgYTjgabjga~lkIToh6rjgafjgYroqabjgZfjgY~jgaDjgZXjgYTjgII%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS1jYXRlZ29yeS1iYWNrZ3JvdW5kIg%2Cs_fPo_NlPmcQPY9xNG.png"
  "twitter:image:alt": "Flarumのカテゴリページのカテゴリに背景を追加する方法 - 憂いを忘れる一枚"
---

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

# **Flarumのカテゴリページのカテゴリに背景を追加する方法**

2018.07.29 5,275  0

この記事はFlarum公式フォーラムの [投稿](https://discuss.flarum.org/d/6205-add-background-image-on-tags-page)をもとにしたもので、CV 7.4.0で動作を確認済みです。その他のバージョンについては各自でお試しください。

カテゴリページの各カテゴリに個別の背景を追加します。これを実現するのは難しくありませんが、問題が1つあります。この方法を使う場合、タグの説明を使用できなくなります。

以下のファイルを変更します。

 Plain Text

```
vendor/flarum/flarum-ext-tags/js/forum/dist/extensions.js
```

以下の内容を：

 JavaScript

```
return m(
    'li',
    { className: 'TagTile ' + (tag.color() ? 'colored' : ''),
      style: { backgroundColor: tag.color() } },
    m(
        'a',
        { className: 'TagTile-info', href: app.route.tag(tag), config: m.route },
        m(
            'h3',
            { className: 'TagTile-name' },
            tag.name()
        ),
        m(
            'p',
            { className: 'TagTile-description' },
            tag.description()
        ),
```

次のように変更します：

 JavaScript

```
return m(
    'li',
    { className: 'TagTile ' + (tag.description() ? 'colored' : ''),
      style: { background: tag.description() } },
    m(
        'a',
        { className: 'TagTile-info', href: app.route.tag(tag), config: m.route },
        m(
            'h3',
            { className: 'TagTile-name' },
            tag.name()
        ),
```

その後、管理画面 — 外観設定 — カスタムスタイルに、以下を追加します：

 CSS

```
.SelectTagListItem-description {
    display: none;
}
```

使用方法：管理画面 - カテゴリ設定で、各ノードの説明欄に次のように入力します：

 Plain Text

```
url(http://xxx.com/xxx.jpg)
```

`http://xxx.com/xxx.jpg` を、各ノードに設定したい背景画像に置き換えます。

最終的な表示例は以下のとおりです：

![表示例](https://www.ikxin.com/_ipx/animated_true&w_1734&f_webp/https://img.8b5.cn/2019/06/27/5d145fb24ee04.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-category-background#webpage","@type":"WebPage","description":"この記事はFlarum公式フォーラムの投稿をもとにしたもので、CV 7.4.0で動作を確認済みです。その他のバージョンについては各自でお試しください。","name":"Flarumのカテゴリページのカテゴリに背景を追加する方法","url":"https://www.ikxin.com/ja/article/flarum-category-background","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/flarum-category-background"]}]}]}
```

## Sitemap

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