WordPressの家庭教師 in 神戸

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

*

WordPressのカスタマイズ:ポイントを強調表現出来る蛍光マーカーテクニック!

      2015/11/25

蛍光マーカーを演出

WordPressはとても便利なツールですが、文字コンテンツを装飾するツールが少々寂しいと思いませんか?
一般的なHTMLで使える強調や箇条書きなどはサポートされていますが、もう少しバリエーションがあったら?
嬉しいですよね?

私自身が文字数が多いコンテンツを書くため、読みやすさだったり、メリハリをつけるためのテキストの装飾にはかなり気を使っています。
WordPressに簡単に追加出来るテキスト装飾をシリーズでご紹介しています。

WordPressに蛍光マーカーで線を引く!

ご紹介するのは、WordPressでテキストに蛍光マーカーで線を引くテクニックです。
蛍光マーカー…..学生時代からお世話になった方も多いはず。

文字に蛍光マーカーが引いてあるとそこはポイントである!

とこんな風になります。

受験勉強の名残でしょうか?
文字に蛍光マーカーで線が引いてあると「お!重要だな!」と思ってしまいますね。
日本人にはかなり効果的な装飾です。

実はこの装飾はSIRIUSというアフィリエイターさん御用達のツールで採用されているテクニックです。
アフィリエイターさんが好んで使う機能ですから、高い効果が期待出来ます。

WordPressで蛍光マーカーを使うテクニック

では、WordPressで蛍光マーカーを使うテクニックをご紹介しましょう。
決して難しくはありませんのでついて来て下さいね。

カスタムCSSにスタイルシートを追加

WordPressでスタイルシートを編集するには二つ方法があります。
今回はカスタムCSS編集画面を使います。
参考記事:https://www.takujiozaki.com/text-decoration/post-266.html

外観メニュー

外観>CSS編集を呼び出します。

 .keikoumarker { background-color: #FFE566; font-weight: bold; padding: 2px; } 

CSSエディタ
保存して投稿画面に戻ります。

投稿画面で蛍光マーカーを使用する方法

マーカーを引きたい部分に以下のように記述します。
*ビジュアルではなくテキスト画面で作業して下さい。

<span class="keikoumaker">文字に蛍光マーカーが引いてあるとそこはポイントである!</span>

蛍光マーカーを引くこれで終了です。簡単でしょ?

補足 spanタグはインライン要素といって行内の一部の場所を指定出来ます。
pタグやdivタグはブロック要素といって行全てに適用されます。蛍光マーカーを引く部分は狭ければ狭いほど強調されますのでspanタグで使うのが正解だと考えます。

一つだけ注意点です。カスタムCSSエディターで編集した内容は投稿画面で反映されませんのでどう見えるかはプレビューボタンをクリックしてご確認ください。

まとめ

  • WordPressでテキストに蛍光マーカーを引く事が可能です。
  • カスタムCSSにスタイルシートを追記。
  • 投稿画面で蛍光マーカーを引きたい部分にスタイルシートを適用する。

この記事を見ながら作業してもらっても10分あればあなたのワードプレスに蛍光マーカーが追加されます。
ぜひ挑戦してみてください。

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

関連記事:蛍光マーカーは何本あればブロガーは幸せになれる?

 - WordPress表現力向上委員会