---
title: "Flarum ユーザーアバターの下にレベルバーを追加 - 憂いを忘れる一枚"
description: "また一つ、特に役に立たない機能です。投稿一覧のユーザーアバターの下にレベル進行バーを追加します。まず、コードを提供してくださった 4tabern.com に感謝します。デモは掲載しません。自分のサイトでも使っておらず、実際には余計なものだと感じているためです。実際の効果はご自身でお試しください。フィードバックも歓迎しま"
canonical_url: "https://www.ikxin.com/ja/article/flarum-avatar-levelbar"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": "また一つ、特に役に立たない機能です。投稿一覧のユーザーアバターの下にレベル進行バーを追加します。まず、コードを提供してくださった 4tabern.com に感謝します。デモは掲載しません。自分のサイトでも使っておらず、実際には余計なものだと感じているためです。実際の効果はご自身でお試しください。フィードバックも歓迎しま"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIOODpuODvOOCtuODvOOCouODkOOCv-ODvOOBruS4i-OBq-ODrOODmeODq-ODkOODvOOCkui~veWKoCAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~RmxhcnVtIOODpuODvOOCtuODvOOCouODkOOCv-ODvOOBruS4i-OBq-ODrOODmeODq-ODkOODvOOCkui~veWKoA%2Cdescription_~44G-44Gf5LiA44Gk44CB54m544Gr5b2544Gr56uL44Gf44Gq44GE5qmf6IO944Gn44GZ44CC5oqV56i~5LiA6Kan44Gu44Om44O844K244O844Ki44OQ44K~44O844Gu5LiL44Gr44Os44OZ44Or6YCy6KGM44OQ44O844KS6L-95Yqg44GX44G-44GZ44CC44G-44Ga44CB44Kz44O844OJ44KS5o-Q5L6b44GX44Gm44GP44Gg44GV44Gj44GfIDR0YWJlcm4uY29tIOOBq-aEn-isneOBl-OBvuOBmeOAguODh-ODouOBr-aOsui8ieOBl-OBvuOBm-OCk-OAguiHquWIhuOBruOCteOCpOODiOOBp-OCguS9v-OBo-OBpuOBiuOCieOBmuOAgeWun-mam-OBq-OBr-S9meioiOOBquOCguOBruOBoOOBqOaEn-OBmOOBpuOBhOOCi-OBn-OCgeOBp-OBmeOAguWun-mam-OBruWKueaenOOBr-OBlOiHqui6q-OBp-OBiuippuOBl-OBj-OBoOOBleOBhOOAguODleOCo-ODvOODieODkOODg-OCr-OCguatk-i~juOBl-OBvg%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS1hdmF0YXItbGV2ZWxiYXIi%2Cs_z_BEMDb_oWyECLJ-.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_~RmxhcnVtIOODpuODvOOCtuODvOOCouODkOOCv-ODvOOBruS4i-OBq-ODrOODmeODq-ODkOODvOOCkui~veWKoCAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~RmxhcnVtIOODpuODvOOCtuODvOOCouODkOOCv-ODvOOBruS4i-OBq-ODrOODmeODq-ODkOODvOOCkui~veWKoA%2Cdescription_~44G-44Gf5LiA44Gk44CB54m544Gr5b2544Gr56uL44Gf44Gq44GE5qmf6IO944Gn44GZ44CC5oqV56i~5LiA6Kan44Gu44Om44O844K244O844Ki44OQ44K~44O844Gu5LiL44Gr44Os44OZ44Or6YCy6KGM44OQ44O844KS6L-95Yqg44GX44G-44GZ44CC44G-44Ga44CB44Kz44O844OJ44KS5o-Q5L6b44GX44Gm44GP44Gg44GV44Gj44GfIDR0YWJlcm4uY29tIOOBq-aEn-isneOBl-OBvuOBmeOAguODh-ODouOBr-aOsui8ieOBl-OBvuOBm-OCk-OAguiHquWIhuOBruOCteOCpOODiOOBp-OCguS9v-OBo-OBpuOBiuOCieOBmuOAgeWun-mam-OBq-OBr-S9meioiOOBquOCguOBruOBoOOBqOaEn-OBmOOBpuOBhOOCi-OBn-OCgeOBp-OBmeOAguWun-mam-OBruWKueaenOOBr-OBlOiHqui6q-OBp-OBiuippuOBl-OBj-OBoOOBleOBhOOAguODleOCo-ODvOODieODkOODg-OCr-OCguatk-i~juOBl-OBvg%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS1hdmF0YXItbGV2ZWxiYXIi%2Cs_z_BEMDb_oWyECLJ-.png"
  "twitter:image:alt": "Flarum ユーザーアバターの下にレベルバーを追加 - 憂いを忘れる一枚"
---

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

# **Flarum ユーザーアバターの下にレベルバーを追加**

2018.07.27 4,670  0

