コピペで簡単！WordPressで文章にマーカーを引く方法 | アルバトロス・ストーク・ハミングバード・スワロー

WordPressで文章に蛍光ペンのようなマーカーを引く方法を解説します。

ブロガーに人気のWordPressテーマ「OPENCAGE」の「アルバトス」を対象に解説します。

なお、同社の販売しているテーマ「ストーク」「ハミングバード」「スワロー」でも手順は同様です。

やり方は色々とあるのですが、今回はHTMLやCSSが苦手という方でもコピペだけで簡単にできる方法を紹介します。

WordPressで文章にマーカーを引く方法

完成形

▽

強調したい部分にマーカーを引くことで文章が読みやすくなります。
ちょっとしたカスタマイズで簡単に設定できます。

WordPressで文章にマーカーを引く方法

WordPressで文章にマーカーを引く方法の流れは次のとおり。

1. カスタマイズメニューにアクセス
2. CSS設定に追記
3. 強調したい部分をタグで囲む

カスタマイズメニューにアクセス

WordPressにログインした状態で自分のサイトにアクセスし上部のメニューバー「カスタマイズ」を選択します。

CSS設定に追記

「追加CSS」に以下を書き込み、「公開」をクリックします。

/*マーカー*/

.line {
  background: linear-gradient(transparent 60%, #ffff72 0%);
}

強調したい部分をタグで囲む

WordPressの記事投稿の「テキスト」で次のように強調したい部分をタグで囲みます。

<span class="line-yellow">マーカーで強調したい文章</span>

WordPressプラグイン「AddQuickTag」でタグ挿入が便利に

その都度、マーカーを引きたい部分に「手打ち」や「メモ帳等からコピペ」するのは不便です。

WordPressプラグイン「AddQuickTag」を使うとタグ挿入が便利で簡単になります。
設定が完了したら、次の手順でマーカーを引くことができます。

1. 強調したい部分を範囲選択
   
2. 「AddQuickTag」のメニューから「マーカー（黄色）」を選択
   

というだけで簡単にマーカー強調ができます。

AddQuickTagのインストール

AddQuickTagのインストール方法は次の記事で解説しています。

詳細記事：WordPressでタグを簡単に挿入 AddQuicktag の使い方

マーカーの設定

WordPress左メニューの「設定」>「AddQuicktag」を選択します。

次のように設定し、「変更を保存」をクリックします。

設定し、「変更を保存」

関連記事

• WordPressでタグを簡単に挿入 AddQuicktag の使い方