AddQuicktagに蛍光ペンstyleを追加・CSSもSEOに配慮しよう!

AddQuicktagの使い方蛍光ペンスタイル編

AddQuicktagはスタイルシート(style.css)に追加したスタイルをテキストエディターやビジュアルエディターでテキストにワンクリックで適用させる様に設定できるWordPressプラグインです。

WordPressのテーマには、見映えに関する”スタイル”を一括して管理するためのスタイルシート(style.css)があります。

よく使うスタイルはスタイルシート(style.css)に記述し、HTMLにclassで適用させるのが正攻法ですが、いちいちテキストエディターでHTMLを書くのも面倒です。

このようなときに、スタイルシート(style.css)に記述したスタイルを登録することによって、ビジュアルエディターでも簡単にスタイルを適用できる状態にすることができるプラグインです。

この記事では最近流行りの蛍光ペンスタイルをAddQuicktagに追加する方法について書いています。

TinyMCE Advancedでも太字にしたりできるけど、それじゃいけないの?

ブログを書いていて、この一文は目立たせたい、といった場合に太字のBを使ったり、文字を大きくしたり、色を変えたり。そんな時によく使われるプラグインは、TinyMCE Advancedですね!

TinyMCE Advancedも良いプラグインだと思うのですが、多用するとテキストがタグだらけになってしまうのが気になるところ。

どういうことかというと、

「AddQuicktagはCSSに追加したスタイルをHTMLエディターやビジュアルリッチエディターでテキストにワンクリックで適用できるWordPressプラグインです。」

という一文をTinyMCE Advancedで

AddQuicktagはCSSに追加したスタイルをHTMLエディタービジュアルリッチエディターテキストにワンクリックで適用できるWordPressプラグインです。」

と編集した場合に、これをテキストエディターで見ると、元のテキストのみのHTMLが以下のようになっているのに対し、

元のテキストのみのHTML

スタイルを追加したHTMLは以下のようになります。

タグ満載のテキストHTMLの例

極端な例ではありますが、このようにスタイルのタグがテキストに大量に入りこんでしまうと、検索エンジンに正しく理解されない恐れや、本当に重要なキーワードを拾ってもらえない恐れがあります。

特に重要なポイントというのは、強調したくなるものであり、その中に重要キーワードが含まれているということも、ままあると思いますので、WordPressに慣れてきたら、SEOの事も考えて、HTMLタグがどのようになっているかにも少しは気を配りたいものです。

TinyMCE AdvancedとAddQuicktagは同じテーマ内でも両立できますので、

  • ピンポイントで使うスタイルはTinyMCE Advancedで、
  • よく使うスタイルはスタイルシート(style.css)に記述→AddQuicktagに登録、

というのが便利で賢い使い方だと思います。

では、最近流行りの蛍光ペンスタイルをAddQuicktagへ登録する方法で使い方を見ていきましょう

蛍光ペンスタイルをAddQuicktagへ登録する方法

AddQuicktagへ蛍光ペンスタイルを登録する手順は

  1. style.cssに蛍光ペンスタイルを記述
  2. 蛍光ペンスタイルにつけたclass名をAddQuicktagへ登録

です。
※AddQuicktagのインストールは割愛しますが、プラグインの新規追加で検索、ダウンロードできます。

スタイルシート(style.css)に蛍光ペンスタイルを記述

まず、ダッシュボードのメニューの外観→テーマの編集を開きます。
テーマの編集を開く

テーマの編集を開けると、まずスタイルシート(style.css)が出てきますので、この一番下に、蛍光ペンのcssを追加します。

今回は、このように←文章の途中でも使える様に、spanでくくりました。

蛍光ペンスタイルのスタイルシートへの記述の仕方

この↑タグも一応、テキストでこちらに載せておきます。

span.keiko-pen-cyan{
background: linear-gradient(transparent 15%,rgba(134, 246, 255, 0.55) 60%);
}

蛍光ペンのcss例
※お好きなものがありましたら、コピペしてお使いください。

