AddQuicktagで解決！ WordPressでstrongではない太字を使う方法

WordPressで太字を使うとBoldではないことに最近気づきました。太字ボタンを押してテキストモードで見てみると「strong」になっています。

Strongは検索エンジンにもキーワードとして評価される一方、多用すると「Strongを多用する迷惑サイト」扱いされることがあるため、１記事で数カ所にしておいた方が良いと言われています。

しかし、各見出しごとにキーワードや強調したいことがあるということもありますよね。そういうときはBoldを使うことで対応することが可能です。
Boldタグを手打ちするのが面倒という人は「AddQuicktagプラグイン」で対応しましょう。

太字のボタンを押すと、太くなります

テキストモードで装飾を確認するとStrongタグが使われています

1 Strongは検索エンジンにも影響。多用すると逆効果
2 Boldタグの設定と動作確認
3 style.cssに書き足せば、蛍光色も可能
4 AddQuicktagの設定が用意されているテーマもあります
5 今日のまとめ

Strongは検索エンジンにも影響。多用すると逆効果

今回は、Strongの代わりにBoldを使用して太字を使えるようにします。
StrongとBoldでは何が違うかというと、検索エンジンへの影響の有無です。
Strongは検索エンジンにもキーワードとして評価されるのに対し、Boldは人がブラウザで見たときに変化している見た目だけの変更です。

それならStrongの方が良いのでは？と思いがちですがこれがまた厄介なところでStrongを使いすぎると今度は検索エンジンに「評価されようとStrongを多用する迷惑サイト」扱いされることがあり、かえって検索順位から落とされてしまうことがあります。
なので強調は1記事に数カ所に留めておくのが良いのですが、大事なところは強調したいものです。

シュウ

強調はしたいですが、あれもこれも重要！と言ってると何が重要なのかわからなくなってしまいますね。

Boldタグの設定と動作確認

Boldタグを手打ちするのは面倒なので、AddQuicktagプラグインを使って新しい太字用ボタンを作ってみます。
AddQuicktagプラグインがインストール済みであることが前提ですので、インストールしていない人はAddQuicktagプラグインをインストールしてから進んでください。

AddQuicktagの設定

STEP.1

AddQuicktagの設定画面を開く

設定のAddQuicktagボタンから

下の方に行くとこのような新しいボタンを作成する箇所に移動できます。

STEP.2

AddQuicktagでBold用のボタンを設定する

AddQuicktagの設定画面を開いたら、以下のように入力します。

ボタン名	太字
ラベル名	太字
開始タグ	<span class = “futoji”>
終了タグ	</span>

STEP.3

ボタンの有効範囲を設定する

最後に、作成したボタンが投稿や固定ページなど、どこの記事で使用可能かを設定します。
どんな記事でも使用できたほうが良いというときは一番右のチェックボックス（下の画像一番右）をクリックします。
すると下のように全てのところにチェックが入ります。
これで変更を保存を押せば、AddQuicktag側の設定は完了です。

style.cssの編集

次にstyle.cssにさきほど設定したspanタグの内容を追加します。
子テーマがあるテーマを使っている方は子テーマ側に追加してください。

style.css

.futoji {
font-weight: bold;
}

AddQuicktagで太字になるか確認

これでAddQuicktagで「太字」が使えるようになったので使ってみるとこのようにspanタグが追加されています。

プレビューでも太字になっていることが確認できます。

style.cssに書き足せば、蛍光色も可能

これを応用すると蛍光色とかをつけたりすることもできるようになります。
例えば黄色い蛍光にしたいときは以下のようにします。

style.css

.futoji {
font-weight: bold;
background: linear-gradient(transparent 70%, #ffff66 40%);
}

青くしたいときは以下のとおりです。

style.css

.futoji {
font-weight: bold;
background: linear-gradient(transparent 70%, #CEE3F6 40%);
}

赤くしたいときは以下のとおりです。

style.css

.futoji {
font-weight: bold;
background: linear-gradient(transparent 70%, rgb(255, 170, 170) 40%);
}

futojiに定義するのではなく、keikoなど別の名前をつけることで使い分けることも可能です。
色々応用が効くので試してみてください。

AddQuicktagの設定が用意されているテーマもあります

AddQuicktagの一括登録用に設定が用意されているテーマもあります。
内容が重複している場合は手動で登録する必要がないので、まずは使っているテーマにAddQuicktagの設定があるか確認してみても良いでしょう。
AddQuicktagの設定があるテーマをいくつかご紹介します。
リンク先はAddQuicktagの設定ファイルがある公式ページです。

AddQuicktagの設定があるテーマ