また一つ、特に役に立たない機能です。投稿一覧のユーザーアバターの下にレベル進行バーを追加します。まず、コードを提供してくださった [4tabern.com](https://4tabern.com) に感謝します。デモは掲載しません。自分のサイトでも使っておらず、実際には余計なものだと感じているためです。実際の効果はご自身でお試しください。フィードバックも歓迎します。

以下の変更は Flarum 0.1.0 beta7 - Flarum 0.1.0 beta7.1 にのみ適用されます（その他のバージョンでは、置き換えるコード内の追加部分を個別に挿入してください）。

## 手順

ファイル `vendor/flarum/core/js/forum/dist/app.js` を編集します。

この部分を

 JavaScript

```
            var card = '';

            if (!post.isHidden() && this.cardVisible) {
              card = UserCard.component({
                user: user,
                className: 'UserCard--popover',
                controlsButtonClassName: 'Button Button--icon Button--flat'
              });
            }

            return m(
              'div',
              { className: 'PostUser' },
              m(
                'h3',
                null,
                m(
                  'a',
                  { href: app.route.user(user), config: m.route },
                  avatar(user, { className: 'PostUser-avatar' }),
                  userOnline(user),
                  username(user)
                )
              ),
              m(
                'ul',
                { className: 'PostUser-badges badges' },
                listItems(user.badges().toArray())
              ),
              card
            );
          }
        }, {
          key: 'config',
          value: function config(isInitialized) {
            var _this2 = this;

            if (isInitialized) return;

            var timeout = void 0;
```

次の内容に変更します。

 JavaScript

```
            var card = '';

            var exp_c = (user.data.attributes.commentsCount - user.data.attributes.discussionsCount) * 21;
            var exp_d = user.data.attributes.discussionsCount * 33;
            var exp_total = exp_c + exp_d;
            var level = Math.floor(exp_total / 135);
            var exp_percent = (100 / 135) * ((exp_total) - (level * 135));

            if (!post.isHidden() && this.cardVisible) {
              card = UserCard.component({
                user: user,
                className: 'UserCard--popover',
                controlsButtonClassName: 'Button Button--icon Button--flat'
              });
            }

            return m(
              'div',
              { className: 'PostUser' },
              userOnline(user),
              m(
                'h3',
                null,
                m(
                  'a',
                  { href: app.route.user(user), config: m.route },
                  avatar(user, { className: 'PostUser-avatar' }),
                  ' ',
                  username(user)
                )
              ),
              m(
                'ul',
                { className: 'PostUser-badges badges' },
                listItems(user.badges().toArray())
              ),
              card,
              m(
                'div',
                { className: 'PostUser-level' },
                '等级' + ' ' + level,
                m(
                  'div',
                  { className: 'levelbar-empty', style: 'width:100%' },
                  m(
                    'div',
                    { className: 'levelbar', style: 'width:' + exp_percent + '%' }
                  )
                )
              )
            );
          }
        }, {
          key: 'config',
          value: function config(isInitialized) {
            var _this2 = this;

            if (isInitialized) return;

            var timeout = void 0;

            var user = this.props.post.user();

            if (user) {
              var exp_c = (user.data.attributes.commentsCount - user.data.attributes.discussionsCount) * 21;
              var exp_d = user.data.attributes.discussionsCount * 33;
              var exp_total = exp_c + exp_d;
              this.$('.levelbar-empty').tooltip({ container: 'body', title: exp_total + ' ' + '积分' });
            }
```

主な内容の説明：

コピーする前に、内部の `等级` と `积分` を希望する内容に変更してください。「等级」は進行バー上に表示される文字で、「积分」はマウスを上に移動したときに表示されるツールチップです。

変数の説明：`user.data.attributes.commentsCount` はユーザーの返信数、`user.data.attributes.discussionsCount` はユーザーのトピック数です。

上記ではこの2つの変数に対して加減乗除を行っています。必要に応じてご自身で変更してください。現在のアルゴリズムでは、レベルアップは比較的簡単です。

最後に、LESS スタイルを追加する必要があります。

`\vendor\flarum\core\less\forum\Post.less` を編集します。

末尾に追加します。

 Less

```
@media (max-width: 767px) {
    .PostUser-level { display: none; }
    .PostUser-level .levelbar-empty { display: none; }
    .PostUser-level .levelbar { display: none; }
}
@media (min-width: 992px), (min-width: 768px) and (max-width: 991px) {
    .PostUser-level { display: none; }
    .DiscussionPage .PostUser-level {
        display: block;
        margin-left: -85px;
        margin-top: 70px;
        text-align: center;
        float: left;
        width: 64px;
    }
    .DiscussionPage .PostUser-level .levelbar-empty {
        background: @control-bg;
        border-radius: 10px;
        height: 10px;
    }
    .DiscussionPage .PostUser-level .levelbar {
        margin-top: 0;
        z-index: 11;
        background: @primary-color;
        border-radius: 10px;
        height: 10px;
    }
}
.Post--hidden {
    .PostUser-level { display: none; }
    .PostUser-level .levelbar-empty { display: none; }
    .PostUser-level .levelbar { display: none; }
}
```

変更後はキャッシュを手動で削除してください。通常は `php flarum cache:clear` で問題ありません。

## **コメント**

(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-avatar-levelbar#webpage","@type":"WebPage","description":"また一つ、特に役に立たない機能です。投稿一覧のユーザーアバターの下にレベル進行バーを追加します。まず、コードを提供してくださった 4tabern.com に感謝します。デモは掲載しません。自分のサイトでも使っておらず、実際には余計なものだと感じているためです。実際の効果はご自身でお試しください。フィードバックも歓迎しま","name":"Flarum ユーザーアバターの下にレベルバーを追加","url":"https://www.ikxin.com/ja/article/flarum-avatar-levelbar","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/flarum-avatar-levelbar"]}]}]}
```

## Sitemap

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