• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / AddQuickTagの使い方実践編「第2回:マーカー」

AddQuickTagの使い方実践編「第2回:マーカー」

最終更新日:2021年10月6日

この記事では、WordPressプラグインのAddQuickTagでマーカー風の下線を引く方法を解説します。

「まだAddQuickTagをインストールしていない方」や「AddQuickTagってなに?という方」は、AddQuickTagの設定方法と使い方の記事を読んでみてください。インストール方法や基本的な使い方について説明しています。

AddQuickTagの設定方法と使い方

目次 非表示
1 マーカー風の下線はどうやって引くの?
2 マーカー用のCSSクラスを作成する
3 AddQuickTagにマーカー用のタグを設定する
4 エディターでマーカー風の下線を引いてみよう

マーカー風の下線はどうやって引くの?

マーカー風の下線を引く手順は次の通りです。

  1. マーカー用のCSSクラスを作成する
  2. エディターでマーカー風の下線を引きたい文字列をspanタグで囲む
  3. spanタグにマーカー用のCSSクラスを設定する

Web上での実際の表示とエディターでのHTMLは次のようになります。

Web表示(例)
オレンジマーカー
<span class="marker-primary">オレンジマーカー</span>

AddQuickTagを使えば、「❷文字列をspanタグで囲む」のと「❸spanタグへのCSSクラスの設定」を1クリックで行ってくれます。手入力するのに比べて何倍も早く作業が行えます。

またCSSクラスの設定内容によって、色や幅さまざまなマーカー風の下線を引くことが可能です。

Web表示(例)
マーカー(赤) マーカー(青) マーカー(橙) マーカー(灰)

マーカー用のCSSクラスを作成する

まず、マーカーに使用するCSSクラスを作成します。今回紹介するのはオレンジ色のマーカーです。

次のコードをテーマのスタイルシートに追加してください。

.marker-primary {
	background: linear-gradient(transparent 60%, #ffddaa 0);
}

スタイルシートの編集方法がわからない方は、WordPressでCSSを編集する方法の記事を参考にしてください。

WordPressでCSSを編集する方法

AddQuickTagにマーカー用のタグを設定する

AddQuickTagでマーカー用のクイックタグを使用するには、事前に設定が必要です。ここではマーカー用のタグの設定方法について説明します。

注意
事前にAddQuickTagのインストールおよび有効化を行っておいてください。

WordPress管理画面のメニューより設定 ≫ AddQuicktagをクリックし、AddQuickTagの設定画面へ移動します。

AddQuickTagの設定画面へ移動する

設定画面では、次のように1行ずつクイックタグを設定できます。すぐ下にあるクイックタグの設定内容を参考にマーカー用のタグの設定を行ってください。

マーカー用タグの設定

クイックタグの設定内容

ボタン名 開始タグ 終了タグ
マーカー(オレンジ) <span class="marker-primary"> </span>

ボタン名、開始タグ、終了タグを埋めたら、右の欄にあるチェックボックスも忘れずにチェックを入れてください。

上記の項目の設定を終えると次のようになります。

設定完了後の画面

これで準備ができました。それでは、実際にクイックタグを使用してみましょう。

エディターでマーカー風の下線を引いてみよう

AddQuickTagで追加したクイックタグを実際に使う手順を見ていきましょう。今回は、テキストエディターで説明を行います。

まずは投稿編集画面でテキストエディターを開き、設定したクイックタグが追加されていることを確認してください。

クイックタグの追加の確認

そして、マーカーを引きたい文字列を入力します。

マーカーを引きたい文字列を入力する

文字列を選択した状態で、マーカー用のクイックタグボタンをクリックします。

クイックタグボタンをクリックする

そうすると、選択した文字列の前後に設定したタグが挿入されました。

マーカー用のタグが挿入された

これで簡単にマーカー風の下線を引くことができますね。

他にもよく使うタグは、AddQuickTagで設定しておきましょう。

AddQuickTagで登録しておくと便利なタグ

  • 見出し
  • 枠・ボックス
  • ショートコード
  • 吹き出し

カテゴリー:WordPress タグ:AddQuickTag, WordPressプラグイン

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « AddQuickTagの使い方実践編「第1回:見出し」
Next Post: AddQuickTagの使い方実践編「第3回:枠・ボックス」 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.