ブログ

「AddQuicktag」使い方簡単解説!!【16枚の写真付】きれいな記事を書きたい方必見、オリジナル装飾を一発で出す方法

プラグイン AddQuicktag

ブログ初心者
ワードプレスの有料テーマを購入したけど、自分のブログカラーと合わない装飾があるから使いにくい…有名なブロガーさんが使っている装飾を使いたい!

 

こんなお悩みに答えます

 

しゅんまる
こんにちは、しゅんまるです

 

ワードプレスの有料テーマを購入すると、記事中の装飾に関する悩みはほぼなくなると思います。

 

でも中には、「装飾の色」や「装飾の形やサイズ」がちょっと気に食わないといったことが出てきますよね。

 

装飾するには、イチからCSSやHTMLを調べて貼り付けないといけない。
それはめちゃくちゃめんどくさい。

 

ここでちょっと思いました

 

しゅんまる
ボタンを押したら自分の登録した装飾が貼り付けられるみたいなことってできないのかな?

 

あります

それは「AddQuicktag」というプラグインです。

 

「AddQuicktag」を使うメリット

・装飾がボタン一つで出せるようになる

・めんどうなコードを書かなくてよくなる

 

今回は

・AddQuickを登録
・HTMLコードを登録

これらのやり方を簡単解説します。

 

こんな方におすすめ

  • 装飾をもっとこだわりたい
  • テーマの中で使える装飾がイマイチ…
  • いちいちコードを貼り付けるのがめんどくさい

 

こんな人に向けて書いていきます。

それではさっそくいきましょう。

 

AddQuicktagでできること

装飾例

 

こんな囲み枠や

 

こんなオシャレな囲み枠までボタンひとつでできるようになります

 

AddQuicktagをインストールする

では、まず装飾をボタン一発で可能にする「AddQuicktag」をインストールしましょう。

 

さっそくですが、注意です

現在、AddQuicktagの最新Ver.である「2.6.0」は現在のワードプレスのVer.と相性が悪いらしく、反映されません

なので今回は「2.5.3」という、ひとつ前のVer.をインストールするやり方を説明します。

最新Ver.

 

インストールのステップ

 

step
1
ダッシュボードから検索

step
2
AddQuicktagよりVer.を選択してダウンロードする

step
3
ファイルを参照する

step
4
ファイルをアップロードする

step
5
インストールして有効化

 

 

1.ダッシュボードから検索

まず、自分のワードプレスのダッシュボードからプラグイン→新規追加→検索窓に「AddQuicktag」と入力します

2.AddQuicktagよりVer.を選択してダウンロードする

AddQuicktagをクリック→「WordPress.org プラグインページ」 →「詳細を表示」と進みます。(現状は「2.6.0」と表示されています)

下の方にスクロールしていくと、「開発バージョン」と表示されたプルダウンをクリックして「2.5.3」を選択し「ダウンロード」ボタンを押します。

3.ファイルを参照する

ダウンロードされた「.Zip」ファイルを参照してください。ここではどこに保存されたのか確認するだけでOKです。(僕は自動的に「ダウンロード」というファイル内に保存されてました)

4.ファイルをアップロードする

もう一度ワードプレスのダッシュボードに戻り、「プラグイン」→「新規追加」→「ファイルを選択」をクリックします。

そこで先ほど確認したファイルを参照して、「開く」を押してください。

5.インストールして有効化

「アップロード完了」と表示されていたら、OKです。あとは「有効化」をクリックして「停止」に表示が変われば、完了です。

これで「AddQuicktag」をインストールできました

とりあえず、お疲れ様でした。

 

AddQuicktagに装飾コードを登録して使おう!

 

さて、インストールはできましたが「設定」しなければ結局使えないのと同じです。

ここまで解説します

①コードを登録

②実際に使ってみる

 

ゴールイメージ

こんな感じにワードプレスの記事作成画面上にプルダウンが表示されれば、OKです。

①AddQuicktagにコードを登録しよう!

手順は以下の通りです。

 

コード登録のステップ

 

step
0
「CSSコードを追加」する

step
1
AddQuicktagを選択

step
2
「HTMLコード」登録

 

0.「CSSコードを追加」する

まず、装飾するにはCSSコードを追加する必要があります。装飾したいコードをサイトから探します。

「装飾 CSS」と検索するとすぐヒットします

 

僕はこちらのサイトを参考にしました

→【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30「サルワカ」

 

装飾したい「CSS」と書かれたコードをコピーします。

コピーしたら、ワードプレスの「ダッシュボード」→「外観」→「カスタマイズ」をクリックします。一番下に「追加CSS」という項目があるので、クリックしてください。

 

「追加CSS」というタイトルの下に空欄が表示されるので、そこにコピーしたCSSコードを貼り付けます。

これで準備はOKです。

 

【補足】HTMLとCSSについて

・HTML→文書構造を定義する、骨組み・構造

・CSS →見た目や装飾を整える

ここでは簡単に覚えておいてください。もっと詳しく知りたい方は、「HTMLとCSSとは?」でググるとでてきます。

 

1.AddQuicktagを選択

ダッシュボード画面の「プラグイン」→「インストール済みプラグイン」を押し、「設定」をクリックしてください。

 

2.「HTMLコード」登録

さきほどCSSをコピーした装飾の、「HTMLコード」をコピーします。

写真のようにそれぞれ「開始タグ」と「終了タグ」にコピペします。「ボタン名」も入力します。

 

最後にチェックマークをクリックします。

いつも「ビジュアルエディター」画面で記事を書かれる方は写真の2項目に☑を入れてください。

「変更を保存」を押して登録完了です。

 

これでコードを呼び出す準備ができました

お疲れ様です。

 

ちなみにいろいろと設定できますが、最低限入力する必要があるのは、以上の項目だけです。

 

他の項目が気になるかと思うので、補足として簡単に説明します。

「ダッシュアイコン」

→ボタン名の横にアイコンが表示されます

「ラベル名」

→マウスオーバーさせた時に表示が出る機能です

「アクセスキー」

→「ショートカットキー」のことで「ALT」ボタン+設定したアクセスキーボタンで「AddQuicktag」に登録したコードが入力されます

「順番」

→「AddQuicktag」のビジュアルエディタ、テキストエディタに表示される順番を設定することができます。設定しない場合は、登録した順に表示されます

 

②実際に装飾してみよう!

あと少しなので頑張って下さい

 

ここまで来たらあとは簡単です。

「記事作成画面」を開いて、プルダウンメニューがひとつ増えているので、選択してクリックするだけです。


以上で「【webデザイン初心者】きれいな記事を書きたい!オリジナル装飾を一発で出す方法『AddQuicktag』」を終わります。

 

ありがとうございました!

 

ブログに関する記事

→ページ速度を改善して離脱率UP!「たったこれだけ…?!」で4秒も早くなる方法!!

→【はてなブログ→ワードプレス移行後】「アイキャッチ画像」の設定の仕方!

→【ブログ初心者向け】キーワード検索には「ラッコキーワード」!使い方は?

-ブログ
-, , ,

© 2021 しゅんまるブログ Powered by AFFINGER5