WordPress で、手書き風の下線を引く方法をまとめました。
標準で持っている下線と異なる表現が可能です。
対応手順
１．下線のイメージデータを作成します。
drow系ソフトで、下線データ（画像）を作成します。
今回40×40の大きさで作成しています。
◆イメージデータを作成する際のポイント
・手書き風を強調するように、きれいに直線で引かない。
・使用するページの背景色を合わせる。
・横幅は短くでも可能で、リピート機能を使うので同じ高さで繋ぐように作成する。
※線の太さなど何度も微調整が必要になりました…。
２．サーバーに画像をアップロードする。
通常の画像（メディア）と同等の扱いです。
このとき、URLをテキストエディタにコピーしておきます。
３．cssを編集する。
２のURLを以下のbackground-image:urlにセット（ペースト）する。
wordpressのAdditional CSSに追加で対処しました。
span.underline{
background-image:url(https://xxxx.xxx.xxxx/…/XXX.png);
background-repeat:repeat-x;
background-position:bottom;
padding-bottom:0.3em;
}
2017.12.08 記載ミス修正
Class名（今回：underline）は、4で使用するものと同じであればOKです。
上記は、リピートで下部位置に0.3文字後から表示する設定です。
４．wordpressの投稿ページなどに記事を作成します。
以下、変換防止のため”＜”は、全角を使用しています。
「テキスト」モードにして、以下のように変更してください。
下線強調したい箇所に
＜span class=”underline”>ここに文字を設定＜/span>
使用例（このページの先頭行）
ーーーーー
WordPressで、＜span class=”underline”>手書き風の下線を引く方法＜/span>をまとめました。
ーーーーー
標準にある下線に比べて、文字を目立たせることができます。
お気に入りの下線を作るまで、少し面倒ですが試してみてください。
