ボタン・アンダーライン・背景色

わたしは以下のようなものを追加しています。
※但し、コードエディターでしか利用出来ません。

ボタン・アンダーライン・マーカー

ブルーボタン
ホワイトボタン
ブラックボタン

赤アンダーライン
緑アンダーライン
ピンクアンダーライン
水色アンダーライン

黄色マーカー
赤マーカー
緑マーカー
ピンクマーカー
水色マーカー

黄色アンダーマーカー
赤アンダーマーカー
緑アンダーマーカー
ピンクアンダーマーカー
水色アンダーマーカー

 

子テーマの[style.css]に追加

/* ボタンのデザイン */
.botan-blue {
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 3px 10px;
margin: 0px 5px;
border-radius: 3px;
color: #ffffff;
background-color: #1486b8; border-style: solid; border-width: 1px; border-color: #026892;
}

.botan-white {
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 3px 10px;
margin: 0px 5px;
border-radius: 3px;
color: #333333;
background-color: #ffffff; border-style: solid; border-width: 1px; border-color: #333333;
}

.botan-black {
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 3px 10px;
margin: 0px 5px;
border-radius: 3px;
color: #ffffff;
background-color: #000000; border-style: solid; border-width: 1px; border-color: #000000;
}

/* アンダーライン */
.red-under {
border-bottom: solid 3px #ff0000;
}

.grn-under {
border-bottom: solid 3px #00ff00;
}

.pink-under {
border-bottom: solid 3px #ff00ff;
}

.mizu-under {
border-bottom: solid 3px #00ffff;
}

/* マーカー */
.marker {
background: linear-gradient(transparent 0, #ffff00 0);
}
.redmarker {
background: linear-gradient(transparent 0, #ff0000 0);
}
.grnmarker {
background: linear-gradient(transparent 0, #ccffcc 0);
}
.pinkmarker {
background: linear-gradient(transparent 0, #ffccff 0);
}
.mizumarker {
background: linear-gradient(transparent 0, #ccffff 0);
}

/*アンダーラインマーカー*/
.marker-under {
background: linear-gradient(transparent 50%, #ffff00 50%);
}
.redmarker-under {
background: linear-gradient(transparent 50%, #ff0000 50%);
}
.grnmarker-under {
background: linear-gradient(transparent 50%, #ccffcc 50%);
}
.pinkmarker-under {
background: linear-gradient(transparent 50%, #ffccff 50%);
}
.mizumarker-under {
background: linear-gradient(transparent 50%, #ccffff 50%);
}

 

記述の仕方

<span class="botan-blue">ブルーボタン</span>
<span class="botan-white">ホワイトボタン</span>
<span class="botan-black">ブラックボタン</span>

<span class="red-under">赤アンダーライン</span>
<span class="grn-under">緑アンダーライン</span>
<span class="pink-under">ピンクアンダーライン</span>
<span class="mizu-under">水色アンダーライン</span>

<span class="marker">黄色マーカー</span>
<span class="redmarker">赤マーカー</span>
<span class="grnmarker">緑マーカー</span>
<span class="pinkmarker">ピンクマーカー</span>
<span class="mizumarker">水色マーカー</span>

<span class="marker-under">黄色アンダーマーカー</span>
<span class="redmarker-under">赤アンダーマーカー</span>
<span class="grnmarker-under">緑アンダーマーカー</span>
<span class="pinkmarker-under">ピンクアンダーマーカー</span>
<span class="mizumarker-under">水色アンダーマーカー</span>

 


ボタンに関しては、下のように使用することも出来ます。

ブルーボタン
ホワイトボタン
ブラックボタン

 
 

ブルーボタン

 

ホワイトボタン

 

ブラックボタン

その場合は、『span』ではなく『div』で記述します。
『&nbsp;』はスペースの記号です。行間が詰まった感じの時に入れて下さい。(『&nbsp;』は行頭に入れると改行しますが、行間だと半角スペースです。)

<div class="botan-blue">ブルーボタン</div>
<div class="botan-white">ホワイトボタン</div>
<div class="botan-black">ブラックボタン</div>
&nbsp;
&nbsp;
<div class="botan-blue">ブルーボタン</div>
&nbsp;<div class="botan-white">ホワイトボタン</div>
&nbsp;<div class="botan-black">ブラックボタン</div>

 


 

ブルーボタン

ホワイトボタン

ブラックボタン

 
こんな風に行間を半分の高さにしたい場合は、以下のように記述します。
マーカー部分が半分の行間です。

<div class="botan-blue">ブルーボタン</div>
<p style="margin-bottom:0.5em;"></p>
<div class="botan-white">ホワイトボタン</div>
<p style="margin-bottom:0.5em;"></p>
<div class="botan-black">ブラックボタン</div>

 

背景色有りテキスト

背景色有りテキストのサンプルです。
背景色有りテキストのサンプルです。
背景色有りテキストのサンプルです。

 

子テーマの[style.css]に追加

/*背景色有りテキスト*/
.info {
background-color:#●●●●●●; /*背景色のカラーコード*/
border:1px solid #●●●●●●; /*枠線のカラーコード*/
padding:10px;
overflow: auto;
}

 

記述の仕方

<div class="info">背景色有りテキスト</div>