ブログ運営に超便利!|プラグイン AddQuickTag活用法

addquicktag

「ブログ記事に枠を付けたいなぁ」

なんて思い立ったが吉日と思い、調べているとやっぱりHTMLなどプログラミングの知識がなければできないのかな...なんて思いながらネットサーフィンしていたらワードプレスのプラグイン、AddQuickTagでできることを見つけました。そして、あまりAddQuickTagの活用法がないので、自分なりの活用法を紹介します。

スポンサードリンク
rectangle_big for monk

見た目のいいサイトほど枠を多用している

いろいろなサイトを目にしますが、

「お、いいなぁ、このサイト♪」

って、思えるサイトが必ず使っているのが枠。

自分のサイトにもこんなの使えたらなぁ...なんて、憧れはありました。HTMLやCSSなどをしっかり学んだ人には、当たり前のようにすぐ使えるのかもしれませんが、付け焼き刃の私には夢のまた夢。

「いつかは自分も」

と、思っていましたがワードプレスプラグインのAddQiuckTagでできることが分かったので早速実践です。

まずはAddQuickTagをインストール

aqt_cover

まずは、ワードプレスへログインして、プラグインの新規追加をクリック。

plugin_newadd

プラグインを追加にて、

tsuikanite

AddQuickTagを記入し、Enterキー。

addquicktag

今すぐインストールをクリック。そして、プラグインの有効化をクリック。すると、

shinkitsuika

が、出てくるので、設定をクリック。

AQT_settei

とりあえずここまで。

憧れの枠設定

とりあえずシンプルな線で枠を作るためには <fieldset></fieldset> で、囲みたい記事や画像を枠で囲むことができます。

テキスト表示では、

<fieldset>記事や画像</fieldset>

こんな感じで、ビジュアル表示では、

ダイソン V6 Fluffy

Dyson V6 Fluffy

amazon

rakuten

こんな感じになります♪

枠設定をAddQuickTagに反映させます

枠設定  <fieldset> </fieldset> を反映させるために、AddQuickTagの設定画面にて設定。

AQT_settei

  • ボタン名
  • ラベル名:無記入OK
  • 開始タグ<fieldset>
  • 終了タグ</fieldset>
  • アクセスキー:無記入OK
  • 順番

と設定し、

settei gamen_addquicktag

  • ビジュアルエディター
  • Post
  • Page

にチェックを入れ、「変更を保存」をクリック。

これで目立たせたい記事や画像に上部にあるビジュアルエディターのQuicktagsから枠線を入れることができます(テキストエディターではfieldsetボタンがあります)。すごく簡単でメリハリもつくので、効果的です。

二重枠にしたいなら

インパクトのある二十枠にしたいのなら、

<div style="BORDER: #708090 3px double; PADDING: 10px; BACKGROUND: #ffffff; ">記事や画像</div>

二重枠内訳:

  • BORDER:#XXXXXX(6桁の文字コード):枠線の色
  • PADDING:Xpx :枠線と文字の隙間
  • BACKGROUND:#XXXXXX(6桁の文字コード):枠内(背景)の色

色を変更したい場合はコチラの『WEB色見本 現職辞典』を参考にしてください。

同様にAddQuickTagで二重枠を設定すると、

GoPro HERO4 Session
gopro hero4 session

amazon

rakuten

こんな感じになります♪

ハイライトも利用できます♪

highliter

ワードプレスには蛍光ペンのようなハイライトがありません。ワード(MS Word)にはありますけどね。強調したところや大事なところにはハイライトですよね。そこでAddQuickTagを利用して、ハイライト設定をします。

ハイライト設定

まずは、外観→テーマの編集でスタイルシート (style.css)、またはSimplicityでは子テーマに、

.marker_y {

background-color: #ffff00;

margin-left: 0.0em;

margin-right: 0.2em;

}

を記述すると、

hilight_simplicity child

上記のような感じで更新をクリックすればOKです。そして“大事なところ”をテキストエディターでは、

<span class="marker_y">大事なところ</span>

のように表示されます。

なので、枠同様、AddQuickTagに、

  • ボタン名:ハイライト
  • ラベル名:無記入OK
  • 開始タグ:<span class=”marker_y”>
  • 終了タグ:</span>
  • アクセスキー:無記入OK
  • 順番:2
  • ビジュアルエディター
  • Post
  • Page

にチェックを入れて、「変更を保存」をポチっと押せばいつでも好きなところにハイライトできますよ♪

こんな感じ↓↓↓になります

大事なところ

チェック ⇒  を入れたい

decision

「こんなことをすると役立ちますよ」とか、「コレだけは外せません」といった文章や見出しを強調するときに読み手に分かりやすように、表示したいのがチェックのアイコンです。Simplicityではデフォルトですでに Font Awesome に対応しています。

チェック・アイコンなどは Font Awesome を利用

チェックだけでなく様々なアイコンがありますので、いろいろ見てみて選んでブログやHPなどに挿入すると今で以上に楽しくなりますよ。

とりあえず Font Awesome から、

fa-check-square-o

<i class="fa fa-check-square-o"></i>

を選び、ハイライト同様の手順を、AddQuickTagに記入します。

  • ボタン名:チェック
  • ラベル名:無記入OK
  • 開始タグ:<i class=”fa fa-check-square-o”></i>
  • 終了タグ:無し
  • アクセスキー:無記入OK
  • 順番:3
  • ビジュアルエディター
  • Post
  • Page

にチェックを入れて、「変更を保存」で完了です。

まとめ

AddQuickTagは本当に便利です。これからもいろいろなカタチでブログを修飾できると思うので、応用ができますね。また何か見つけたら、追記しますのでこれからもよろしくです。

それでは良い一日を!

【改訂】2016/05/27

スポンサードリンク
rectangle_big for monk
rectangle_big for monk

コメントをどうぞ

メールアドレスが公開されることはありません。