WordPressの家庭教師 in 神戸

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

*

WordPressのカスタマイズ:蛍光マーカーは何本あればブロガーは幸せになれる?

   

Wordpressに蛍光マーカーを追加

前回、ご紹介したワードプレスに蛍光マーカーを引くというテクニックを見た友人から、マーカーは黄色だけじゃないとツッコミをいただきました。

確かに、学生時代は筆箱に2、3本は入ってましたね。蛍光マーカー。
今日は、「ワードプレスに蛍光マーカーを引く」の延長戦です。
蛍光マーカーの色を増やしてみたいと思います。

コンテンツ画面を更にカラフルにする蛍光マーカー量産大作戦

おさらいです。

前回、ご紹介したのはワードプレスのテキストコンテンツに大切なポイント、注目して欲しいポイントを蛍光マーカーで強調するというテクニックです。

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

こんな感じですね。
参考記事:WordPressのカスタマイズ:ポイントを強調表現出来る蛍光マーカーテクニック!

今回はこのバリエーションを

蛍光マーカーは黄色だけじゃない!

蛍光マーカーは黄色だけじゃない!

蛍光マーカーは黄色だけじゃない!

と3本増やして4本体制にしたいと思います。

Wordpewssに新しい蛍光マーカーを追加する

カスタムCSSを編集

私のブログをご覧に皆様には、すっかりお馴染みだと思いますがカスタムCSSの編集です。

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

外観メニュー

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

以前、追加していただいた方は

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

という記述があると思います。

これをコピペしてスタイルシートで呼び出すクラス名と色指定を変えてやればOKです。

.keikoumarkerBlue { background-color: #00BFFF; font-weight: bold; padding: 2px; }
.keikoumarkerPink { background-color: #F781F3; font-weight: bold; padding: 2px; }
.keikoumarkerGreen { background-color: #40FF00; font-weight: bold; padding: 2px; }

簡単でしょ?もちろんこのままコピペしてもらってもOKです。

蛍光マーカーを追加

こんな感じになるはずです。
こうやって少しづつCSSに触れる事で慣れて行くってのも大切です。

!一つだけ注意点です。

ここで前回追加した「keikoumarker」を「keikoumarkerYellow」にしたくなった人は手を上げて下さい。
はい!OKです。手を下ろしましょう(笑)

名前を変更してももちろんOKですが、名前を変更するとこれまでの投稿で使った蛍光マーカーの名称も変更しなければなりません。

「それは面倒くさい」と思った人はそのままに。「治さないと気持ち悪い」と思った人はCSS設定と投稿画面の両方を変更してください。

保存して投稿画面に戻りましょう。

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

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

<span class="keikouBlue">蛍光マーカーは黄色だけじゃない!</span>
<span class="keikouPink">蛍光マーカーは黄色だけじゃない!</span>
<span class="keikouGreen">蛍光マーカーは黄色だけじゃない!</span>

そうすると下記の様に表示されます。

蛍光マーカーは黄色だけじゃない!
蛍光マーカーは黄色だけじゃない!
蛍光マーカーは黄色だけじゃない!

上手く行きましたか?

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

すでにお気づきかと思いますが、さすがに4色全部使うとかなりうるさいですね。
あくまでコンテンツを読みやすくする、メリハリをつけるための道具ですので乱用は逆効果になる場合もあります。
くれぐれもセンスよくお願いします。

まとめ

  • WordPressで新しく三色の蛍光マーカーを追加しました。
  • カスタムCSSにスタイルシートを追記。
  • 投稿画面で蛍光マーカーを引きたい部分にスタイルシートを適用する。

前回のが出来ている人はアレンジテクニックです。すぐに出来るはずですのでぜひ挑戦してみてください。

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

 - WordPress表現力向上委員会