# 投稿内の単語に \`\<abbr\>\` タグを追加する

**URL:** <https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394>\
**Category:** Theme component\
**Created:** [2018 年 5 月 24 日午後 6:03 UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394 "2018-05-24T18:03:10Z")\
**Posts on this page:** 7\
**Page:** 2

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2018 年 11 月 26 日午前 2:45 UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/24 "2018-11-26T02:45:01Z")

</div>

That’s really up to the mobile browser in how they implement the HTML tag.

---

<div class="post-metadata">

**Author:** ![eextra](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eextra/32/170266_2.png) [@eextra](https://meta.discourse.org/u/eextra)\
**Post date:** [2020 年 1 月 9 日午後 2:37 UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/25 "2020-01-09T14:37:51Z")

</div>

このプラグはよく機能します、ありがとうございます。ただし、linkify と組み合わせた場合は動作しません。リンクが クラスでも機能するようにすることは可能でしょうか？

---

<div class="post-metadata">

**Author:** ![danekhollas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danekhollas/32/79637_2.png) [@danekhollas](https://meta.discourse.org/u/danekhollas)\
**Post date:** [2020 年 1 月 9 日午後 2:52 UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/26 "2020-01-09T14:52:35Z")

</div>

回答をここにも再投稿します。🙂

* * *

問題の原因は、abbrify プラグインがデフォルトでリンクタグをスキップしていることだと考えられます。コードを修正して、`head_tag.html` の 16 行目を削除することで解決できるかもしれません。

```
'a': 1,

```

> <https://github.com/metabrainz/discourse-abbrify-words/blob/a6651cf1c0a6d5233412f61b486cf256e36ffa1e/common/head_tag.html#L16>

動作するか、あるいは追加のサポートが必要かどうかを教えてください。🙂

* * *

なお、linkify テーマでは、スキップするタグを修正するための別個のユーザー設定が存在します。機会があれば、このリポジトリにも PR を提出します。

---

<div class="post-metadata">

**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\
**Post date:** [2020 年 5 月 26 日午後 12:12 UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/27 "2020-05-26T12:12:14Z")

</div>

ここにツールチップのテーマコンポーネントの機能を追加する可能性はありますか？

> [@ディスコースのツールチップ](https://meta.discourse.org/t/discourse-tooltips-preview-topic-contents-on-hover/69304/):
>
> discourse2概要 Discourse Tooltips は、マウスオーバー時にトピックの内容をプレビューできます。hammer_and_wrenchリポジトリリンク [https://github.com/discourse/discourse-tooltips](https://github.com/discourse/discourse-tooltips)open_bookインストールガイド [Discourse へのプラグインのインストール方法](https://meta.discourse.org/t/install-plugins-in-discourse/19157)機能 将来的には、このプラグインはより多くのツールチップを表示するようになりますが、これは良いスタートだと思いました slight_smile

`abbr` タグはモバイルでは基本的に役に立たないため、これは素晴らしい追加機能になるでしょう。

---

<div class="post-metadata">

**Author:** ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)\
**Post date:** [2020 年 6 月 17 日午前 5:47 UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/28 "2020-06-17T05:47:10Z")

</div>

モバイルでツールチップを表示できるように、簡易的なユーザースタイルシート（CSS）を作成しました。  
これには [Stylus](https://add0n.com/stylus.html) 拡張機能が必要です（私は拡張機能をサポートする Android 版 Firefox を使用しています）。

このような機能はプラグインに含めることも可能ですが、実際には私はすべてのサイトでこれを使用しています。

```css
abbr[title]:hover {
    border: 2px solid white;
    color: #333;
    background: #FF6;
}
abbr[title]:hover:after {
    content: " (" attr(title) ")";
}

```

> **[Community.meb.org Modification (userstyles!)](https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371/3?u=jesus2099)**
>
> I was always bored to not be able to see and understand abbreviations when I am on mobile. As this week I am almost only in mobile, I decided to find a way and found this: abbr\[title\]:hover { border: 2px solid white; color: #333; ...

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2023 年 10 月 5 日午前 11:06 UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/29 "2023-10-05T11:06:06Z")

</div>

こんにちは！コードを共有していただきありがとうございます 🙌  
この例で示されているように、略語の上にコメントが表示される効果をどのように実現できますか？

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/9/d/f9df9f8f8fb331914d90443c9ff6d95a34f775f8.png)

---

<div class="post-metadata">

**Author:** ![Aizada\_M](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aizada_m/32/352050_2.png) [@Aizada\_M](https://meta.discourse.org/u/Aizada_M)\
**Post date:** [2023 年 10 月 5 日午後 3:48 UTC](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394/30 "2023-10-05T15:48:05Z")

</div>

半日いじくり回した結果、@Falco さんの [Discourse AI](https://meta.discourse.org/t/discourse-ai/259214) ボットを使ってコードを作成することができました 💪  
現在、2週間にわたりボットから支援を受けています。Meta（クエリの意味を検索する際）でも、私のウェブサイトでこのコードやあのコードを書く際にもです。上記の問題を解決するためにまとめることができたコードは以下の通りです。

```plaintext
abbr[title] {
    position: absolute;
    background: transparent; /* 非アクティブ状態では透明な背景 */
    overflow: visible; /* コンテンツが要素の境界からはみ出すことを許可 */
}

@media (prefers-color-scheme: light) {
    abbr[title] {
        color: var(--primary); /* スクリプトの白または黒の色合い？ */
    }
}
abbr[title]:hover {
    background: #FF6; /* ホバーすると、背景が鮮やかな黄色の色合いに包まれます。*/
}
abbr[title]:hover:after {
    content: " " attr(title) "";
    position: absolute;
    border-radius: 3px;
    bottom: 70%; /* この値を変更して、ずれを制御します。 */
    left: 0;
    width: 250px; /* 固定幅 */
    height: auto; /*"調整可能な高さ" */
    padding: 2px;
    z-index: 9;
    background: #00FF00; /* コメントの背景色合いを指定します。 */
    color: #333;
    margin-bottom: 10px; /* 下部の余白を組み込んで、区切りを作成します。 */
}

```

ここに残しておきます。誰かの役に立つかもしれません 🙂

追伸。私は専門のソフトウェアエンジニアではないため、コードにエラーが見つかった場合は寛大にお願いします。

[前のページ](https://meta.discourse.org/t/add-abbr-tags-to-words-in-posts/88394.md?page=1)