strongタグ乱用防止「ダメ。ゼッタイ。」WordPressクイックタグのbボタンに気をつけろ！【前編】～AddQuicktag～

全国のWordpressユーザー諸君！
文字を太字にしたりイタリックにして強調したりしたい時、

ビジュアルエディタのクイックタグ「B」や、
テキストエディタのクイックタグ「b」

ビジュアルエディタのクイックタグ「I」や、
テキストエディタのクイックタグ「i」

を使ってませんか？
カンタンだし、気軽に使えるし使っちゃいますよね？

実はこのボタンがかなり危険なボタンであることが最近分かりました。

というか既にウスウスこのボタンが悪いものなんじゃないか気がついてますよね？
「B」だとか「b」とボタンに書いてあるはずなのに出力されるコードは <strong></strong> であることを・・・。

やばいだろ？
strongタグって多用すると、
検索エンジンからペナルティ喰らってしまう、

h1タグ的に使う量を意識すべきタグの一つであることですよね・・・。
いままでやばいとは思いつつ、メンドウだから放置してそのまんま使ってきた人！
実はdiceはまさにその一人であります。

いつか調べて解決法を考えなくちゃと思っていました、けど今日、ようやく重い腰を上げ解決法を探ってみました。

おしながき

・強調系htmlタグのおさらいというか認識の確認
・プラグイン「AddQuicktag」でなんとかする

【後編】
・プラグインを使わず function.php に書き込んでなんとかする

太字とか強調で使われるhtmlタグたち

まずはSEO的側面からhtmlタグの意味と効果を確認しましょう！

<strong>タグ

strong【a】/strˈɔːŋ/：
〔言葉などが〕力強い、説得力のある

<strong>タグは、強い重要性を表す際に使用します。
出典: <strong>－HTML5タグリファレンス

意味的な強調を目的とする。
なので、太字にする用途では全くない！

検索ロボットに対してしっかりアピールする、
なので乱用するとスパムの烙印を押され、
検索結果の順位が激しく降格したり、
最悪 除名処分を喰らう。MAJIDE！

strongタグの使っても良さ毛な回数とは？

strongタグは一説に、

1ページあたり2～3回までに使用を留めておくのが無難

だそうだ。

<b>タグ

「b」とは“bold”の「b」

bold【a】/bóʊld/：
肉太の、ボールド体の

<b>タグは、文書内のキーワードや製品名など、他と区別したいテキストを表す際に使用します。
一般的に印刷される際に太字となるようなテキストです。
その箇所が重要であるという意味や強調する役割はありません。
出典: <b>－HTML5タグリファレンス

意味的な強調が目的ではなく、
あくまで、人間の見た目に対してだけであり、
視覚的に太字にするのが主目的。

検索ロボットに対してのアピールは一切無し！
なので乱用しても、“今のところ”スパム扱いにはならない。

使いまくってもSEO的にペナルティーを喰らう心配は今のところ(現在のレギュレーション上では)ないです。

つまり、
・人間から見て太字になり強調され、
・検索ロボットから見ると普通の文字。

見た目的に、演出的に太字にして強調したい時は「bタグ」を使いましょう！
「strong」タグだと百害あって一理無しです、

<em>タグ

「em」とは“emphasis”の「em」

emphasis【n】/émfəsɪs/：
〔重要性を示すための表現の〕力強さ、強調、力説
〔音節や語への〕強調、強意

<em>タグは、強勢する（アクセントを付ける）箇所を表す際に使用します。
出典: <em>－HTML5タグリファレンス

意味的な強調を目的とする。(strongタグと同様)
なので、イタリック(斜体)にする用途では全くない！

strongタグと同様、検索ロボットに対してがっつりアピールする、
なので乱用するとスパムのレッテルを貼られ、
検索結果の順位が激しく降格したり、
最悪 除名処分を喰らう。これも MAJIDE！

emタグの使っても良さ毛な回数とは？

これもstrongタグ同様にemタグも一説に、

1ページあたり2～3回までに使用を留めておくのが無難

だそうだ。
だからといって、strongタグとemタグで計6回アピールできるってわけだが、
「露骨な肋骨」(サンタナ調)なクドイアピールは止めておいた方が良いでしょうね。

<i>タグ

「i」とは“italic”の「i」

italic【a】/ɪtˈælɪk/：
《印刷》イタリック体の、斜字体の

分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前、 その他一般的に印刷される際にイタリック体となるようなテキストです。
その箇所が重要であるという意味や強調する役割はありません。
出典: <i>－HTML5タグリファレンス

意味的な強調が目的ではなく、(bタグと同様に)
あくまで、人間の見た目に対してだけであり、
視覚的にイタリック(斜体)にするのが主目的。

検索ロボットに対してのアピールはbタグ同様一切無し！
なので乱用しても、“今のところ”スパム扱いにはならない。

bタグと同じく、
使いまくっても、SEO的にペナルティーを喰らう心配は今のところ(現在のレギュレーション上では)ないです。

つまり、
・人間から見て斜体になり強調され、
・検索ロボットから見ると普通の文字。

