本記事では当WordPressテーマで使用できる「クイックタグ」のスタイル一覧です。クイックタグは記事の中で使うことができるボタンで、執筆をより楽に、より美しくするためのサポートをします。
YouTube動画のレスポンシブ表示
クイックタグとYouTubeの埋め込みコードを組み合わせるだけで、簡単に様々なデバイスでレスポンシブ表示します。PC、スマホ、タブレッドでぜひ確認してみてください。メインカラム幅より横幅が大きい動画でも自動的にカラム幅ぴったりにリサイズされる便利なクイックタグです。
記事カードリンク
サイト内リンクを記事タイトル+サムネイル画像のクールなカードリンクで表示できます。記事タイトルやアイキャッチの変更は自動で反映されます。どうです？クールでしょ。
大きな環境の変化や新たなスタートを切る時、人は強いストレスを感じる生き物です。年越しや、お盆休みなどの節目には、大型連休が設けられていますね...
「HEAL」を活用すれば、少人数で営まれているスパや岩盤浴サロンなどでも、簡単にお店のWEBサイトを立ち上げることが可能です。実店舗での癒しの前に、サイト上でもゆったりとリラックスできるように細部のアニメーションや動きにもこだわっています。
カラムレイアウト
レイアウト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クイックタグがあなたが文章を書くことに集中できるようサポートします。
囲み枠のスタイル
WEBコンテンツを運営されている方にとって、記事を書く中で「ここに注目してほしい！」と思うことは多くあると思います。そんなときにはパッと目をひく、囲み枠（ボックスデザイン）がおすすめです。TCDクイックタグでは3種の囲み枠を用意しています。
文章や図などを枠で囲んでグループ化して見せたり、見出しなどを枠で囲んで強調することは文章の内容が整理されて見やすくなります。デザインにメリハリがつき、アクセントになるなど、囲み枠の効果はたくさんありますので効果的に使っていきましょう。
枠を多用しすぎると、強調したい箇所が主張をしすぎているため、読みにくくなってしまい、これでは本末転倒です。枠をつけるのは必要なものだけにし、その他は、下線を引く、文字を大きくする、色を変える、太字にする、書体を変えるなどしましょう。
カスタマイズ＊囲み枠のカラーバリエーション
※クラス指定を追加することで配色の変更が可能です。
「揃える」ことは重要です。文字の位置や、見出しなど揃えられるところはすべて揃えます。文章の端が揃うことで文頭が見つけやすくなり、文章が読みやすくなります。画像の大きさ、ボックスの色を揃えると見た目のバランスが良くなります。
「まとめる」ことも効果的です。項目名と説明、写真と写真のタイトルなどのデザインを揃えるように、関連のあるもの（例えば注釈など）を同じ枠、背景色で表示することで直感的に理解をしやすくなり、劇的に全体の視認性が向上します。
まとめた情報を「区別する」とグループが強調され、情報を素早く見つけることができ、正確に伝えることができます。グループを区別するには、罫線を引く、色分けをするなどの方法があります。TCDクイックタグを使ってサッとデザインを整えましょう。
プロのデザイナーは、これらのルールを経験からほとんど無意識に使いこなします。このルールを身に付ければ、誰でもレイアウトが上達します。様々なルールがありますが、基本ルールは「揃える」「まとめる」「区別する」を使った情報の整理整頓です。
ボタンのスタイル
HEALでは、クイックタグをアップデートしているので、テーマオプションからボタンのデザインやサイズを3つまで柔軟に編集・登録可能です。
カスタマイズ＊ボタンの配置方法を指定する
※pタグで囲い、クラス指定を追加することで配置方法の指定が可能です。
テーブルのレスポンシブ表示
テーブルタグで作成された表組みをレスポンシブに表示するためのタグです。
ブラウザのウィンドウ幅を縮小してスマホでの表示スタイルをご確認ください。
| CSS | Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは… |
|---|---|
| レスポンシブデザイン | レスポンシブデザイン（RWD）とは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する… |
フォームのスタイル
プラグイン「Contactform7」で作成したフォームを記事内に設置した際のスタイル設定も含まれています。
レスポンシブ表示に対応しています。
アンダーライン1・2・3
重要な箇所など、強調させたい部分をこのようなアニメーションで強調させることができます。
アップデートしたクイックタグではテーマオプションから3種類までアンダーラインを保存できます。
重要度に合わせて使い分けることも簡単ですね。
吹き出し
こんな感じにデザインされた吹き出しが簡単に表示されます。
会話形式のブログでもリズミカルに作成可能ですね♪
こんなデザインもできますよ〜
枠と背景の色を分けられるので、幅広いデザインを楽しめますね！
