とらんちょのブログ一覧

新しく追加されたスタイルシートの
ユーザーコンテンツ（ブログ内ユーザー定義）の使い方。

スタイルシートの「詳細編集」にある「ブログ」の一番下

例えばブログを書く時に特定の文字列にマーカーを引いたように見せたい場合は
セレクタ名に名前を付けます。

例として緑色マーカーを引く場合。
gre_line という名前（セレクタ名）で登録。（名前は自分で判るようなものがいいです）

名前の前に　. （ドット．ピリオド）を付けます。
.gre_line　と入力。

入力欄は緑色表示なので
background-color:green;　と入力。

↓結果的にこんな感じに。

セレクタ名

.gre_line

background-color:green;

ブログ内では　「今日は大黒Ｐに遊びに行くぞ～！」　と書いた場合で
大黒Ｐを緑色のマーカーを引く場合は

「今日は<span class="gre_line">大黒Ｐ</span>に遊びに行くぞ～！」

と入力、表示されると

「今日は大黒Ｐに遊びに行くぞ～！」

となります。

右側の入力欄の所は追加できます。
イタリック文字にしたい時などは
font-style:italic;
を追加したりと。

セレクタ名

.gre_line

background-color:green; font-style:italic;

「今日は大黒Ｐに遊びに行くぞ～！」

セレクタ名に H1 ～ H5 を使うというのもあります。
その場合は H は見出し用のタグ（ＨＴＭＬ）なので文字のサイズも指定しないと
見出し用のサイズになってしまいます。
セレクタ名には . （ドット．ピリオド）を付ける必要はないです。

セレクタ名

H1

font-size:15px; background-color:green; font-style:italic;

使い方は

「今日は<H1>大黒Ｐ</H1>に遊びに行くぞ～！」

という感じになります。

他には <span> を使う以外に <div> を使うことも出来ます。