見た目的に、演出的にイタリックにして強調したい時は「iタグ」を使いましょう！
「em」タグだと百害あって一理無しです、

spanタグとfont-weight: bold;

太字にしたければ、
<span style=”font-weight: bold;”></span>で囲む。

これがイチバン無難かもしれない。
いつ、bタグ や iタグ に対する検索エンジン側のレギュレーションが変わるか分かりませんからね。

太字専用、イタリック専用の spanタグ を
あとはCSSをインラインに直接書き込むか、別ファイルであらかじめ定義してクラスで呼び出すか使い勝手が良いほうを選んでくださいね。

【e.g. 1】タグのstyle属性で「重要」だけを太くしたい

これから言うことは<span style="font-weight: bold;">重要</span>ですよ！

【e.g. 2】あらかじめスタイルをを別CSSファイルで定義して、
定義したクラス名を使って「ジューシー」だけを斜体にする。

.my-italic {
	font-style: italic;
}

「うわっ美味しい、このお肉<span style="my-italic">ジューシー</span>、ジューゴ、ジューロク！」

【e.g. 3】別CSSファイルに自分がやりたい強調方法を定義しておく、
例えば文字の大きさを2倍にして太字にする

.my-strong {
	font-size: 2em;
	font-weight: bold;
}

シェイクスピア曰く「罪無き者も<span style="my-strong">稲妻に打たれる</span>こと有り」・・・

クイックタグのBボタンをstrongタグじゃなくbタグにしたい

強調するのにイチイチタグの手打ちはメンドイ。
「B」ボタンで解決したいッス！

色々やり方があります、
それぞれメリットとデメリットがあるんでそれを踏まえて取り入れてみてください。

プラグインに頼る方法 ～AddQuicktag～

「AddQuicktag」というプラグインでクイックタグをカスタマイズする方法がお手軽ですね。
初心者はこれが無難でしょう。

まずは AddQuicktag インストール

プラグイン ＞ 新規追加

検索窓に「AddQuicktag」と打ち込んで検索すると・・・、

2つほどヒットしましたが、
「AddQuicktag」の「いますぐインストール」をクリック。

しばらく待ちます。
完了したら「プラグインを有効化」をクリックして AddQuicktag を動かしましょう！

AddQuicktag で <b>タグや <i>タグの ボタンを作ろう！

設定 ＞ AddQuicktag

これが AddQuicktag の設定画面。

まずは <b>タグのボタンを作ろう！

ボタン名：b
ラベル名：bタグ
開始タグ：<b>
終了タグ：</b>
アクセスキーと順番は空欄にした。
あと、「ビジュアルエディター」「post」「page」にチェックを入れた。

「変更を保存」をクリックしないと設定は反映されないよ！

少し下のほうにあるのがややイジワル。

保存するとこう

一つカラムが増えるので追加する場合はそこからどーぞ。

とりあえず確認しますか？
テキストエディタのクイックタグ

ちゃんと追加されていますね？
「ボタン名」がボタンの中の文字で
「ラベル名」はロールオーバーした時に表示される文字ということが分かった。

問題なく動作確認しました。

しかし、
しか～し、「ビジュアルエディター」にチェック入れたのにボタンが無いorz

ここで「ビジュアルエディター」で使うのがメインなのにこれじゃダメだ・・・。
ちょっと探ってみます。
解決したらココに追記しますね。

それでは引き続き<i>タグのボタンを作ろう！

ボタン名：i
ラベル名：iタグ
開始タグ：<i>
終了タグ：</i>
アクセスキーと順番：空欄
「ビジュアルエディター」「post」「page」にチェック

忘れずに「変更を保存」をクリック。

AddQuicktag で いらないデフォルトのボタンを非表示にしよう！

さて、いらないデフォルトの<strong>タグと<em>タグを非表示にさせましょう！

消したいボタンにチェックを入れるだけ！

忘れずに「変更を保存」をクリック。

それでは確認、
「テキストエディタ」では消えましたね

しかし「ビジュアルエディター」はそのまんま、

ココもどうにかする方法を見つけたら追記しますね。

AddQuicktag のメリットとデメリット

メリットは、
・カンタン！お手軽！初心者でもカンタンに対応できる！
・他にも自分好みのタグボタンを作れる！
・Wordpressの仕様が変わってもプラグイン制作者が

デメリットは、
・プラグイン制作者が活動的じゃないと仕様が変わったとき急に使えなくなるかもしれない。
・プラグインをインストールする行為はWordpress内部の一般ユーザーじゃ良くわからないブラックボックスな部分が弄られます。パソコン的に言えばレジストリーが弄られるって感じですかね？DBもそれ専用に項目が追加されたりします。弊害としてプラグインは便利だけど増やせば増やすほどブログとしての動作が重くなっていきます。プラグインをアンインストールしても根本的な解決に至りません。Wordpress本体を再インストールしてもDB周りのゴミは取り除けません。なのでWordpressが分かってきたら、簡単な機能はなるべくプラグインに頼るのは避けるべきです！

さて、お次は、
プラグインを使わず function.php に書き込んで対応させる方法を紹介します。
・・・、が長くなったので次につづく！

---