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

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

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

BoldとStrongは何が違うのか

ざっくり言うとBoldは人がブラウザで見たときに変化している見た目だけの変更です。
Strongは検索エンジンにもキーワードとして評価されます。

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

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

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

AddQuicktagの設定

設定のAddQuicktagボタンから

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

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

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

そして一番右のチェックボックス（下の画像一番右）をクリックします。
すると下のように全てのところにチェックが入ります。

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

style.cssの編集

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

.futoji {
font-weight: bold;
}

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

動作確認

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

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

応用編

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

例えば、
.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>タグを
使うのもアリですよ！

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

posted with ヨメレバ

狩野 祐東 SBクリエイティブ 2016-10-27

Amazon

Kindle

楽天ブックス

楽天kobo