【効率化】WordPress記事の装飾プラグイン「AddQuicktag」の設定方法と使い方:タグ例付き

記事の装飾がしたい人

「ワードプレスを使って記事を書いているけど、装飾が面倒。。。もっと効率的に行えるプラグインはないのかな」

こういった方向けの内容です。

結論ですが、テキストの効率的な装飾をするには「AddQuicktag」というプラグインを導入することで解決します。

このプラグインはあらかじめ装飾を登録しておくことで、デザイン選択形式でサクサク装飾していくことが可能です。

この記事ではそんな便利プラグイン「AddQuicktag」の設定方法や使い方について解説していきます。最後に具体的な装飾例をあげておきますので、ぜひ参考にしてください。



AddQuicktagはこんな装飾ができるイメージです

AddQuicktagは冒頭でもお伝えしたように、記事中のテキストに対して簡単に装飾ができるプラグインです。

「こんな感じで、テキストを装飾できます。」

上記が実際に装飾したテキストですが、このように文字を囲むだけでもグッと見やすくなりますよね。

かなり使えるプラグインではありますが、使える範囲には制限があったりしまして、、、実際に使える範囲が以下の感じです。

  • 投稿・固定ページのビジュアルエディター
  • 投稿・固定ページのテキストモード
  • メディア編集ページ
  • 管理画面でのコメント返信・編集
  • ウィジェット

少しわかりにくいかもですが、基本的に記事にはしっかり装飾できると覚えておけばOK。

ちなみにですが、メディアに関しては添付ファイルのページのみとなっていますし、ウィジェットに関しては別のプラグイン(WP Editor Widget)が必要となったりするので、ココに使うのはあまりオススメできません。

とはいえ、記事内で使う分は効率面でかなり効果ありなので、使ってみたい人は早速インストールへ進みましょう。

AddQuicktagのインストール方法

AddQuicktagのプラグインはワードプレスから探すことができるので、インストールも超簡単です。

具体的な流れとしては、以下の3ステップを進めていくだけでOK。

  • STEP.1
    プラグインを検索

    ワードプレスの管理画面から、「プラグイン」→「新規追加」を選択し、「AddQuicktag」を検索します。

  • STEP.2
    インストール

    検索した「AddQuicktag」をインストールします。

  • STEP.3
    有効化する

    インストールしたAddQuicktagを有効化しておきましょう。

これで使用できる状態になりました。

あとは設定を行うだけで、効率的にテキストを装飾することができるようになります。

AddQuicktagの設定方法

ワードプレスの管理画面から「設定」→「AddQuicktag」をクリックして、設定を行なっていきます。

ここでやるべき作業は以下2つだけ。

  • タグの追加→場所:AddQuicktag内
  • CSSの追記→場所:テーマエディター内

それぞれについて順に解説していきます。

作業①:タグの追加(AddQuicktag内)

まずはタグの作成(追加)ですね。

設定を開くと以下のような画面が表示されていると思います。

この中でも、以下の4つの項目だけを入力しておけばOK。

  • ボタン名:ボックス(グレー)
  • 開始タグ:<div class=”quick_box1″>
  • 終了タグ:</div>
  • チェックマーク:全てにチェック

せっかくなので、試しに上記のように入力をしてみてください。

入力が完了できたら「変更を保存」をクリック・・・これだけでエディターに「ボックス(グレー)」という装飾が追加されました。

ここまできたら、デザインを指定するCSSを追記してあげるだけです。

作業②:CSSの追記(テーマエディター内)

実際に入力したタグの装飾を行います。

この記事の例であれば、ボックス(グレー)の「quick_box1」というコードに対して、装飾用のCSSを追記する感じです。

