Aqlier/ 6月 10, 2017/ Windows

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>をまとめました。
ーーーーー

標準にある下線に比べて、文字を目立たせることができます。
お気に入りの下線を作るまで、少し面倒ですが試してみてください。