ボタン一発

 

こんにちは。ささえみです。

 

今回は、WordPressでの文字装飾がボタン一発でできるようになるプラグイン「AddQuicktag」の使い方を解説します。

 

ただ文字が並ぶだけのブログは見た目がショボいし閲覧ユーザーも飽きてしまう・・・。重要な部分は囲みで強調したり、色を変えたりしたいんだよね!

 

しかも、簡単に。

 

「簡単に」というのは、とっても重要ですよね。

文字の装飾には、通常htmlやcssといったWeb言語を駆使していくのですが、専門家でもない限りいきなりそれを使いこなすのは厳しい!!

 

そんな時に重宝するのが「AddQuicktag」なのです。

 

最初にちょっとした設定をしておくだけで、日々のブログ作成で文字の装飾がサクサクできちゃいますよ!

 

 

それでは、そんな便利な「AddQuicktag」の使い方を説明していきます。

 

 

プラグインAddQuicktagをインストールしよう!

 

まずは何はともあれ、AddQuicktagをインストールしてあなたのブログに実装するところから始まります。

WordPressダッシュボードのメニューバーから、「プラグイン」→「新規追加」をクリックして、プラグインのリスト画面に移ります。

 

プラグイン新規追加

 

 

検索窓に「AddQuicktag」と入力。該当するものの「今すぐインストール」をクリックしてインストールしましょう。
※画像では「有効」と表示されていますが、これはすでにインストール済みの為です。インストール前は「今すぐインストール」というボタンが表示されます。

 

AddQuicktagインストール

 

 

インストールができたら「有効化」も忘れずに。(案内メッセージが自動で出ます)

 

さて、これで準備は整いました!

 

 

AddQuicktagに文字装飾用コードを登録してみよう!

 

それでは、AddQuicktagに装飾で使うコードを登録してみます。

今回は例として、下のような黒線の角が丸い枠を登録してみますね。

 

この枠です。

 

装飾コードはこれ↓

<div style=”padding: 20px; border: solid 2px #0D0C0C; border-radius: 10px; background-color: #FFFFFF; margin-top: 30px; margin-bottom: 30px;”> ■ここに文章が入る■</div>

 

※装飾コードは「文字を囲む html」などで検索するとWeb上でたくさん発見できます。

 

 

まず、インストール済みプラグインのリストから、AddQuicktagの「設定」をクリックします。

 

AddQuicktag使い方1

 

 

画面が変わり、いくつか入力ボックスが出てきました。
ここで使うのは、「ボタン名」「開始タグ」「終了タグ」の3つです。

 

AddQuicktag使い方2

 

AddQuicktag使い方3

 

 

ボタン名には、あなたの分かりやすい名前を入力します。これは、設定後に記事編集画面上に表示されます。「開始タグ」には、上記コードの前半部分(■ここに文章が入る■より前)を入力、「終了タグ」には、上記コードの後半部分(</div>)を入力します。

 

AddQuicktag使い方4

 

 

ここまで来たら、チェックボックスの一番右をクリック。画像のように全てにチェックが入ったことを確認したら、「変更を保存」ボタンをクリックしましょう。

 

AddQuicktag使い方5

 

 

これで1つの装飾コードが登録できました。

実際に記事投稿画面を確認してみます。

 

AddQuicktag使い方6

 

AddQuicktag使い方7

 

ビジュアルエディタでは、ドロップダウンで選べるように、テキストエディタではボタンで表示されるようになりました!

 

 

AddQuicktagを使って実際に文字を装飾してみよう!

 

登録したコードを実際の記事編集の時にどう使うか?を説明します。

 

 

ビジュアルエディタの場合

 

記事内で装飾したい部分をドラッグして選択し、ドロップダウンで出てくる候補から選んでクリック!

 

AddQuicktag使い方7

 

AddQuicktag使い方8

 

 

テキストエディタの場合

 

記事内で装飾したい部分をドラッグして選択し、上部のボタンをクリック!

 

AddQuicktag使い方9

 

AddQuicktag使い方10

 

 

ビジュアルエディタ・テキストエディタともに、記事のプレビューも確認してみてくださいね。

 

AddQuicktag使い方11

 

 

これで指定した通りの装飾がされていればOKです!

 

※CSSが扱える方なら、WordPressのテンプレートのカスタムCSSに独自のコードを書き込み、それをAddQuicktagで呼び出すこともできます。その際、装飾が反映されているかどうかはビジュアルエディタでは確認できません。テキストエディタを使うか、記事のプレビュー画面にて確認してみてください。

 

AddQuicktag使い方12

 

AddQuicktag使い方12

 

 

アドセンス広告の表示にも使える!

 

AddQuicktagにアドセンス広告のコードを入力しておくと、ボタン一発で記事内に挿入することができます。

 

AddQuicktag使い方13

 

今までコードをコピペして貼っていた労力と時間が節約できますね!

 

 

アドセンス広告の登録は、「ボタン名」に”アドセンス”などの分かりやすい名前を、「開始タグ」のところにアドセンスコードを入力して保存すればOKです。「終了タグ」は空白で構いません。

 

AddQuicktag使い方14

 

こんな風に、普段よく使うコードをどんどん登録しておけば、記事の装飾が抜群にはかどりますね!

 

 

まとめ

 

文章がだらだらと続く見た目のブログは読みにくく、閲覧ユーザーが飽きてしまいます。

スラスラ読めるブログには、文字の装飾は必須!

プラグインAddQuicktagを使って、手間のかかる装飾をボタン一つで終わらせ、サクサクブログ更新ができるエディタ(編集画面)を作ってみてください。

 

 

<補足>

 

文字装飾には、TinyMCE Advancedというプラグインもとても便利です。詳しい設定方法はこちら↓

>>こりゃ便利!WordPressを立ち上げたらまず実装すべきプラグイン10選
(記事内の「TinyMCE Advancedの設定方法」を参考に)