[S] WordPressでstrongではなく太字を使いたいので「AddQuicktagプラグイン」で実装

WordPressで太字使ってみたらBoldではないことに最近気づきました。

太字ボタンを押して

image

テキストで見てみると…srongになっている。

image

 

BoldとStrongは何が違うのか

ざっくり言うとBoldは人がブラウザで見たときに変化している見た目だけの変更です。

Strongは検索エンジンにもキーワードとして評価されます。

それならStrongの方が良いのでは?と思いがちですがこれがまた厄介なところで

Strongを使いすぎると今度は検索エンジンに「目立とうとしてStrongを多用する

迷惑サイト」扱いされることがあり、かえって検索順位から落とされてしまうことがあります。

なので強調は1記事に数カ所に留めておくのが良いのですが、大事なところは強調したいものです。

 

WordPressのエディタでボタンをつくる

そこでAddQuicktagプラグインを使って新しい太字用ボタンを作ってみます。

AddQuicktagの設定

設定のAddQuicktagボタンから

 

image

 

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

image

 

ここにこのように入力します。

ボタン名:太字

ラベル名:太字

開始タグ:<span class = “futoji”>

終了タグ:</span>

image

そして一番右のチェックボックス(下の画像一番右)をクリックします。

すると下のように全てのところにチェックが入ります。

image

これで変更を保存を押せば、AddQuicktag側の設定は完了です。

 

style.cssの編集

次にstyle.cssにさきほど設定したspanタグの内容を追加します。

.futoji {
font-weight: bold;
}

子テーマがあるテーマを使っている方は子テーマ側に追加してください。

 

動作確認

これでAddQuicktagで「太字」が使えるようになったので使ってみると

このようにspanタグが追加されています。

image

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

image

応用編

これを応用すると蛍光色とかをつけたりすることもできるようになります。

例えば、

.keiko {
background: linear-gradient(transparent 40%, #ffff66 40%);
}

とすれば黄色の蛍光にすることも出来ますし

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

とすれば、太字かつ蛍光色にすることが出来ます。

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

これでピンク(赤?)よく教科書に引いたマーカのような色合いになります。

色々応用が効くので試してみてください。

今日のまとめ

AddQuicktagを使えばspanタグを使うことで太字にすることができます。

普段そんなに使わないのであればWordPressのテキストエディタで直接<b>タグを

使うのもアリですよ!