テーマ付属の設定ファイルに入っているクイックタグの表示サンプル一覧です。
エディタ上に表示されるクイックタグボタンと同じ順にご紹介します。
Youtube動画のレスポンシブ表示
記事内のYoutube動画をレスポンシブ表示します。ブラウザのウィンドウ幅を縮小してスマホでの表示スタイルをご確認ください。
PCでは、メインカラム幅より横幅が大きい動画でも自動的にカラム幅ぴったりにリサイズされます。
カードリンク
サイト内の関連記事へのリンクをサムネイル画像付きで表示できます。
カラムレイアウト
レイアウト2c
レイアウト3c
見出しスタイル
H2
記事の装飾を美しくするTCDクイックタグ H2見出しa
マニュアルや報告書などページ数の多い文書を作成するときには、第1章、第2章というように章や、第1節、第2節というように項目などで管理します。このように「第1章、第1節、第1項」といった階層構造を持たせておくと、読み手にとってわかりやすくなります。 文書に階層構造を持たせる場合は、「見出し」と呼ばれるスタイルを設定します。
記事の装飾を美しくするTCDクイックタグ H2見出しb
見出しの「h1」は記事のタイトルで使われています。本文では基本的に使わない方が良いため、TCDクイックタグの入力設定には表示されないようにしてあります。記事の本文見出しには「h2」以降の見出しタグを用いて文章に階層構造を持たせるように意識をしてください。
H3
記事の装飾を美しくするTCDクイックタグ H3見出しa
ページ内に、「h1 → h2 → h3 → h4」というような順序になるように配置をすれば正しい状態になります。避けたい例は「h1 → h3 → h3 → h4」と歯抜けになっていたり、「h1 → h3 → h2 → h4」と順序が逆になっていたりする場合です。
記事の装飾を美しくするTCDクイックタグ H3見出しb
「h1」だけでなく「h2」や「h3」も使うことで、WEBページの内容がわかりやすくなり、検索エンジンに対してフレンドリーなWEBコンテンツを作ることができます。hタグをうまく使うことで、検索エンジンはかんたんにWEBページの内容を理解できるようになるでしょう。そして、検索エンジンが内容を正しく理解できると、検索結果に表示されやすくなると言われています。
H4
記事の装飾を美しくするTCDクイックタグ H4見出しa
章ごと・見出しタグごとに内容がまとまっていてわかりやすいと、コンテンツの質は勝手に上がります。要点が整理され、コンテンツの内容がより役に立つものになるからです。一方、見出しが効果的に使われていない文章はわかりづらいために役に立てづらく、良質なコンテンツとは言えなくなります。
記事の装飾を美しくするTCDクイックタグ H4見出しb
見出しタグは1から6までありますが、最も重要なのがh1、次に重要なのがh2、さらにはh3タグとなります。WEBページ執筆時はh1から6へと順番に使うのが基本です。hタグを使うと文字が大きくなるからと言って、大きくしたい文字にhタグを使うというのは避けましょう。ただ大きくしたいだけならCSSで対処し、「ここのキーワードや文章に注目」と検索エンジンに伝えたい時にhタグを使うようにします。
H5
記事の装飾を美しくするTCDクイックタグ H5見出しa
見出しごとに内容がまとまることは、訪問ユーザーにとって、とても良い対策になると言えます。訪問ユーザーの心を動かすような、わかりやすい文章やコンテンツを作るには、それなりにノウハウが必要ですが、「h2」や「h3」（「h4」「h5」）タグを使ってコンテンツを作りつづけると、誰でも自然にそのノウハウが身についていきます。
記事の装飾を美しくするTCDクイックタグ H5見出しb
見出しを使うことは、見出しごとに内容をまとめて、コンテンツをわかりやすくする、という作業にほかならないからです。ぜひ、「h2」や「h3」（「h4」「h5」）を使って、まとまりのあるコンテンツを書く習慣をつけ、訪問ユーザーの心を動かすコンテンツをたくさん産み出していきましょう。TCDクイックタグがあなたが文章を書くことに集中できるようサポートします。
囲み枠のスタイル
WEBコンテンツを運営されている方にとって、記事を書く中で「ここに注目してほしい！」と思うことは多くあると思います。そんなときにはパッと目をひく、囲み枠（ボックスデザイン）がおすすめです。TCDクイックタグでは3種の囲み枠を用意しています。
文章や図などを枠で囲んでグループ化して見せたり、見出しなどを枠で囲んで強調することは文章の内容が整理されて見やすくなります。デザインにメリハリがつき、アクセントになるなど、囲み枠の効果はたくさんありますので効果的に使っていきましょう。
枠を多用しすぎると、強調したい箇所が主張をしすぎているため、読みにくくなってしまい、これでは本末転倒です。枠をつけるのは必要なものだけにし、その他は、下線を引く、文字を大きくする、色を変える、太字にする、書体を変えるなどしましょう。
カスタマイズ＊囲み枠のカラーバリエーション
※クラス指定を追加することで配色の変更が可能です。
「揃える」ことは重要です。文字の位置や、見出しなど揃えられるところはすべて揃えます。文章の端が揃うことで文頭が見つけやすくなり、文章が読みやすくなります。画像の大きさ、ボックスの色を揃えると見た目のバランスが良くなります。
「まとめる」ことも効果的です。項目名と説明、写真と写真のタイトルなどのデザインを揃えるように、関連のあるもの（例えば注釈など）を同じ枠、背景色で表示することで直感的に理解をしやすくなり、劇的に全体の視認性が向上します。
まとめた情報を「区別する」とグループが強調され、情報を素早く見つけることができ、正確に伝えることができます。グループを区別するには、罫線を引く、色分けをするなどの方法があります。TCDクイックタグを使ってサッとデザインを整えましょう。
プロのデザイナーは、これらのルールを経験からほとんど無意識に使いこなします。このルールを身に付ければ、誰でもレイアウトが上達します。様々なルールがありますが、基本ルールは「揃える」「まとめる」「区別する」を使った情報の整理整頓です。
ボタンのスタイル
カスタマイズ＊ボタンの配置方法を指定する
※pタグで囲い、クラス指定を追加することで配置方法の指定が可能です。
テーブルのレスポンシブ表示
テーブルタグで作成された表組みをレスポンシブに表示するためのタグです。
ブラウザのウィンドウ幅を縮小してスマホでの表示スタイルをご確認ください。
| CSS | Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは… |
|---|---|
| レスポンシブデザイン | レスポンシブデザイン（RWD）とは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する… |
フォームのスタイル
プラグイン「Contactform7」で作成したフォームを記事内に設置した際のスタイル設定も含まれています。
レスポンシブ表示に対応しています。
[contact-form-7 id=”1958″ title=”コンタクトフォーム 1″]
