WordPressブロックエディターでSPANで太文字装飾するプラグインを作ってみた

SPANで太文字装飾

エナリ

今回は、WordPressのブロックエディターに文字を太文字にするプラグインを作成したよ！

トモエ

元から太文字できたよね？

WordPressのブロックエディターは、標準で文字を太文字装飾する機能があるよ。

これは文字をstrongタグで囲っているんだ。htmlタグで確認すると次のように<strong>…</strong>なっているよ。

<p>文字を<strong>太文字装飾</strong>する</p>

strongタグは強調という意味があって、重要なキーワードや文章に使用するんだ。今はどうかわからないけれど、以前の検索エンジンはstrongタグを使いすぎると順位を下げたりしていたんだ。

もちろん重要なキーワードにピンポイントでstrongタグを使用するならいいんだけど、見た目を変化させるだけの目的でstrongタグを使うのは推奨されないんだ。

そこで使用するのがspanタグだよ。

spanタグで太字にしても何の意味も持たないから、好きなだけ使えるんだ。

おまけ：bタグでの太字

bタグは、読んでいる人に注目して欲しいという意図で使用するタグだよ。strongタグよりは弱いんだけど、それでも特別な意味を持つタグなんだ。

今回はbタグでの太字装飾もできるようにしたから、目的に合わせて使い分けてね。

SPANで太文字装飾プラグインのダウンロード

エナリ

ここからダウンロードしてね

エナリ

次の条項に同意できる人が、ダウンロードしてね

• 免責事項（Disclaimer）
  
  ●本プラグインは「現状のまま」提供され、いかなる保証もありません。
  ●本プラグインの使用により発生した損害（データ損失、サイトの動作不良、セキュリティリスク等）について、一切の責任を負いません。
  ●プラグインの互換性や動作保証は行いません。
  
• ライセンス（License）
  
  ●このプラグインはGPLライセンスの下で提供されます。
  
• プライバシー（Privacy Policy）
  
  ●このプラグインはブラウザに設定情報を保存しますが、サーバーとの通信は行っていません。
  
• アップデート・変更
  
  ●アップデートの予定はありませんが、機能の追加・変更・削除を予告なく行う可能性があります。
  
• その他
  
  ●バグ等ありましたら問い合わせよりご連絡いただけると嬉しいです。
  

プラグインの使い方

エナリ

このプラグインの使用方法を簡単に解説するよ

インストール

プラグインをダウンロードしたら、WordPressの管理画面メニューから『プラグイン』⇒『新規プラグインを追加』でプラグイン追加画面を開いてね。

次に『プラグインのアップロード』を押すと、ファイル選択画面が開くよ。

『参照』を押すとファイル選択するダイアログが表示されるから、ダウンロードしたファイルを選択してね。

最後に『今すぐインストール』を押すと、インストールが始まるよ。

アンインストール

インストール済みプラグイン一覧画面で、『KMB Add bold text (span tag)』を『無効』リンクで無効化した後に、『削除』リンクで削除してね。

ブロックエディターの起動

このプラグインはブロックエディター上で動作するよ。

ブロックエディターを起動してね。

ツールバーの操作

ブロックエディターで文字の上にカーソルを移動すると表示されるツールバーの『 』をクリックしてね。クリックするとドロップダウンメニューが表示されるよ。

その中に『太字(b)』と『太字(span)』があるから、どちらかを押すと文字が太字になるよ。

表示位置の切り替え

ボタンの表示位置を、ドロップダウンメニューから、ツールバー内に変更することも可能だよ。

右端の『︙』をクリックするとメニューが表示されるから、その中の『太字(span)設定』をクリックしてね。

表示位置を選択するプラグインメニューが表示されるから、変更してね。

最後に

ここでは、管理人のエナリが作成した『WordPressブロックエディター用SPAN太文字装飾プラグイン』を紹介しました。

このプラグインを利用すると、spanタグまたはbタグでの太文字表示が可能になります。

ぜひご利用ください。