プラグイン

【プラグイン】AddQuicktagの設定方法を解説!使いやすいコードも紹介

コンテンツ制作をしていると、

「ここを目立たせたい!」

「ここは囲んだら見やすくなるなぁ」

と装飾したくなるものです。

実際、あなたも白背景に黒文字だけの文章だと、重要なポイントが分かりづらかったり見やすさに欠けたりして、読む気が起こらなくなるではないでしょうか?

そういったときに使うのがHTMLというマークアップ言語。

プログラムに対してコードを書くことでウェブページへの装飾ができます。

でも、コードを覚えるのも毎回書き込むのもちょっと面倒…

そこで、ワンクリックでカンタンにHTMLが書けるようショートコード化してくれるのが「AddQuicktag」というプラグインです。

今回は、作業効率もアップし、コンテンツをより魅力的にできる「AddQuicktag」の設定や使い方を解説していきます。

装飾として使いやすいコードも紹介するので、ぜひ活用してくださいね。

関連記事:HTMLの基礎を分かりやすく解説!WordPressの標準コードまとめ

AddQuicktagでできること

カンタンにいうと、AddQuicktagでは「装飾の”お気に入り”登録」ができます。

あらかじめ、ショートコードにHTMLコードを登録しておくことで、使いたいときにワンクリックで呼び出して装飾ができるようになるんです。

コンテンツ作成の時短に大活躍の便利なプラグインですね!

AddQuicktagの設定方法

下準備(インストール)

プラグインの追加は、WordPressダッシュボード「プラグイン」→「新規追加」から行っていきます。

「AddQuicktag」と検索したら、インストールして「有効化」しておいてください。

プラグインが有効化されると、ダッシュボード「設定」に「AddQuicktag」の項目が追加されるので、そちらから設定をしていきましょう。

AddQuicktagにコードを登録する

それでは、HTMLコードをお気に入り登録していきましょう。

画面に入力する内容が書いてあるのでとても分かりやすいですよ。

  1. ボタンのラベル:コードに分かりやすい名前をつける(”赤太文字”など)
  2. 開始タグと終了タグ:HTMLタグを開始・終了に分けて入力する
  3. √:チェックを入れて投稿画面で使えるようにする
  4. 「変更を保存」ボタンをクリック

たとえば、「文字を太く」というコードなら、開始タグは

<strong>

終了タグは

</strong>

です。

このタグの間に書かれた文字が、太文字の装飾を受けることになります。

編集画面をテキストモードで見ると、こんなかんじ。

この時点では上に書いてある文字と太さは変わりません。

でも、プレビューしてみるとちゃんと太文字になっていますよ。

HTMLって面白いですね!!

自分の使いたいコードさえ分かれば何個も登録しておけるので、「これはよく使うな~」というものはぜひ登録しておきましょう。

AddQuicktagの使い方

HTMLコードの登録が終わったら、実際に編集画面で使ってみましょう。

ビジュアルエディタなら「AddQuicktag」というタブが追加されていますし、テキストエディタならそれぞれのコードのボタンが追加されています。

使い方はとってもカンタン!

装飾したい文字をドラッグ選択して

AddQuicktagの使いたいコードを選びます。

(テキストモードならボタンを押します)

これで装飾できあがり!楽ちんすぎます!!

使いやすい・よく使われるコードを紹介

こちらでは、文字の装飾で使いやすいHTMLコードを紹介します。

他にも、色を変えたりしてあなたのサイトカラーに合った装飾をしてみてくださいね!

赤い太字

赤い太字

<span style=”color: #ff0000;”><strong>赤い太字</strong></span>

青い太字

青い太字

<span style=”color: blue;”><strong>青い太字</strong></span>

太字・黃色背景

黄色背景

<span style=”background-color: #ffff00;”><strong>黄色背景</strong></span>

黄色背景・赤太字

黄色背景・赤太字

<span style=”color: #ff0000;”><strong><span style=”background-color: #ffff00;”>黄色背景・赤太字</span></strong></span>

フォントサイズ大

フォントサイズ大(26pxくらい)

<span style=”font-size: x-large;”>フォントサイズ大</span>

フォントサイズ特大

フォントサイズ特大(48pxくらい)

<span style=”font-size: 300%;”>フォントサイズ特大</span>

まとめ

今回は、文字の装飾や構成をワンクリックでできちゃう便利なプラグイン「AddQuicktag」の導入方法を解説しました。

テンプレートによっては、ボックスのショートコードや独自の装飾コードなんかもありますので、ぜひAddQuicktagに登録して使ってみましょう。

作業時間を短縮して、コンテンツをよりいいものにしていきましょうね!

今でこそ家族も自分も好きなことも大切にできるあたしですが

昔は

  • 人見知りしないのにコミュ障な子ども時代
  • 先のことなんか考えないてきとーな学生ライフ
  • 子どもを産めないかもしれない危機に直面
  • 器用貧乏がたたって仕事が増え続ける会社員
  • うつ病で療養したら会社に居場所がなくなった
 

と、まぁ割とすったもんだありました。

でも、「しょうがない」とか「こんなもんだろ」とか諦めなくても

選択肢は自分で作り出せるし、気持ちに素直に生きられるんです。

「でも、どうやって?」

ということをLINEの無料メルマガ講座でお伝えしているので、

まずは”知る”を始めてもらえたら嬉しいです。

  • 今すぐ、誰でもできる即効マネタイズ術
  • 月収10万円達成までのポイントと考え方
 

などの限定特典もプレゼントしているので、ぜひゲットしてみてくださいね♫

>>メルマガ講座@LINEへの登録はこちらから