TentenのBlogに来て下さり、ありがとうございます!こちらのBlogでは、主に副業での収入アップ術や実体験に基づく投資の実績、フリーランスの生き方などについて発信しております^ ^

AddQuicktagの使い方と設定方法について〜ブログ運営には必須のプラグイン〜

こんにちは、テンテンです。

 

先日、こんなご相談を受けました。

 

ブログ初心者

WordPressでブログ運営をはじめたんだけど、ブログ記事のデザインの付け方がわからない….

 

今回はそんな方の為にWordPressで必須プラグインの一つといっても過言でない、AddQuicktagの設定方法と使い方について解説します。

 

ブログ運営初心者の方でも簡単にわかるように画像付きで解説させていただきます。

 

AddQuicktagをインストールしよう

 

すでにプラグインをインストールする方法をご存知の方は、読み飛ばしていただいて問題ございません。

 

①WordPressの管理画面から「プラグイン」→「新規追加」に進みます

 

 

②右上の赤枠の箇所に「AddQuicktag」と入力して、「今すぐインストール」を行い、「有効化」します。

※画像では「有効」となっておりますが、当ブログではすでにインストール済みな為です。

 

これでインストールは完了です。簡単ですよね!

 

AddQuicktagの初期設定と使い方について

 

まずAddQuicktagの初期設定についてですが、特別な初期設定は必要ありませんので、使い方について解説をしていきます。

 

使い方を解説する前に、使いたいタグを探しましょう。

 

例として、囲み枠でおしゃれなデザインを探したいとします。その場合、Googleで「囲み枠 CSS」で検索してみます。

 

 

こんな感じで、たくさん引っかかってくると思います。

 

これらのサイトは、ブログ運営初心者の方でも簡単にブログデザインができるように、サンプルコードなどを載せています。

 

HTMLやCSSについての知識がない方は、こういったところから使わせてもらった方が良いです。
※もちろん無料で使えますよ!

 

個人的にオススメなのが、サルワカです。HTMLやCSSについても初心者の方でもわかりやすく学ぶことができるサWebサイトです

 

基本的には、ここじゃないとダメということはないので、自分の好みにあったモノをお探しください。

 

早速、AddQuicktagの使い方の解説に入ります。

 

AddQuicktagの使い方について

 

①「設定」→「AddQuicktag」に進みます。

 

 

②主な入力箇所は4つ(ボタンのラベル、開始タグ、終了タグ、一番右の四角い枠)

 

 

・ボタンのラベル→任意(わかりやすいタグの名前をつけておきましょう。)

・開始タグ→HTMLの開始タグ

・終了タグ→HTMLの終了タグ

・一番右の四角い枠にチェックを入れる

 

基本的にこの4項目の入力だけで問題ないです。
※アクセスキーの下に順番とあるが、これはタグの順番です。特に気にしない人は入力しなくても良いです。その場合、保存をすると自動で0になります。

 

早速、聞きなれない言葉、(HTMLの開始タグとHTMLの終了タグ)が出てきましたね。わかりやすく解説していくのでご安心ください!

 

HTMLの開始タグと終了タグはどこ!?

 

【HTMLの例】

<div class=”box1″>テキスト</div>

 

仮に上記のHTMLコードがあるとします。この場合、悩むのが、どこがHTMLの開始タグで終了タグなのかよくわからない点です。

 

【HTMLの開始タグはここまで!】

<div class=”box1″>

【HTMLの終了タグはここ!】

</div>

※「テキスト」という文字列は入力しません。

※HTMLは基本的に<></>このような構造です。

 

この知識を理解したら、AddQuicktagの設定画面に戻りましょう。

 

下記の画像のように、ボタンのラベル、HTMLの開始タグ、終了タグを入力して、最後にチェックを入れます。

 

 

これでAddQuicktagの設定は完了です。

 

次はCSSのコードを入力していく必要があります。

 

CSSのコードを入力しよう!

 

次にCSSのコードを入力していく必要があります。

 

少しわかりくい表現になるかもしれませんが、HTMLというのはあくまでも骨組みです。実際のデザインはCSSが担当します。

 

つまり、現在のここまでの設定は、AddQuicktagにHTMLコードを入力しただけなので、デザインまでは反映しません。

 

早速、CSSのコードを入れていきましょう!

 

ここではブログ初心者の方でもわかりやすいように、「追加CSS」にコードを入力する方法をご紹介します。

 

①「外観」→「カスタマイズ」に進みます。

 

 

②「追加CSS」に進みます。

 

 

 

③画像のようにCSSのコードをコピー&ペーストします。

 

 

最後に保存して完了です。

 

では、早速試してみましょう!!

 

①WordPressの管理画面で適当な記事を開き、赤枠で囲っているQuicktagをクリックします。

 

 

Quicktagをクリックすると、自分が登録したタグの情報が一覧で表示されます。

 

最後に、デザインをしたい文字を指定して、登録したタグを選択するだけです。

 

③プレビューで確認しよう!

 

 

④完成

 

 

今回は黄色のアンダーバーで登録したので、このような表示になっています。

 

以上でAddQuicktagの使い方の解説は以上です。

 

最後まで読んでいただき、ありがとうございました。

最新情報をチェックしよう!
>Tenten Blog

Tenten Blog