No.19
Ver 2.3.0では、文字装飾の範囲内に画像も含められるようになったため、画像も装飾できるようになりました。
※標準添付の各スキンでは、画像に枠が付いたり影が付いたり半透明になったりする装飾が適用されます。CSSソースを編集すれば自由に表示をカスタマイズできます。
▼画像1つ1つに異なるclass名を付加する方法
てがろぐでは、本文内に埋め込んだ画像には .embeddedimage というclass名が付加されて、実際には例えば下記のようにHTMLが出力されます。
また、文字装飾の「太字」では、指定範囲に .decorationB というclass名が付加されて、実際には例えば下記のようにHTMLが出力されます。
このⒶⒷ2点を利用すれば、『ある画像を、太字の装飾内に掲載する』ことで、
……というような出力ができます。
このようにすれば、「decorationB」クラスに含まれる「embeddedimage」クラスを装飾することで、この画像に対してだけ適用できるスタイルを作れます。例えば以下のような感じでCSSソースを書けば良いでしょう。
この仕様を活用することで、「センタリングしたい画像」や「右寄せした上で後続を左側に回り込ませたい画像」など、特殊なレイアウトで表示したい画像も作りやすくなるでしょう。
※Ver 2.2.4以下では、この記述方法は使えません。文字装飾の範囲内に画像を含める書き方が許容されない仕様だったためです。
※標準添付の各スキンでは、画像に枠が付いたり影が付いたり半透明になったりする装飾が適用されます。CSSソースを編集すれば自由に表示をカスタマイズできます。
▼画像1つ1つに異なるclass名を付加する方法
てがろぐでは、本文内に埋め込んだ画像には .embeddedimage というclass名が付加されて、実際には例えば下記のようにHTMLが出力されます。
Ⓐ <img src="画像URL" alt="代替文字" class="embeddedimage">
また、文字装飾の「太字」では、指定範囲に .decorationB というclass名が付加されて、実際には例えば下記のようにHTMLが出力されます。
Ⓑ <b class="decorationB">太字の範囲</b>
このⒶⒷ2点を利用すれば、『ある画像を、太字の装飾内に掲載する』ことで、
<b class="decorationB"> <img src="画像URL" alt="代替文字" class="embeddedimage"> </b>
……というような出力ができます。
このようにすれば、「decorationB」クラスに含まれる「embeddedimage」クラスを装飾することで、この画像に対してだけ適用できるスタイルを作れます。例えば以下のような感じでCSSソースを書けば良いでしょう。
.decorationB .embeddedimage {
~太字装飾内に含まれる画像用のスタイル~
}
この仕様を活用することで、「センタリングしたい画像」や「右寄せした上で後続を左側に回り込ませたい画像」など、特殊なレイアウトで表示したい画像も作りやすくなるでしょう。
※Ver 2.2.4以下では、この記述方法は使えません。文字装飾の範囲内に画像を含める書き方が許容されない仕様だったためです。
:897文字 修正
画像1つ1つを個別に装飾することもできるようになりました(Ver 2.3.0以降)
⌚ 2019年09月30日(月) 16:47:03