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

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

こんな感じに・・・

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

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

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

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

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

ショートコードとは?

ワードプレスではショートコードと呼ばれる「タグ」を使うことでカンタンに記事中のテキストに装飾をかけたりサイトのデザインをカスタマイズすることが可能です。

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

蛍光ペン風ショートコード
<span class="marker1">テキスト</span>

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

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

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

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

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

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

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

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

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

AddQuicktagインポートファイル

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

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

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

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

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

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

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

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

CSSにコードを追加

CSSとは?

カスケーディングスタイルシートと言われる定義を使ってウェブサイトのデザインと装飾を行います。HTMLで書いた命令文と構造をCSSでカスタマイズするという関係性です。ようするにウェブサイトの骨格となる構造がHTMLでありこれを女性自身としたらCSSはお洋服やお化粧という存在になるかもしれません。

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

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

/* マーカー強調カスタマイズ */
.marker1 {
background: linear-gradient(transparent 70%, #FFB96D 40%);
}

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

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

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

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

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

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

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

<xmp><span class=”marker1″>テキスト</span></xmp>

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

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

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

タグ無効化変換ツール

おさらいとまとめ

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

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

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

以上です。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


nine − three =

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人




オートバイ事故で脊髄を損傷し下半身不随の身体で50歳という年齢を迎えることができました。 交通事故で車いす人生を送ることになってしまいましたが30年間の中で色々とチャレンジしてきたことをこのブログでお伝えできればと思っています。 主なテーマはつぎのようなカテゴリーです。 ・障害や脊髄損傷に関すること ・オートバイとサイドカーに関すること ・エレキギターに関すること ・柴犬に関すること ・その他 取り留めない内容をお届けするかと思いますが、よろしくお願いいたします。