CSS擬似要素を使って、サイト内の任意の場所にテキストや画像を挿入する

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

さて、Discourse サイトにテキストや画像を挿入したいとお考えですね。

テキストについては、ほとんどの場合、/admin/customize/site_texts から直接変更すれば十分です。
しかし、既存の要素を変更するのではなく、2 つの異なるブロックの間に文を追加したいという要望が出ることもあります。

ここでは、CSS3 の :before および :after プロパティを使ってそれをどのように実現するかを見ていきましょう。

基本的な手順

作業を行うには、主要なブラウザに備わっている開発者コンソールを使用する必要があります。開くには、単に F12 キーを押してください。

image1911×879 202 KB
テキストを追加したい要素（before または after）を選択します。

ご覧の通り、マウスが要素上を移動するたびに、その要素がハイライトされ、右側の HTML と CSS で対応するクラスが自動的に選択されます。Discourse のスタイルシートを編集する前に、ライブテストを行ってください。操作対象の要素を選択したら、:heavy_plus_sign: アイコンをクリックするだけで、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;
```
変更前:

image1920×885 202 KB

変更後:

image1920×887 198 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 に変更するだけです。
同じように、プレーンテキストを前または後に追加することも可能です。

.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 15.1 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 はここ} <tag>テキスト内容</tag> {::after はここ}

しかし実際には、以下のように配置されます。

<tag>{::before はここ}テキスト内容{::after はここ}</tag>

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

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

CSS擬似要素を使って、サイト内の任意の場所にテキストや画像を挿入する

基本的な手順

関連トピック