コピペで記事の文字列を蛍光ペン風に強調するcssの設定方法 [wordpress]

蛍光ペン風マーカーの設定

ここ最近は、wordpress のカスタマイズに凝りまくって、肝心の記事の更新が疎かになっていますが、また今回もWPの記録ネタとなってしまいました(;^_^A

まぁこんな記録記事でも、一応は更新になるからいいのかな？

ところで、ネットでいろんなブログを読ませてもらっていると、中にはとても読みやすくて「おっ！」と思わせるようなブログがたくさんありますね。

皆さん、記事の書き方には、ほんとに工夫されていて読み手の立場に立って上手に書いているもんだな～とつくづく感心させられてしまいます。

そこで自分も、少しでもうまく書けないものかと勉強してみる気になったのですが、やはり才能なのかこればかりはなかなかうまくいきません。

でも、読みやすい記事の特徴として、見出しに文字の色使いや改行、うまい段落の付け方、強調すべき所をうまく強調して伝えたい事をちゃんと文章に表現されていますね。

特に強調文字に蛍光ペンで描いたような装飾文字も多く見られるのには驚きました。

しかし、なかなかいいですよね～蛍光ペン風の強調文字って！
なんかこう、インテリジェンスな雰囲気が漂っていますね～(^^♪
あれって、いったいどうやって書いているんだろうか？

自分もやってみたいなぁ～なんて思ったので、ネットでググってそのやり方を調べてみることにしました。

相変わらず、ミーハー丸出しです(;^_^A

可愛い蛍光ペン風のcssコード

ネットで調べてみると、蛍光ペン風にする方法はいろんなやり方があるようで、しかも今回もやっぱり、CSSコードのコピペだけでOK！ということなので、初心者にはとてもありがたいですね。

そんな中で、2つのやり方を紹介したいと思います。

1⃣ 直接strongタグに指定する方法

まずは直接、強調文字（ストロングタグ）が蛍光ペン風になるように下記のCSSコードをstyle.cssに記述してしまいます。

 /* 強調文字蛍光ペン*/
strong {
background: linear-gradient(transparent 40%, rgb(255, 170, 170) 40%);
}

すると、いつものように記事を書いていているときに、強調したい文字を指定してツールパレットの”B”ボタンを普通にクリックするだけで、蛍光ペン風に強調されます。

いちいち、その度にhtmlタグを記述することがないのでとても便利です(^^♪

ちなみに上記のcssコードは、赤色の蛍光ペンが指定されています。

こんな感じの蛍光ペンです。

色を変えたい場合は

strong {
background: linear-gradient(transparent 40%, #ff99ff 40%);
}

カラー番号：#ff99ff

上記で指定している＃…のカーラー番号を変更することで可能です。
ちなみに、上記の色はこんな感じのピンク系です。

参考例

緑の蛍光ペン風はこんな感じ。

strong {
background: linear-gradient(transparent 40%, #66FFCC 40%);
}

カラー番号：#66FFCC

青の蛍光ペン風はこんな感じ。

strong {
background: linear-gradient(transparent 40%, #66ccff 40%);
}

カラー番号：#66ccff

linear-gradientの要素で前の数字が蛍光ペンが始まる位置（太さ）となり、後の数字がその色の透明度になりますので、好みの色とともに太さや透明度を自由に調整できます。

この方法は、ひとつのCSSコードをコピペするだけで、既存の強調ボタンが蛍光ペン風の強調ボタンに置き変えられるうえに、普段通りの記事執筆で使えるのは大変便利です。

しかし、指定した色の単色しか使えないし、色を変えたいときは、その都度CSSコードの色指定を書き換えなければなりません。また全ての強調タグに適用されてしまうので、今までに書いた投稿記事に使った強調文字が、全てその色の蛍光ペン風の文字に置き換わってしまいます。

意図しない部分が、強調されていないかのチェックが必要ですね♪

2⃣ Textエディタに個々のボタンを作る

この方法は、テキストエディタを使うことになりますが、楽にできる方法がありますのでご安心！！

でも、少しややこしくて function.php と style.css の両方に長いコードを記述しなければなりませんが、まぁ～これもコピペでOK！なので問題ないと思います。

初心者の場合に普通は、ビジュアルエディタを使っていると思います。
そんな自分も普段は楽ちんなビジュアルエディタです。

気分としては、プロっぽくテキストエディタでバリバリhtmlを記述してカッコよくいきたいところですが・・・（”＾ω＾）

たまにテキストエディタで記事を編集することもありますが、見出しにしたい文字列や、強調したい文字列を毎回、手書きでタグを書くのは非常に面倒ですね。

今回の蛍光ペン風にする文字も、やはり毎回の手書きとなると気が遠くなりそうです。

そこで、ワンクリックでタグを挿入できるボタンを作り、蛍光ペン風の強調文字が楽に設定できるようにします。

自分の場合、テーマはsimplicityを使っており、そのテーマに沿って説明していますのでご了承ください。

functions.phpにコードの追加

simplicity-child（子テーマ）フォルダの中にある
functions.php に以下の記述コードを追記します。

// 文字装飾用のボタンを追加
function add_my_quicktag() {
?>
  <script type="text/javascript">
  QTags.addButton('h2','見出し(大)','<h2>','</h2>\n');
  QTags.addButton('h3','見出し(中)','<h3>','</h3>\n');
  QTags.addButton('blue','青字','<span class="moji-blue">','</span>');
  QTags.addButton('green','緑字','<span class="moji-green">','</span>');
  QTags.addButton('underline','下線','<span class="moji-underline">','</span>');
  QTags.addButton('pen-yellow','蛍光（黄）','<span class="pen-yellow">','</span>');
  QTags.addButton('pen-red','蛍光（赤）','<span class="pen-red">','</span>');
  QTags.addButton('pen-pink','蛍光（桃）','<span class="pen-pink">','</span>');
  QTags.addButton('pen-green','蛍光（緑）','<span class="pen-green">','</span>');
  QTags.addButton('pen-blue','蛍光（青）','<span class="pen-blue">','</span>');
  </script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');
?>

コードを追加する場所は、いつものように末尾に記述します。

とりあえず、確認してみましょう。

テキストエディタのツールバーの中に10個のボタンが出来ていれば成功です。

style.cssにコードの追加

次に、個々のボタンに仕事の役割を付けるために
同じくsimplicity-child（子テーマ）フォルダの中にある
style.css に以下の記述コードを追記します。

/*記事用の文字装飾*/
div.post span.moji-blue{
color: #0000ff;
}

div.post span.moji-green{
color:#00ff00;
}

div.post span.moji-underline{
text-decoration: underline;
}

div.post span.pen-yellow{
background: linear-gradient(transparent 40%, #ffff66 40%);
font-weight: bold;
}

div.post span.pen-red{
background: linear-gradient(transparent 40%, #ffc0cb 40%);
font-weight: bold;
}

div.post span.pen-pink{
background: linear-gradient(transparent 40%, #ff99ff 40%);
font-weight: bold;
}

div.post span.pen-green{
background: linear-gradient(transparent 40%, #66ffcc 40%);
font-weight: bold;
}

div.post span.pen-blue{
background: linear-gradient(transparent 40%, #66ccff 40%);
font-weight: bold;
}

蛍光ペン風マーカーのイメージは、先の参考例とまったく同じものです。

黄色の蛍光ペン風マーカー

赤の蛍光ペン風マーカー

ピンクの蛍光ペン風マーカー

緑の蛍光ペン風マーカー

青の蛍光ペン風マーカー

これと同じものでよければ、functions.php、style.css 共にコードをコピペするだけでいいと思います。

使い方としては、蛍光ペン風強調文字にしたい場合にテキストエディタにて、目的の文字列を選択して好きな蛍光ペンのボタンをクリックするだけでタグが挿入されます。

ちなみに、ビジュアルエディタ上では何の変化もなく、確認ができないのでプレビューで変化を確認しました。設定直後には、プレビューでも確認できない場合がありましたが、リロード(再読込）してみたところバッチリ確認できました(^^♪

蛍光ペンの追加・カラー変更

カラーを変更したい場合は、functions.phpとstyle.cssに記述されている色指定の部分とカラー番号を書き換えます。

もっと他の色の蛍光ペンを増やしたい場合は以下の方法があります。

functions.phpの下記の部分を追記

  QTags.addButton('pen-blue','蛍光（青）','<span class="pen-blue">','</span>');

style.cssの下記の部分を追記

div.post span.pen-blue{
background: linear-gradient(transparent 40%, #66ccff 40%);
font-weight: bold;
}

両方にコードを追記して、functions.php色指定の部分とstyle.cssのカラーネーム、カラー番号を書き換えます。
これで、いくつでも好きなだけ蛍光マーカーを増やすことができるので、楽しみも増えますね(^^♪

3⃣ 今回のまとめ

今回紹介した方法で、最初の直接強調ボタンに割り当てた場合に、以前の記事を確認してみたらとんでもないことになっていたので、自分はテキストエディタにボタンを作る方を設定して記事を書くようにしました。

これで少しは、読みやすい記事が書けるようになればいいですよね！
こんなツールが増えれば、毎回記事を書くのも楽しくなりそうです(^^♪

でも、あまりにも色を使いすぎてよけいに読みにくい記事になってしまっては本末転倒なのでほどほどにしなきゃいけないですね。

ということで、今回は少し偉そうに、さも自分ができるような書き振りになってしまいましたが、あくまでも素人のやってみた記録だということをご了承くださいね(;^_^A

もしも参考にして、functions.phpやstyle.cssをいじる場合は、不具合が起こった場合に元に戻せるように必ずバックアップコピーを取ってから自己責任で行ってください。

当方では一切の責任は負いませんので、ご了承願います。

それでは今回はこの辺で・・・！
最後までお付き合いありがとうございました。
じゃぁ～またね～バイバイ(@^^)/~~~