新しい朝が来た、希望の朝だ

span.keiko-pen-red{
background: linear-gradient(transparent 15%,rgba(255,0,39,0.55) 60%);
}

喜びに胸を開け、大空あおげ

span.keiko-pen-blue{
background: linear-gradient(transparent 15%,rgba(134, 246, 255, 0.55) 60%);
}

ラジオの声に、健やかな胸を

span.keiko-pen-yellow{
background: linear-gradient(transparent 55%,rgba(255, 213, 0, 0.85) 60%);
}

この香る風に開けよ、それ1.2.3

span.keiko-pen-green{
background: linear-gradient(transparent 75%,rgba(0, 255, 71, 0.85) 60%);
}

蛍光ペンスタイルにつけたclass名をAddQuicktagへ登録

メニューの設定 → AddQuicktag を開きます。

アドクイックタグの設定を開く

ラベル名とタグを追加します。
ビジュアルエディター、post、pageにも☑を入れておきます。
AddQuicktag・クイックタグの追加方法

タグはCSSのセオリーに従って登録します。

この場合、class=”・・・・・・” の “・・・・・・・” 内に先に登録したclass名=スタイルの名前を入れます。

開始タグである、

<span class="keiko-pen-cyan">

を上の欄に、

終了タグである、

</span>

を下の欄に記入します。

変更を保存ボタンをクリックして保存します。
変更を保存

ちゃんとできているかを確認するには、新規投稿ページで適当な文章を入力し、その文章をドラッグして選択した状態で、Quicktags▼の▼をクリック、先ほど登録したスタイルをクリックします。
クイックタグのテスト

プレビューで確認すると、下の様になります。
クイックタグの確認

テキストで確認すると、以下のようなタグになっていると思います。

class適用した場合のタグ

styleで直接CSSを適用した場合のタグでは、下の様になるので、比較するとタグがすっきりしているのが良くわかると思います。

styleでCSSを適用した場合のタグ

ではでは、今日はこの辺で(^^)
「WPプラグインAddQuicktagの使い方・CSSもSEOに配慮しよう!」の巻でした♪

お役にたったら、シェアなどしていただけるとうれしいです!(^^)

Published:2015/06/26

Written by

AddQuicktagに蛍光ペンstyleを追加・CSSもSEOに配慮しよう!」への3件のフィードバック

  1. はじめまして。蛍光ペンに挑戦しましたが、反映されませんでした。
    どうしてかわかりません。もし、よかったら是非どうしたらいいのかおしえてくださいませんか?よろしくお願いします。

    1. ともこさん、こんにちは!
      ご質問、ありがとうございます!

      これだとわかりにくいかも、と危惧していた部分かな?と思いますので、補足させていただきますね(^_^;)

      css例で、ご自分のお好きなスタイル名にした方が良いと思い、本来は

      span.keiko-pen-cyan{
      background: linear-gradient(transparent 15%,rgba(134, 246, 255, 0.55) 60%);
      }

      と書くべきところを、部分的に{ }内だけを抜き出して

      background: linear-gradient(transparent 15%,rgba(134, 246, 255, 0.55) 60%);

      と、書いております(^_^;)。

      例えば、一番上の赤のものでしたら、

      span.keiko-pen-red{
      background: linear-gradient(transparent 15%,rgba(134, 246, 255, 0.55) 60%);
      }

      とスタイルシートに書く必要があります。

      そして、Add Quick Tagのほうにこのstyleを登録する際には、

      開始タグに <span class=”keiko-pen-red”> と、
      終了タグに </span> を登録して下さい。
      ※<>にすると読めなくなってしまいますので、全角<>を使っていますのでご注意ください。

      もし、これらは大丈夫なのに出来ない、ということであれば、メールをいただけますか?

      画面キャプチャなどで登録内容を確認させていただければ、ご助言できるかと思いますので(^^)

      E-mail:info@hublog.biz

      以上、よろしくお願い致します(^^)

コメントを残す