簡単コピペ！すぐに使える文字装飾のCSSデザインサンプル

文字装飾用CSSサンプルです。

ちなみに、CSSを追記せずに、テキストエディタで直接スタイルを記述する事でも装飾は可能です。

<span style="border-bottom: solid 3px #fe8ca0;">下線を引く</span>

よく使う装飾はいちいちコードを書くのは面倒なので、CSSでデザインしておく事で、使いやすくなります。

CSSデザイン

アンダーライン

下線を引く

/*下線*/
.under_line {
border-bottom: solid 3px #fe8ca0;
}

二重線を引く

/*二重線*/
.under_line_w {
border-bottom: double 6px #fe8ca0;
}

上下に引く

/*上下ライン*/
.line_w {
border-top: solid 1px #fe8ca0;
border-bottom: solid 1px #fe8ca0;
}

その他のborder-styleについて

border は、solid（１本線）・daouble（２本線）以外にも破線や点線もありますので、お好みに変更してご利用下さい。

• none　初期値・ボーダーなし・太さ0
• hidden　ボーダーなし・太さ0
• solid　１本線
• double　２本線
• groove　立体的な窪みライン
• ridge　立体的な隆起ライン
• inset　上、左の線＝暗く・下、右の線＝明るく
• outset　上、左の線＝明るく・下、右の線＝暗く
• dashed　破線
• dotted　点線

点線の例

マーカー

文字の下にマーカー（蛍光ペン風）ラインを引きます。

細めのライン

.marker1{
background: linear-gradient(transparent 80%, #fe8ca0 80%);
}

太めのライン

.marker2{
background: linear-gradient(transparent 60%, #fe8ca0 60%);
}

全体に引く場合

.marker3{
background: linear-gradient(transparent 0, #fe8ca0 0);
}

文字を囲む

シンプルな囲み枠

/*文字囲み*/
.kakomi{
border: solid 3px #fe8ca0;
padding: 10px 20px;
}

角丸背景色付き囲み

/*角丸文字囲み*/
.maru_kakomi{
background: #fe8ca0;
color:#fff;
line-height: 1.4;
margin-bottom: 20px;
padding: 10px 20px;
border-radius: 20px;
}

色の変更

以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名 赤桃青紫黄橙緑茶黒

HTMLコード

HTMLではすべて　p　、div　、spanタグ　で表示できます。

 注意点

spanタグを使うと文字の部分のみの装飾となります。

div（またはp）タグを使うとその行全体の装飾となります。

<span class="marker2">マーカー２</span>

<div class="marker1">マーカー１</div>

<div class="kakomi">シンプル囲み</div>

スタイル登録や定型文登録について

上記のCSSを追記した場合、エディタで簡単に利用するためにスタイル登録するか、定型文登録すると便利です。

スタイル登録については以下をご覧ください。

ビジュアルエディタのスタイル追加で簡単に記事装飾

はじめに ビジュアルエディタのツールボックスはテーマでもカスタマイズされている為、様々あります。 今回は、その中の「スタイル」に任意の装飾コードを追加して、ワンクリックで使えるようにします。 　例えば　この囲みは、スタイルからワンクリックで...

ayaito.net

ルクセリタスをご利用の方は以下も参考にして下さい。

ルクセリタスの定型文登録の使い方～記事作成・編集を効率化！

-　2019/7/28　追記　- Ver.3.6.2～ブロックエディタでもショートコードの挿入が可能になっています。 Ver.3.6.3～ブロックエディタでも定型文を挿入できるブロックが追加されています。 以下も参考にして下さい。 定型文登...

ayaito.net