---
title: "Flarumの検索ボックスアイコンボタンの色を変更する - 憂いを忘れる一枚"
description: このチュートリアルは完全に余計なものです。ただ、個人的には色を少し変更したほうが見栄えがよいと思っただけです。結局のところ、好みは人それぞれなので、元の色が好きな人もいるかもしれませんが、記録として残しておきます。もし私と同じように別の色に変更したい人がいるかもしれませんので、まずは画像をご覧ください。
canonical_url: "https://www.ikxin.com/ja/article/flarum-search-icon-color"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": このチュートリアルは完全に余計なものです。ただ、個人的には色を少し変更したほうが見栄えがよいと思っただけです。結局のところ、好みは人それぞれなので、元の色が好きな人もいるかもしれませんが、記録として残しておきます。もし私と同じように別の色に変更したい人がいるかもしれませんので、まずは画像をご覧ください。
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVt44Gu5qSc57Si44Oc44OD44Kv44K544Ki44Kk44Kz44Oz44Oc44K~44Oz44Gu6Imy44KS5aSJ5pu044GZ44KLIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~RmxhcnVt44Gu5qSc57Si44Oc44OD44Kv44K544Ki44Kk44Kz44Oz44Oc44K~44Oz44Gu6Imy44KS5aSJ5pu044GZ44KL%2Cdescription_~44GT44Gu44OB44Ol44O844OI44Oq44Ki44Or44Gv5a6M5YWo44Gr5L2Z6KiI44Gq44KC44Gu44Gn44GZ44CC44Gf44Gg44CB5YCL5Lq655qE44Gr44Gv6Imy44KS5bCR44GX5aSJ5pu044GX44Gf44G744GG44GM6KaL5qCE44GI44GM44KI44GE44Go5oCd44Gj44Gf44Gg44GR44Gn44GZ44CC57WQ5bGA44Gu44Go44GT44KN44CB5aW944G~44Gv5Lq644Gd44KM44Ge44KM44Gq44Gu44Gn44CB5YWD44Gu6Imy44GM5aW944GN44Gq5Lq644KC44GE44KL44GL44KC44GX44KM44G-44Gb44KT44GM44CB6KiY6Yyy44Go44GX44Gm5q6L44GX44Gm44GK44GN44G-44GZ44CC44KC44GX56eB44Go5ZCM44GY44KI44GG44Gr5Yil44Gu6Imy44Gr5aSJ5pu044GX44Gf44GE5Lq644GM44GE44KL44GL44KC44GX44KM44G-44Gb44KT44Gu44Gn44CB44G-44Ga44Gv55S75YOP44KS44GU6Kan44GP44Gg44GV44GE44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS1zZWFyY2gtaWNvbi1jb2xvciI%2Cs_Nx5XzLDh3qkm26xX.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_~RmxhcnVt44Gu5qSc57Si44Oc44OD44Kv44K544Ki44Kk44Kz44Oz44Oc44K~44Oz44Gu6Imy44KS5aSJ5pu044GZ44KLIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~RmxhcnVt44Gu5qSc57Si44Oc44OD44Kv44K544Ki44Kk44Kz44Oz44Oc44K~44Oz44Gu6Imy44KS5aSJ5pu044GZ44KL%2Cdescription_~44GT44Gu44OB44Ol44O844OI44Oq44Ki44Or44Gv5a6M5YWo44Gr5L2Z6KiI44Gq44KC44Gu44Gn44GZ44CC44Gf44Gg44CB5YCL5Lq655qE44Gr44Gv6Imy44KS5bCR44GX5aSJ5pu044GX44Gf44G744GG44GM6KaL5qCE44GI44GM44KI44GE44Go5oCd44Gj44Gf44Gg44GR44Gn44GZ44CC57WQ5bGA44Gu44Go44GT44KN44CB5aW944G~44Gv5Lq644Gd44KM44Ge44KM44Gq44Gu44Gn44CB5YWD44Gu6Imy44GM5aW944GN44Gq5Lq644KC44GE44KL44GL44KC44GX44KM44G-44Gb44KT44GM44CB6KiY6Yyy44Go44GX44Gm5q6L44GX44Gm44GK44GN44G-44GZ44CC44KC44GX56eB44Go5ZCM44GY44KI44GG44Gr5Yil44Gu6Imy44Gr5aSJ5pu044GX44Gf44GE5Lq644GM44GE44KL44GL44KC44GX44KM44G-44Gb44KT44Gu44Gn44CB44G-44Ga44Gv55S75YOP44KS44GU6Kan44GP44Gg44GV44GE44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS1zZWFyY2gtaWNvbi1jb2xvciI%2Cs_Nx5XzLDh3qkm26xX.png"
  "twitter:image:alt": "Flarumの検索ボックスアイコンボタンの色を変更する - 憂いを忘れる一枚"
---

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

# **Flarumの検索ボックスアイコンボタンの色を変更する**

2018.07.25 4,448  0

このチュートリアルは完全に余計なものです。ただ、個人的には色を少し変更したほうが見栄えがよいと思っただけです。結局のところ、好みは人それぞれなので、元の色が好きな人もいるかもしれませんが、記録として残しておきます。もし私と同じように別の色に変更したい人がいるかもしれませんので、まずは画像をご覧ください。

## 手順

まず検索ボックスのクラス名を確認します。F12 キーで要素を検証します。

`.Search-input:before` クラス名を取得したら、開きます。

 Less

```
/vendor/flarum/core/less/lib/Search.less
```

下図のように変更します。左側が変更後、右側が元のバージョンです。

次の CSS に変更する必要があります。

 CSS

```
background: #2aaaff;
color: #fff;
border-radius: 4px 0 0 4px;
padding-left: 40px;
padding-right: 10px;
```

Background はウェブサイトのテーマカラーと同期します。

 CSS

```
background: #2aaaff; 
改成
background: @primary-color;
```

## **コメント**

(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-search-icon-color#webpage","@type":"WebPage","description":"このチュートリアルは完全に余計なものです。ただ、個人的には色を少し変更したほうが見栄えがよいと思っただけです。結局のところ、好みは人それぞれなので、元の色が好きな人もいるかもしれませんが、記録として残しておきます。もし私と同じように別の色に変更したい人がいるかもしれませんので、まずは画像をご覧ください。","name":"Flarumの検索ボックスアイコンボタンの色を変更する","url":"https://www.ikxin.com/ja/article/flarum-search-icon-color","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/flarum-search-icon-color"]}]}]}
```

## Sitemap

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