【カスタマイズ】ワードプレスの記事へ蛍光ペン風にアンダーラインが引きたい？プラグイン「AddQuicktag」を使えば超カンタン！

ワードプレスで記事を作成しているとポイントとなるテキストやフレーズに下線（アンダーライン）を引いて目立たせたいことってありますね。

こんな感じに・・・

ベタっと黄色で強調するのではなくて半透明な感じの蛍光ペンでアンダーラインを引いた見栄えはスッキリして見えてイヤミがありません。

ではこの方法、実はとってもカンタン。

大まかな３つのステップでできちゃいます。

それではお伝えいたしましょう。

ショートコードと言われるタグを使う

今回の蛍光ペン風にアンダーラインを引くために下記のショートコードを使います。

このコードを装飾をかけたいテキストの前後に挟み込めば完了です。

ショートコードの利便性を最大化するプラグイン「AddQuicktag」

ショートコードはワードプレスで記事を作成するうえでとても便利で頻繁に使うものです。

けれどそのたびにいちいちキーボードで打ち込むのもコピーしてくるのも面倒です。

この問題を解決してくれる便利なプラグインが「AddQuicktag」です。

このプラグインをお使いのワードプレスにインストールしてよく使うショートコードをAddQuicktagの設定から入力しておきます。

そうすると記事作成画面上に表示設定しておいたショートコードが投稿編集画面に表示されます。

ショートコードを使いたい場合は記事内のテキストをマウスでドラッグしておいてからコードをクリックするだけなので作業効率の向上にもつながります。

ちなみにstorkを販売しているオープンゲージ公式サイトでは利用頻度の高いショートコードをまとめたデータファイルをダウンロードできますので活用されるのも良いでしょう。

AddQuicktagインポートファイル

AddQuicktagインポートファイルの使い方

上記のリンクからインポートファイルをダウンロードしたファイルはこのままではワードプレスにインストールできません。

まずは窓の杜かvectorでLhaplus（ルーファス）などの無料で利用できる解凍ソフトをダウンロードしインストールします。

vectorで解凍ソフトをダウンロードする。

パソコンへインストールしデスクトップなどにショートカットアイコンをおいておくと便利です。

オープンケージでダウンロードしたAddQuicktagインポートファイルをマウスでクリックしたまま解凍ソフトのアイコンの真上まで持って行きます。

この作業でインポートファイルが解凍完了です。

解凍後のファイルをAddQuicktagの設定画面からインストールして完了です。

CSSにコードを追加

わかりやすいような分かりにくいような説明で申し訳ございませんがようするにCSSという定義でおしゃれにお化粧することができますよとう事はご理解いただけたでしょう。

で、下記のコードをワードプレステーマのなかのCSSスタイルシートという編集画面に入りペーストします。

ワードプレステーマ「stork」のCSS追加方法

上記のCSSコードを追加する方法が有料ワードプレステーマのストークならむちゃくちゃカンタンに実行できます。

ダッシュボードのカスタマイズから追加CSSに入り貼り付けて保存するだけです。

余談｜コードをそのまま表示する方法

この記事の冒頭でショートコードを記載していますがふつーにコードをのっけてしまうとコードの中身が表示されません。

一部の記号を全角に変更するなどに対応すれば可能ですが、閲覧いただいた訪問者さまにご迷惑とご不便をおかけすることになります。

そこでネットユーザーさまに助けを求めた結果下記＜ＸＭＰ＞と＜／ＸＭＰ＞のタグでコードを括ることでコードの中身を記載できる方法が分かりましたので余談にはなりますがご紹介しておきます。

さらにこのタグを無効化してくれるサイトさまを発見しましたので紹介します。

ボックスに画面上にタグを反応させずに表記したいタグをコピペで放り込み「タグ無効化」ボタンをクリックすれば下のボックスに無効化されたタグが表示されます。

あとはこの無効化タグをご自身のウェブサイトへ搭載すればオッケーです。

タグ無効化変換ツール

おさらいとまとめ

記事に蛍光ペン風にアンダーラインを引く方法

• ショートコード<span class="marker1">テキスト</span>を活用する。
• プラグイン「AddQuicktag」をインストールする。

　　　　

• CSSコードをCSSスタイルシートに追加する

以上です。

ご参考になさってください。