CSS擬似要素を使ってサイトのどこでもテキストや画像を挿入する

Discourse · 2018 年 10 月 11 日午前 11:12

では、Discourse サイトにテキストや画像を挿入する方法を見ていきましょう。

テキストについては、ほとんどの場合、/admin/customize/site_texts で修正するだけで十分です。
しかし、既存の要素を修正するのではなく、2つの異なるブロックの間に一文を追加したい場合もあります。

ここでは、CSS3 の :before と :after プロパティを使用してこれを行う方法を確認します。

基本手順

作業を開始するには、主要なブラウザに搭載されている開発者コンソールを使用する必要があります。開くには、F12 キーを押すだけです。

image1911×879 101 KB
テキストを追加したい before または after の位置にある要素を選択します。

ご覧のとおり、マウスが要素の上を通過するたびにその要素がハイライトされ、右側の HTML と CSS で対応するクラスが自動的に選択されます。Discourse のスタイルシートを編集する前に、ライブテストを行いましょう。操作対象の要素を選択したら、アイコンをクリックするだけです。これにより、CSS に新しいルールが追加され、必要に応じて修正できます。
編集を開始します。クラスに :before または :after のサフィックスを追加し、content プロパティを使用してテキストを追加します。

CSS に詳しくない場合、画像の追加は少し複雑ですが、似たようなパターンに従うのが良い慣行です：
```
background-image: url("url-goes-here");
background-repeat: no-repeat;
background-size: your-value;
content: "";
width: your-value;
height: your-value;
display: inline-block;
```
Before:

image1920×885 98.3 KB

And after:

image1920×887 99.4 KB

選択した特定のクラスが使用される場所であれば、テキストはどこに表示されても構わないことに注意してください。場合によっては、新しいテキストを表示したい要素を指定するために、CSS に親要素を追加する必要があります。

カスタマイズします。CSS について少し知っていれば、テキストのスタイルを自由にカスタマイズするのは簡単です。

.fancy-title::after {
  content: "ANOTHER TEXT " "\f072";
  color: violet;
  font-family: Fontawesome;
  background: linear-gradient(to right, #7ce5df 27%, #f1da36 100%);
  font-size: 18px;
  padding: 2px 4px;
  border: 1px solid;
}

満足したら、テーマコンポーネントを作成して、変更をサイトの CSS に追加します。

いくつかの実用的な例を挙げます：

トピックタイトル

一部のサイトでは、タイトルや各投稿の前または後に画像、バナー、またはパーソナライズされた広告を追加すると有用な場合があります。

#topic-title::before {
  background-image: url(your-URL-here);
  background-repeat: no-repeat;
  background-size: 750px 335px;
  width: 750px;
  height: 335px;
  display: inline-block;
  content: "";
}

#topic-title::after {
  background-image: url(your-URL-here);
  background-repeat: no-repeat;
  background-size: 800px 295px;
  width: 800px;
  height: 295px;
  display: inline-block;
  content: "";
}

トピック本文

.topic-body.clearfix::before {
  background-image: url(your-URL-here);
  max-height: 2.8571em;
  width: 690px;
  height: 184px;
  background-size: auto 2.8571em;
  background-repeat: no-repeat;
  margin-left: 11px;
  margin-bottom: 0.25em;
}

または後に：

.topic-body.clearfix::before を .topic-body.clearfix::after に変更するだけです。
同じように、プレーンテキストを before または after に追加することも可能です：

.topic-body.clearfix::before {
  content: "DISCOURSE ROCKS!";
  color: red;
  font-weight: bold;
  padding-left: 11px;
}

投稿ボタン

.nav.post-controls .actions::before {
  color: red;
  content: "Hello from Discourse";
}

タイムライン

.topic-timeline::before {
  color: red;
  content: "Hello World";
}

.topic-timeline::after {
  color: red;
  content: "Hello again";
}

.timeline-scroller-content::before {
  color: violet;
  content: "Hey,";
}

.timeline-scroller-content::after {
  color: violet;
  content: "It's me again!";
}

.timeline-container .topic-timeline .start-date::before {
  color: goldenrod;
  content: "Start Date ";
}

timeline-container .topic-timeline .start-date::after {
  color: goldenrod;
  content: " \f060";
  font-family: Fontawesome;
}

.widget-link.now-date::before {
  content: "\f061 ";
  color: burlywood;
  font-family: Fontawesome;
}

.widget-link.now-date::after {
  color: burlywood;
  content: " Now Date";
}

フッターボタン

image958×257 9.77 KB
```
#topic-footer-buttons::before {
  content: "THESE ARE FOOTER BUTTONS";
  color: indianred;
  border: 2px solid;
  padding: 3px;
}

#topic-footer-buttons::after {
  color: indianred;
  content: "CONTENT AFTER GO HERE";
  border: 2px solid;
}
```
後者の場合、:after のコンテンツはテキストの後に挿入されることに注意が必要です。特別なカスタマイズが必要ない場合は、CSS を編集する代わりに /admin/customize/site_texts で元のテキストを変更することをお勧めします。

推奨トピック

#suggested-topics::before {
  content: "";
  background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png);
  width: 690px;
  height: 184px;
  background-size: 690px 184px;
  background-repeat: no-repeat;
  display: inline-block;
}

#suggested-topics::after {
  content: "";
  background-image: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/1/0/101f03af29f12ea30e1226eb96a02c3ed2f6d2ef.png);
  width: 690px;
  height: 184px;
  background-size: 690px 184px;
  background-repeat: no-repeat;
  display: inline-block;
}

トピックアクション

.widget-button.btn-flat.share.no-text.btn-icon::after {
  content: " Share";
}

.widget-button.btn-flat.toggle-like.like.no-text.btn-icon::after {
  content: " Like";
}

参考: https://meta.discourse.org/t/insert-text-disclaimer-anywhere-in-discourse/99009

注: ::before と ::after によって生成される疑似要素は、要素のフォーマットボックスに含まれます。したがって、<img> や <br> などの 置換要素 には適用されません。出典: ::after CSS pseudo-element - CSS | MDN

言い換えれば、これは子要素を持つことができない「自己終了タグ」要素には機能しません。疑似要素は次のように見えると直感的に考えがちです：

{::before is here}<tag>text content</tag>{::after is here}

しかし、実際には次のようになります：

<tag>{::before is here}text content{::after is here}</tag>

このドキュメントはバージョン管理されています - 変更提案は GitHub で。

トピック		返信	表示
Adding code beneath the Timeline Support	2	894	2019 年 4 月 11 日
Add custom content on anywhere on discourse Development	1	671	2022 年 6 月 28 日
Customize posts' contents with your own styles Developer Guides css	8	3657	2023 年 3 月 17 日
Add elements or nodes Development	4	1128	2016 年 10 月 18 日
How to add customer HTML after "post_1" Support	4	2452	2019 年 7 月 17 日

CSS擬似要素を使ってサイトのどこでもテキストや画像を挿入する

基本手順

関連トピック