【ワードプレス】アンダーラインマーカー(蛍光ペン)の付け方 | TinyMCE Advancedで簡単に!

この記事はこんな方向けの内容です。
  • ワードプレスの文章にアンダーラインマーカー(蛍光ペン)を付けたい人
  • プログラムとか難しいことは避けたい人

ワードプレスでブログを運営している管理人です。

実際にブログを運営するうえで、困ったことや悩んだことがたくさん出てくると思います。

それらの課題について、これまでに解決できたことをまとめています。

ブログを始めた当初、他の人気があるブログを見てみると、文章が装飾されているケースが多いことに気づきました。

特に、訴求したい文章に「蛍光ペンのようなアンダーラインマーカー」を付けていました。

そして、思います。
自分も「蛍光ペンのようなアンダーラインマーカーを簡単に付けれるようにしたい!」と。

そこで、Google先生を頼りにいろいろ調べていくと、あるプラグインをインストールすることで簡単に対応できることが分かりました

それは、「TinyMCE Advanced」です。

このページでは、「TinyMCE Advanced」のインストール方法から、
蛍光ペンのようなアンダーラインマーカーをつけるところまで、詳しく説明していきます。

こんな風に出来上がります。

■元の文章
ワードプレスでアンダーラインマーカー

■青色
ワードプレスでアンダーラインマーカー

■赤色
ワードプレスでアンダーラインマーカー

■黄色
ワードプレスでアンダーラインマーカー

いろんな色で蛍光ペンのようなアンダーラインマーカーを付けることが出来ますね。

ワードプレスに「TinyMCE Advanced」をインストールしよう。

まずはワードプレスに「TinyMCE Advanced」をインストールしていきましょう。

ワードプレスのメニューで「プラグイン」→「新規追加」を選択します。

右上に検索欄があるので「TinyMCE Advanced」を検索します。

「TinyMCE Advanced」が表示されるので「今すぐインストール」をクリックします。

ワードプレスメニューの「プラグイン」を再度開くと、「TinyMCE Advanced」がインストールされているので、「有効化」をクリックします。

これで「TinyMCE Advanced」のインストールは完了です!

「TinyMCE Advanced」の設定 ← これも簡単です。

有効化したら、「設定」を開きます。

エディター設定画面で「ブロックエディター(TinyMCE)」シートを選びます。

そのまま下にスクロールすると下記のような設定が出てきます。
「スタイル」をドラッグ&ドロップでメニュー部分に入れます。

今回は「蛍光ペンのようなアンダーラインマーカー」を付けることに主眼をおいていますので「スタイル」のみを対象としていますが、その他のメニューも使い勝手良いので、適宜メニューバーに追加してみましょう。

こんな感じで「スタイル」が入りました。

下段に「変更を保存」がありますので、忘れずに保存しましょう。

ワードプレスで「蛍光ペンのようなアンダーラインマーカー」の付け方

それでは準備が完了したので、実際に蛍光ペンのようなアンダーラインマーカーを付ける手順を説明します。

まず記事作成画面において、左上の+マークから「ブロックの追加」で「クラシック版の段落」を追加します。

文字を入力した後、マウスで文字を選択した状態にしておきます。

メニューバーに先程追加した「スタイル」がありますので、「スタイル」をクリックし、「マーカー」→「青色アンダーラインマーカー」を選択します。

はい、これで完成です!
こんな感じで出来ました。

ここでは「青色」を選択しましたが、赤と黄色も選択できます。

まとめ

ワードプレスでブログを作っていく場合、「蛍光ペンのようなアンダーラインマーカー」を上手に利用することで、見栄えのよい文章が出来上がります。

今回の手順で簡単に「蛍光ペンのようなアンダーラインマーカー」を付けることが出来るので、是非実践してみてください。

コメント

  1. […] 【ワードプレス】アンダーラインマーカー(蛍光ペン)の付け方 | TinyMCE Ad… […]

  2. […] 【ワードプレス】アンダーラインマーカー(蛍光ペン)の付け方 | TinyMCE Ad… […]