当WordPressテーマで使用できる「クイックタグ」のスタイル一覧です。クイックタグは記事や各所のフリースペースの中で使うことができるボタンで、執筆をより楽に、より美しくするためのサポートをします。
YouTube動画のレスポンシブ表示
クイックタグとYouTubeの埋め込みコードを組み合わせるだけで、簡単に様々なデバイスでレスポンシブ表示します。PC、スマホ、タブレッドでぜひ確認してみてください。メインカラム幅より横幅が大きい動画でも自動的にカラム幅ぴったりにリサイズされる便利なクイックタグです。
記事カードリンク
サイト内リンクを記事タイトル+サムネイル画像のクールなカードリンクで表示できます。記事タイトルやアイキャッチの変更は自動で反映されます。
カラムレイアウト
レイアウト2c
レイアウト3c
記事を読みやすくする見出しスタイルの表現の幅が広がりました。
下記のようなテーマオプションからH2,H3,H4,H5のそれぞれのスタイルを編集可能です。
フォント色、罫線の有無や、その太さや背景色の有無など、細かく設定・保存ができるので、以下のような様々なスタイルで見出しをスタイリング可能です（ほんの一例です）。テキストの位置も左寄せ、中央寄せ、右寄せと選択できます。
見出し2
見出し3
見出し4
見出し5
マニュアルや報告書などページ数の多い文書を作成するときには、第1章、第2章というように章や、第1節、第2節というように項目などで管理します。このように「第1章、第1節、第1項」といった階層構造を持たせておくと、読み手にとってわかりやすくなります。 文書に階層構造を持たせる場合は、「見出し」と呼ばれるスタイルを設定します。
見出しの「h1」は記事のタイトルで使われています。本文では基本的に使わない方が良いため、TCDクイックタグの入力設定には表示されないようにしてあります。記事の本文見出しには「h2」以降の見出しタグを用いて文章に階層構造を持たせるように意識をしてください。
「h1」だけでなく「h2」や「h3」も使うことで、WEBページの内容がわかりやすくなり、検索エンジンに対してフレンドリーなWEBコンテンツを作ることができます。hタグをうまく使うことで、検索エンジンはかんたんにWEBページの内容を理解できるようになるでしょう。そして、検索エンジンが内容を正しく理解できると、検索結果に表示されやすくなると言われています。
章ごと・見出しタグごとに内容がまとまっていてわかりやすいと、コンテンツの質は勝手に上がります。要点が整理され、コンテンツの内容がより役に立つものになるからです。一方、見出しが効果的に使われていない文章はわかりづらいために役に立てづらく、良質なコンテンツとは言えなくなります。
見出しタグは1から5までありますが、最も重要なのがh1、次に重要なのがh2、さらにはh3タグとなります。WEBページ執筆時はh1から5へと順番に使うのが基本です。文字サイズを調整したい場合などはCSSで対応するようにしましょう。
見出しごとに内容がまとまることは、訪問ユーザーにとって、とても良い対策になると言えます。訪問ユーザーの心を動かすような、わかりやすい文章やコンテンツを作るには、それなりにノウハウが必要ですが、「h2」や「h3」（「h4」「h5」）タグを使ってコンテンツを作りつづけると、誰でも自然にそのノウハウが身についていきます。
ぜひ、見出しクイックタグを使って、まとまりのあるコンテンツを書く習慣をつけ、訪問ユーザーの心を動かすコンテンツをたくさん産み出していきましょう。TCDクイックタグがあなたが文章を書くことに集中できるようサポートします。
囲み枠のスタイル
ANTHEMからは、クイックタグで制作できる囲み枠のレパートリーを以下のひとつに絞っています。
文章や図などを枠で囲んでグループ化して見せたり、見出しなどを枠で囲んで強調することは文章の内容が整理されて見やすくなります。デザインにメリハリがつき、アクセントになるなど、囲み枠の効果はたくさんありますので効果的に使っていきましょう。
ボタンのスタイル
テーマオプションからボタンのデザインやサイズを3つまで柔軟に編集・登録可能です。
カスタマイズ＊ボタンの配置方法を指定する
※pタグで囲い、クラス指定を追加することで配置方法の指定が可能です。
また、クイックタグで出力するボタンにも新しいアニメーションを適用できるので、ぜひお試しください。アニメーションについては下記からご覧いただけます。
テーブルのレスポンシブ表示
テーブルタグで作成された表組みをレスポンシブに表示するためのタグです。
ブラウザのウィンドウ幅を縮小してスマホでの表示スタイルをご確認ください。
| CSS | Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは… |
|---|---|
| レスポンシブデザイン | レスポンシブデザイン（RWD）とは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する… |
フォームのスタイル
プラグイン「Contactform7」で作成したフォームを記事内に設置した際のスタイル設定も含まれています。レスポンシブ表示に対応しています。
アンダーライン1・2・3
重要な箇所など、強調させたい部分をこのようなアニメーションで強調させることができます。
アップデートしたクイックタグではテーマオプションから3種類までアンダーラインを保存できます。
重要度に合わせて使い分けることも簡単ですね。
吹き出し
それぞれのユーザー画像や名前はテーマオプションから任意に変更できます（テキストエディターで直接入力も可能）。
こんな感じにデザインされた吹き出しが簡単に表示されます。
会話形式のブログでもリズミカルに作成可能ですね。
こんな感じで吹き出しの中のテキストにマーカーを引くのももちろん可能です。
枠と背景の色を分けられるので、幅広いデザインを楽しめますね！
