# ピン留めされたトピックをより目立たせる
**URL:** https://meta.discourse.org/t/highlight-pinned-topics-better/102355
**Category:** UX
**Created:** [2018 年 11 月 20 日午前 2:14 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355 "2018-11-20T02:14:19Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@Json\_Blob](https://meta.discourse.org/u/Json_Blob)
#### Post date: [2018 年 11 月 20 日午前 2:14 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/1 "2018-11-20T02:14:19Z")
Hello
I run a discourse forum for my cycling team. And I find that pinned topics don’t really stand out much. I naturally find myself looking for some seperation or divider, bold titles on the threads, highlighting… something.
Currently aside from the little pin icon, they look exactly like standard topics which I find a little lack-luster.
Note the top two topics are pinned, but they’re listed just like everything else. I’d love to see simply a good, heavy divider between pinned topics and everything else but I’m open to other ideas. I just feel like right now they blend in to the mix and don’t call attention to themselves at all once they’re “read”.
Thoughts?
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018 年 11 月 20 日午前 4:07 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/2 "2018-11-20T04:07:14Z")
You can certainly apply whatever CSS you like to make that so via admin, customize.
---
### Author:  [@Json\_Blob](https://meta.discourse.org/u/Json_Blob)
#### Post date: [2018 年 11 月 20 日午前 6:20 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/3 "2018-11-20T06:20:44Z")
Ah ok, i’ll have to do some homework then on CSS because it’s not my strength.
Thanks for the direction 🙂
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2018 年 11 月 20 日午前 10:27 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/4 "2018-11-20T10:27:54Z")
To highlight pinned topics on the latest page just add in your `/admin/customize/themes`:
```css
.topic-list-item.pinned {
background: #ffffc9;
}
```
You can of course customize with CSS the pinned topics as you prefer once you know the class to use
---
### Author:  [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [2019 年 4 月 17 日午後 12:41 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/5 "2019-04-17T12:41:10Z")
カテゴリ表示（カテゴリと最新に設定）で表示されるピン留めトピックを同様に実現するにはどうすればよいでしょうか？
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2019 年 4 月 17 日午後 2:15 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/6 "2019-04-17T14:15:26Z")
There is no status class (`.pinned`) in this case. To target a pinned topic you need to use the `id`, eg
```CSS
[data-topic-id="8"] {
background: #ffffc9;
}
```
The CSS above target the topic globally everywhere, on `/latest`, on `/categories` and on topic, see:
To target only the categories + latest page you need to add the appropriate class
```plaintext
.navigation-categories.categories-list [data-topic-id="8"] {
background: #ffffc9;
}
```
In this way the topic will be highlighted only on that page.
PS: to find the topic ID the simplest way is to open the dev console on your browser with F12:
---
### Author:  [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [2019 年 4 月 17 日午後 2:26 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/7 "2019-04-17T14:26:14Z")
@dax さん、ありがとうございます。なかなか良い解決策ですね。ただ、ピン留めされたトピックの更新が比較的早いため、少し不便に感じられる部分もあります。
---
### Author:  [@Sentinelrv](https://meta.discourse.org/u/Sentinelrv)
#### Post date: [2019 年 8 月 6 日午前 3:36 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/8 "2019-08-06T03:36:42Z")
> [@dax](#):
>
> カテゴリーと最新ページのみにターゲットを絞るには、適切なクラスを追加する必要があります。
>
> ```plaintext
> .navigation-categories.categories-list [data-topic-id="8"] {
> background: #ffffc9;
> }
>
> ```
こんにちは、これを試してみたのですが、何か問題があるようです。私が得た結果は以下の通りです…
スレッドのタイトルが隠されてしまう理由について、何か心当たりはありますか？
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2019 年 8 月 6 日午前 4:01 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/9 "2019-08-06T04:01:43Z")
タイトルに多くのパディングを追加して、クリック領域を大きくしているためです。この値を少し調整して、以下の CSS でオーバーラップを回避できます。
```css
.topic-list .main-link a.title {
padding: 6px 0;
}
```
---
### Author:  [@Sentinelrv](https://meta.discourse.org/u/Sentinelrv)
#### Post date: [2019 年 8 月 9 日午前 2:07 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/10 "2019-08-09T02:07:23Z")
こんにちは、クリスさん。そのコードを追加しようと試みたのですが、特に変化が見られませんでした…
もしかして、何か見落としているのでしょうか？数値を変更してみましたが、それもうまくいきませんでした。
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2019 年 8 月 9 日午前 9:31 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/11 "2019-08-09T09:31:28Z")
そのサイトおよび特定のトピックへのリンクがあると便利です。
---
### Author:  [@Sentinelrv](https://meta.discourse.org/u/Sentinelrv)
#### Post date: [2019 年 8 月 11 日午前 2:54 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/12 "2019-08-11T02:54:21Z")
問題のトピックはこちら…
> **[DONATE to the Peercoin Exchange Listing Fund - Let’s Expand Access to Peercoin!](https://talk.peercoin.net/t/donate-to-the-peercoin-exchange-listing-fund-let-s-expand-access-to-peercoin/9582)**
>
> Exchange Expansion Many of you in the community have been asking for a while now what we have been doing to get Peercoin listed on more exchanges. Lack of access to more exchanges with high trading volume has been one of Peercoin’s biggest problem...
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2019 年 8 月 12 日午前 10:40 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/13 "2019-08-12T10:40:02Z")
以下をお試しください：
```css
.latest-topic-list-item .main-link a.title {
padding: 6px 0;
}
```
---
### Author:  [@Sentinelrv](https://meta.discourse.org/u/Sentinelrv)
#### Post date: [2019 年 8 月 19 日午後 2:40 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/14 "2019-08-19T14:40:27Z")
@dax それで少なくともデスクトップのカテゴリ表示ではうまくいったようです。ただし、モバイルのカテゴリ表示ではまだそのようになっています…
また、最新の表示でも動作させることは可能でしょうか？現状ではカテゴリ表示でのみ機能しています。
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2019 年 8 月 19 日午後 4:59 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/15 "2019-08-19T16:59:15Z")
以下でお試しください
```css
.mobile-view .topic-list .main-link a.title {
padding: 3px 0;
}
```
> [@Sentinelrv](#):
>
> また、最新ビューでも動作させる方法はありますか？現時点ではカテゴリビューでのみ動作しています。
こちらをご覧になりましたか？
> [@Highlight pinned topics better](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/6?u=dax):
>
> There is no status class (.pinned) in this case. To target a pinned topic you need to use the id, eg [data-topic-id="8"] { background: #ffffc9; } The CSS above target the topic globally everywhere, on /latest, on /categories and on topic, see: [image] [image] To target only the categories + latest page you need to add the appropriate class .navigation-categories.categories-list [data-topic-id="8"] { background: #ffffc9; } In this way the topic will be highlighted only on…
以下も追加する必要があります
```css
[data-topic-id="9582"] {
background: #fffff0;
}
```
---
### Author:  [@Sentinelrv](https://meta.discourse.org/u/Sentinelrv)
#### Post date: [2019 年 8 月 19 日午後 5:45 UTC](https://meta.discourse.org/t/highlight-pinned-topics-better/102355/16 "2019-08-19T17:45:11Z")
> [@dax](#):
>
> こちらをお読みになりましたか？
はい、読みましたが、すべての投稿を含むスレッド全体がハイライトされるのはあまり好ましくありませんでした。カテゴリと最新の表示ではトピックタイトルのみをハイライトし、スレッド自体はハイライトしたくなかったのです。他に方法がないのであれば、そうします。
ところで、そのモバイル用のコードで問題が解決したようです。