2017年6月10日

WordPressで、手書き風の下線を引く方法をまとめました。

標準で持っている下線と異なる表現が可能です。

 


対応手順

1.下線のイメージデータを作成します。
drow系ソフトで、下線データ(画像)を作成します。

今回40×40の大きさで作成しています。

◆イメージデータを作成する際のポイント
 ・手書き風を強調するように、きれいに直線で引かない。
 ・使用するページの背景色を合わせる。
 ・横幅は短くでも可能で、リピート機能を使うので同じ高さで繋ぐように作成する。
  ※線の太さなど何度も微調整が必要になりました…。

2.サーバーに画像をアップロードする。
通常の画像(メディア)と同等の扱いです。
このとき、URLをテキストエディタにコピーしておきます。


3.cssを編集する。

2のURLを以下のbackground-image:urlにセット(ペースト)する。
wordpressの
Additional CSSに追加で対処しました。

span.underline{
	background-image:url(http://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文字後から表示する設定です。

4.wordpressの投稿ページなどに記事を作成します。
以下、変換防止のため””は、全角を使用しています。
「テキスト」モードにして、以下のように変更してください。

下線強調したい箇所に
<span class=”underline”>ここに文字を設定</span>

使用例(このページの先頭行)
ーーーーー

WordPressで、<span class=”underline”>手書き風の下線を引く方法</span>をまとめました。
ーーーーー

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