WordPressの家庭教師 in 神戸

WordPressでWebサイトを作りたい人、お店、教室、先生の為の個人レッスンPC教室

*

WordPressのカスタマイズ:ココ大事を示す、アンダーラインを破線にするテクニック

      2015/11/23

アンダーラインを破線に

前回の「ポイントを強調表現出来る蛍光マーカーテクニック!」に引き続き、Wordpressで文字を強調するテクニックをご紹介します。
蛍光マーカーに並び強調の定番テクニックといえば下線(アンダーライン)でしょう。

はい!ここ大切です。試験に出ますよ!

↑というテクニックはWordressに標準で入っています。

今回ご紹介するのは!

はい!ここ大切ですよ。試験に出しますよ!

というより目立つ文字装飾です。

難易度は”易しい”です。5分で出来てしまいますので、お!っと思った方は使って下さい。

「はい!ここ試験に出ますよ」的 太い破線のアンダーラインの引き方

ちょっとおさらいをしておきましょう。

はい!ここ大切です。試験に出ますよ!

というアンダーラインはWordpressの投稿画面に標準機能で備わっています。
文字を書いて選択して、下線のボタンをクリックするだけでOKです。

Wordpress下線を引く

きっと使った事があると思います。

今回、ご紹介するのはもうちょっと強めの強調が出来てしまう。太くて破線(点線)のアンダーライン。

はい!ここ大切ですよ。試験に出しますよ!

という表現です。

Wordpewssに太い破線アンダーラインを追加する

カスタムCSSを編集

まず、カスタムCSSにスタイルシートを書き込みます。

カスタムCSS編集画面を開きましょう。

カスタムCSSって何だ?って方は
参考記事:ちょっと待って!WordPressテーマを編集する前に理解しておきたい2つのポイント!
を参照下さい。

外観メニュー

外観メニュー>CSS編集 と進みます。

書き込むスタイルシートは

.dashedline {
	border-bottom: dotted 3px #666;
}

とこれだけです。

簡単ですね。コピペしていただいてOKです。

太い破線アンダーラインCSS編集画面

こんな感じです。

*他のカスタムCSSを記入している場合は一番最後に書き足して下さい。

投稿画面でカスタムCSSを呼び出す方法

次に使い方です。

テキスト編集画面で太い破線を呼び出したい箇所を探して、下記のように入力します。
これもコピペでOKです。
*ビジュアルではなくテキストですよ!タブで切り替えて下さい!

<span class="dashedline">はい!ここ大切です。試験に出ますよ!</span>


Wordpressに破線のアンダーラインを引く
これで、太い破線が使えるようになります。
意外に簡単でしょ?

*カスタムCSSで設定したスタイルシートは投稿画面では反映されません。
プレビューをして確認して下さい。

まとめ

  • WordPressでテキストに目立つアンダーラインを引く事が可能です。
  • カスタムCSSにスタイルシートを追記。
  • 投稿画面でアンダーラインを引きたい部分にスタイルシートを適用する。

文字装飾のテクニックはメリハリが生み文章が読みやすくなりますし、明確にポイントを伝える事が出来ます。
色々なテクニックが増えるとコンテンツ書くのが楽しくなりますよ。

解らない方はぜひ、レッスンに来て下さい。
他の文字装飾も一緒にご紹介します。

 - WordPress表現力向上委員会