[ブログ改造] BloggerにCSSを追加する

ここの記事の通りでできました。
※ スマホ用のライブドアブログではCSSの追加はできない

Blogger | ブログにカスタムCSSを追加する🔗


メニュー ➡ テーマ ➡ カスタマイズ

詳細設定 ➡ CSSを追加

追加するのはこれ
タグの名前（gpenとか）は重複していなければ何でもいい
h3とかは良く使うのでダメ。
----------------------------------------------------------------------------------
/* 緑色の蛍光ペン風の下線をつける */
gpen:not([class]) {
　background: linear-gradient(transparent 60%, green 0%);
}
/* 黄色の蛍光ペン風の下線をつける */
ypen:not([class]) {
　background: linear-gradient(transparent 60%, #ffdc00 0%);
}

/* 赤色の蛍光ペン風の下線をつける */
rpen:not([class]) {
　background: linear-gradient(transparent 60%, red 0%);
}

/* 水色の蛍光ペン風の下線をつける */
bpen:not([class]) {
　background: linear-gradient(transparent 60%, deepskyblue 0%);
}

/* 緑の下線をつける */
gln:not([class]) {
　border-bottom: solid 5px green;
}

/* 赤の下線をつける */
rln:not([class]) {
　border-bottom: solid 5px red;
}

/* 黄色の下線をつける */
yln:not([class]) {
　border-bottom: solid 5px #ffdc00;
}

/* 見出し */
h6 {
　padding: 0.4em 0.5em; color: #494949; background: #f4f4f4; border-left: solid 5px #ff8c00; border-bottom: solid 3px #d7d7d7; font-size: 120%;
}

/* 文字の上に赤いドットを置く */
.reddot {
 background: radial-gradient(circle, red 25%, transparent 26%) top right / 1em .5em repeat-x;
 padding-top: .5em;
}
----------------------------------------------------------------------------------

終わったら保存する

テスト用
<h6>見出し</h6>

<gpen>蛍光ペン・緑色</gpen><br />

<rpen>蛍光ペン・赤色</rpen><br />

<ypen>蛍光ペン・黄色</ypen><br />

<bpen>蛍光ペン・水色</bpen><br />

<gln>下線・緑</gln><br />

<rln>下線・赤</rln><br />

<yln>下線・黄色</yln><br />

<br />

<span class="reddot">上に赤いドット</span><br />

表示してみる

今までは記事の中に毎回
<div style="padding: 0.4em 0.5em; color: #494949; background: #f4f4f4; border-left: solid 5px #ff8c00; border-bottom: solid 3px #d7d7d7; font-size: 120%;">見出し</div>
と書いていたが楽になった。