当記事では、クイックタグ機能をカスタマイズして便利に使いこなす方法をご紹介いたします。
TCDクイックタグの仕様解説は下記記事を参考にご覧ください。
ブログ記事をより伝わりやすいものに、記事作成をより簡単にするTCDテーマの機能「クイックタグ」を使う方法をご紹介いたします。 この記事では、現在販売終了しているTCD030~TCD013テーマに搭載されている、AddQuicktagプラグイン利用型のクイックタグについて解説しています。 ...
クイックタグ機能とは、TCDテーマオリジナルの記事執筆やコンテンツの作成をサポートする機能です。例えば、見出しやボタンのデザインをあらかじめ登録しておいて、エディター内のボタン一つで投稿や固定ページ内に出力できます。 こちらでは、TCD独自機能「TCDクイックタグ」の基本的な使い方や活用例をご...
TCDテーマの人気機能のひとつのクイックタグ。「Be（tcd076）」以降のテーマでは、TCDテーマオプションで、オリジナルデザインのクイックタグを登録できるようになっています。 どなたでも非常に使いやすくなっていますので、当記事でその概要をご紹介いたします。 クイックタグ機能とは T...
クイックタグで挿入されるタグをカスタマイズする
クイックタグ機能が実装されたテーマには、テーマCSSファイルに記事作成時に呼び出して使用できる「TCD Advanced Style」が含まれています。
「TCD Advanced Style」は基本的に、テーマCSSファイルの末尾に入っています。
この「TCD Advanced Style」で定義されているスタイルを記事作成時に簡単に呼び出して使用できるようにしたのがクイックタグ機能というわけです。
例えば、クイックタグボタンの見出し・囲み枠・ボタン等のタグに、さらに
- 配色を変更する
- 配置方法（左寄せ/中央寄せ/右寄せ）を指定する
といった他のクラス指定を追加することで、各要素の表示スタイルをカスタマイズできるようになっています。組み合わせはいくつもありますが、以下に使用頻度が高いと思われるクラス指定の追加方法をご紹介しますのでご参考ください。
クイックタグ[囲み枠a]の配色を変更する
まずは通常通り、テキストをドラッグで選択し、［囲み枠a］をクリックし、クイックタグを挿入します。
<p class="well">サンプルテキスト</p>
デフォルトでは、上記のタグが挿入され、ブラウザには以下のように表示されます。
では、配色を変更してみましょう。囲み枠の配色の変更には「TCD Advanced Style」内の下記のクラス指定を使用します。
.wl_red { background-color: #f2dede; border-color: #ebccd1; color: #a94442; }
.wl_yellow { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; }
.wl_blue { background-color: #d9edf7; border-color: #bce8f1; color: #31708f; }
.wl_green { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; }
上からレッド・イエロー・ブルー・グリーンの4種類のスタイルをご用意しています。
ここでは、配色を赤に変更してみます。
下記のように「wl_red」を追加します。
<p class="well wl_red">サンプルテキスト</p>
下図のように配色が赤に変更されます。
「wl_yellow」「wl_blue」「wl_green」も同じようにクラス指定を追加することで適用されます。
クイックタグ[角丸ボタン]の配色を変更する
通常通り、テキストをドラッグで選択し、［角丸ボタン］をクリックし、クイックタグを挿入します。
下記のタグが挿入され、以下のように表示されます。
<a href="#" class="q_button rounded">サンプルテキスト</a>
ボタンの配色の変更には【style.css】- TCD Advanced Style内の下記のクラス指定を使用します。
.bt_red{ background:#c01f0e; color:#fff; }
.bt_yellow{ background:#f1c40f; color:#fff; }
.bt_blue{ background:#2980b9; color:#fff; }
.bt_green{ background:#27ae60; color:#fff; }
上からレッド・イエロー・ブルー・グリーンの4種類のスタイルをご用意しています。
ここでは、ボタンのカラーを赤に変更するので、下記のようにクラス「bt_red」を追加します。
<a href="#" class="q_button rounded bt_red">サンプルテキスト</a>
下図のように配色が赤に変更されます。
「bt_yellow」「bt_blue」「bt_green」も同じようにクラス指定を追加することで適用されます。また、[フラットボタン][ラウンドボタン]でも同様にサイズを問わず配色の変更が可能です。
クイックタグ[フラットボタン-L]の配置方法を指定する
まずは通常通り、［フラットボタン-L］をクリックし、クイックタグを挿入します。
下記のタグが挿入されます。ボタンはデフォルトでは左寄せで表示されます。
<a href="#" class="q_button sz_l">サンプルテキスト</a>
フラットボタン-L – デフォルト配置の表示サンプルは下記の通りです。
配置方法の指定には【style.css】- TCD Advanced Style内の下記のクラス指定を使用します。
/* ----------------------------------------------------------------------
text-align - 配置
---------------------------------------------------------------------- */
.align1{text-align:center !important} /* 中央寄せ */
.align2{text-align:right !important} /* 右寄せ */
.align3{text-align:left !important} /* 左寄せ */
上から中央寄せ・右寄せ・左寄せの3種類のスタイルをご用意しています。
ここでは、デフォルトだと左寄せで表示される[フラットボタン-L]を中央寄せで表示します。
下記のようにクラス「align1」を指定したpタグで囲むと以下のように表示されます。
<p class="align1"> <a href="#" class="q_button sz_l">サンプルテキスト</a> </p>
他のボタンも形状、サイズ、カラー問わず同じように配置方法の変更が可能です。このようにクイックタグにさらにクラス指定を追加することで、表示スタイルをカスタマイズできます。
このように、クイックタグボタンは非常に拡張性の高い機能となっています。ぜひ自分仕様にカスタマイズして日々のサイト運営にお役立てください。
