wordpressに「文字サイズ」と「絵文字」編集機能を追加プラグインを設定する

wordpressに「文字サイズ」と「絵文字」編集機能を追加プラグインを設定する

ブログをポップでカラフルにして盛り上げたいとき、Wordpressの基本機能では文字の大きさや文字の背景色、絵文字などの設定がなく、機能的に物足りない感じがしている方に、プラグインで必要な編集機能を追加する方法を説明します。

企業サイトや説明を目的としたサイトなどは、見出しの大きさや印象を超える表現だと見にくくなってしまうこともありますので、注意してください。

エディタプラグイン

WordPressにはエディタの機能を拡張してくれるプラグインがネット上に複数用意されています。
その中でもオススメの2つのプラグインを紹介します。

WP Edit

もとは「Ultimate TinyMCE」というプラグインでしたが、Wordpressのバージョン3.9以降からは『WP Edit』を使用するよう推奨されています。
次に紹介する「TinyMCE Advanced」よりも細かい設定ができますが、その詳細設定をしなくても基本的な機能を追加して使用することができるので、むしろ設定が楽なような気がします。

TinyMCE Advanced

機能的には「WP Edit」とほとんど差はありません。むしろ『TinyMCE Advanced』推しのサイトなどの方が多いと思いますし、私もWordpressの管理・調整面で言えば『TinyMCE Advanced』の方が良いように感じます。
ただこのサイトでは、あくまで習得すべき知識や手間を可能な限り省いてサイトを構築・運営できるようにすることを目的にしていますので、そういった点から『WP Edit』推しにしています(最低限の機能追加に留める)。

WP Editのインストール

Wordpressプラグインの新規追加メニューWordPressの左側メニューの「プラグイン」から「新規追加」を選択します。

WP Editインストール検索欄に『WP Edit』と入力すれば、候補の中に下記の表示がありますので、その枠内右上の「インストール」をクリックします。
矢印がグルグル回って、「有効化」の表示に変わったらインストール完了です。
そのまま『有効化』をクリックしてプラグインを稼働させます。

WP Editの設定

WP Editメニュープラグインが有効になったら、管理画面左側メニューの下の方に『WP Edit』の表示が追加されているはずです。
『WP Edit』メニューをクリックして、WP Editでの機能追加編集画面を表示します。

WP Editの編集機能追加編集画面上部(Button Rows)は、既存の編集機能アイコンの配置です。
機能の追加は、その下の(Button Container)より必要な機能のアイコンをドラッグして(Button Rows)内の任意の位置に配置して、『WP Edit Buttons』欄下部にある「Save Buttons」ボタンクリックで完了することができます。

オススメの追加機能

文字サイズ(Font Sizes)

文字サイズ編集アイコン文字の大きさを調整する機能です。ここぞという文字に対して文字サイズと太字、色変更を併せて行えばインパクト大!

文字サイズリスト表示文字サイズは“ポイント(pt)”単位での編集になります。

文字の背景色

文字の背景色アイコンテーマによっては“マーカー”などの機能によって、文字の背景の一部に特定の色を設定することができますが、その機能が無い場合はこの『文字の背景色』設定を追加すると、キーワードや文の一部を強調させることができます。

色の設定方法は、『テキスト色』設定と同じになります。

アンカー

アンカー設定アイコンページ内でのボタン移動を設定したい場合は、リンク設定で移動させてブラウザの先頭に表示させる箇所を指定する必要があります。
『アンカー』は、その異動先となる場所として設定することができます。「アンカー」を設定したら、クリックして移動を発動させたい場所に設定したアンカーをリンク先として設定することで、ページ内移動をさせることができます。

アンカーリンクの設定方法アンカーの名前はできれば英数半角で設定することをオススメします。
アンカーを設定した場所へのリンク設定は、同じページ内であれば『#アンカー名』をリンク先に設定すればアンカーポイントに移動できるようになります。
別ページのアンカーポイントへの移動は、異動先ページのアドレスの後ろに『#アンカー名』をリンク先として設定すれば、別ページのアンカーポイントへジャンプさせることができます。
【例:(example.htmlページ内の「anchor」という名で設定されたアンカーポイントへのリンク設定は)https://sample.com/example.html#anchor】

顔文字

顔文字機能アイコン個人的なブログなどで感情を表現するツールとして既に一般化している機能ですが、Wordpressの初期設定では用意されていません。

ただし、顔文字は16種類しか用意されていませんので、物足りなさを感じます。