下記の手順で行なっていきましょう。

  • STEP.1
    CSSのカスタマイズへ移動

    ワードプレスの管理画面から「テーマ編集」を選択し、「スタイルシート(style.css)」をクリックします。

  • STEP.2
    スタイルシートにコードを追記

    スタイルシートの最下部に装飾したいコードを追記します。

    ※今回の例であれば下記のようになります。

    .quick_box1 {
    margin: 2em 0;
    padding: 1.5em;
    border: solid 1px #f2f2f2;
    background: #fafafa;
    color: #2c2c2f;
    }

  • STEP.3
    更新する

    コードの追記ができたら更新ボタンをクリックします。

以上で設定は完了です。

実際にデザインが動作するか、実際に記事を作成しつつ使っていきましょう。

AddQuicktagの使い方

ここからは、先ほど設定したタグを実際に使用していきます。

今回は最も使用頻度の高い「投稿のビジュアルエディター」を例に解説していきます。

  • STEP.1
    投稿画面へ

    実際に記事を書く場所へ移動します。

    ここでは「投稿」を使用するので、管理画面から「投稿」→「新規投稿」です。

  • STEP.2
    装飾したいテキストを選択

    入力したテキストの中で、装飾したいテキストを選択します。

    ここは単純にテキストをドラッグする感じです。

  • STEP.3
    装飾

    テキストを選択した状態で「Quicktags」→「作成したタグ」を選択することで、テキストに装飾できます。

    ※「作成したタグ」の部分は、今回実際に設定した「ボックス(グレー)」という名称となってるハズです。

たったこれだけでテキストの装飾は完了。

エディター内での変化はないですが、プレビューとかで確認すると装飾をされているのが分かります。

こんな感じで、タグを登録さえしておけばサクッと使えるので超便利ですね。

とはいえ、「デザインが1つだけでは少し厳しいよ」という方もいらっしゃると思いますので、ここからデザインサンプルを少しだけ紹介していきます。

装飾タグの具体例を紹介します

ここまでの内容で「AddQuicktag」の使い方は問題ないと思いますが、初心者だとタグのデザイン(CSS)を作るのが難しいのが現実。

というわけで、ここから3つほど具体的な装飾タグの例を紹介しておきます。

例①:ボックス(破線)

1つめは点線のボックスで、具体的な例が以下のとおりです。

これが破線ボックスの例です。

タグの追加

ボタン名 ボックス(破線)
開始タグ <div class=”quick_box2″>
終了タグ </div>
チェック 全てにチェック

CSSの追記

.quick_box2 {
margin: 2em 0;
padding: 1.5em 1em;
border: dashed 1px #516ab6;
background: #f2f4ff;
}

例②:ボックス(囲い枠)

2つめは囲い枠のボックスで、具体的な例が以下のとおりです。

これが囲い枠のボックスの例です。

タグの追加

ボタン名 ボックス(囲い枠)
開始タグ <div class=”quick_box3″>
終了タグ </div>
チェック 全てにチェック

CSSの追記

.quick_box3 {
margin: 2em 0;
padding: 1.5em 1em;
border: solid 1px #d1d1d1;
border-radius: 5px;
background: #fcfcfc;
}

例③:ラベル

3つめはラベルで、具体的な例が以下のとおりです。

これがラベルの例です

タグの追加

ボタン名 ラベル(黒)
開始タグ <div class=”quick_label”>
終了タグ </div>
チェック 全てにチェック

CSSの追記

.quick_ label {
display: inline-block;
margin-right: 5px;
padding: 8px 5px 5px 5px;
color: #fff;
background-color: #cfaf41;
font-size: 0.8em;
font-weight: bold;
line-height: 1;
}

これだけでもある程度、テキストの装飾に関しては充実するかと思います。

AddQuicktagは記事作成の効率化を考えると絶対的に必要なものとなるので、ぜひ参考に使ってみてください。

というわけで、今回の内容は以上となります。

オススメ【収益化】おすすめのアフィリエイトASP5選【すべて登録でOK】

オススメ【初心者向け】WordPress学習におすすめしたい3冊の本

コメントを残す

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

CAPTCHA