フリースペースでも使える「クイックタグ」を活用して表現の幅が広がります。

当WordPressテーマで使用できる「クイックタグ」のスタイル一覧です。クイックタグは記事や各所のフリースペースの中で使うことができるボタンで、執筆をより楽に、より美しくするためのサポートをします。

※ANTHEMから従来の「囲み枠a,c」を廃止し、bのみにしています。

YouTube動画のレスポンシブ表示

クイックタグとYouTubeの埋め込みコードを組み合わせるだけで、簡単に様々なデバイスでレスポンシブ表示します。PC、スマホ、タブレッドでぜひ確認してみてください。メインカラム幅より横幅が大きい動画でも自動的にカラム幅ぴったりにリサイズされる便利なクイックタグです。

記事カードリンク

サイト内リンクを記事タイトル+サムネイル画像のクールなカードリンクで表示できます。記事タイトルやアイキャッチの変更は自動で反映されます。

カラムレイアウト

レイアウト2c

クイックタグとは、テキストエディタを利用するときに、入力エリアの上部にあるボタンをクリックすると、そのボタンに応じたタグが挿入されるという機能です。クイックタグを効果的に使うことで、テキストエディタでの記事作成をすばやく、また記事の投稿者が違う場合でも同じような記事構造にすることができます。
「カラム」とは「段組み」という意味です。つまり2カラムは縦に2列に分けた表示のことをいいます。カラム作成は基礎・骨格を決める非常に重要な部分です。見やすいようにレイアウトを整える事を初期段階で行い、おおまかな配置を決めていきます。より見やすいコンテンツにするためには必要な骨組み設計です。

レイアウト3c

3カラムは縦3列に分けてレイアウトをすることを指します。PC画面にTCDテーマのクイックタグで3カラムにした場合ですが、PC画面では3カラム表示となりますが、スマートフォンなどで閲覧すると1カラム表示に変更され、スマートフォンでよりみやすい状態に変わります。
モニターに収まるように配置する事を考えると、3カラム以内が適当であることが多いかもしれません。モニターといっても、様々なサイズがあります。その全てで同じ見え方ができないと、デザインした意図通りの結果につながらない可能性が高くなるので、配置には注意が必要です。
横スクロールが出てしまうようなWebサイトにはしないようにしましょう。縦方向へのスクロールであれば、マウスホイールでスクロール操作ができますが、横方向へ対応しているマウスは一般的ではありません。操作性の良さを考えて、より見やすいコンテンツにしていきましょう。

記事を読みやすくする見出しスタイルの表現の幅が広がりました。

下記のようなテーマオプションから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からは、クイックタグで制作できる囲み枠のレパートリーを以下のひとつに絞っています。

文章や図などを枠で囲んでグループ化して見せたり、見出しなどを枠で囲んで強調することは文章の内容が整理されて見やすくなります。デザインにメリハリがつき、アクセントになるなど、囲み枠の効果はたくさんありますので効果的に使っていきましょう。

ボタンのスタイル

ボタン1

ボタン2

ボタン3

テーマオプションからボタンのデザインやサイズを3つまで柔軟に編集・登録可能です。

カスタマイズ*ボタンの配置方法を指定する

※pタグで囲い、クラス指定を追加することで配置方法の指定が可能です。

左寄せ

中央寄せ

右寄せ

また、クイックタグで出力するボタンにも新しいアニメーションを適用できるので、ぜひお試しください。アニメーションについては下記からご覧いただけます。

テーブルのレスポンシブ表示

テーブルタグで作成された表組みをレスポンシブに表示するためのタグです。
ブラウザのウィンドウ幅を縮小してスマホでの表示スタイルをご確認ください。

CSSCascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは…
レスポンシブデザインレスポンシブデザイン(RWD)とは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する…

フォームのスタイル

プラグイン「Contactform7」で作成したフォームを記事内に設置した際のスタイル設定も含まれています。
レスポンシブ表示に対応しています。

    アンダーライン1・2・3

    重要な箇所など、強調させたい部分をこのようなアニメーションで強調させることができます。
    アップデートしたクイックタグではテーマオプションから3種類までアンダーラインを保存できます。
    重要度に合わせて使い分けることも簡単ですね。

    吹き出し

    それぞれのユーザー画像や名前はテーマオプションから任意に変更できます(テキストエディターで直接入力も可能)。

    https://demo.tcd-theme.com/tcd083/wp-content/uploads/2020/08/user1.png
    ユーザーA

    こんな感じにデザインされた吹き出しが簡単に表示されます。


    https://demo.tcd-theme.com/tcd083/wp-content/uploads/2020/08/user2.png
    ユーザーB

    会話形式のブログでもリズミカルに作成可能ですね。


    https://tcd.plus/tcd080/wp-content/themes/haku_tcd080/img/common/no_avatar.png
    ユーザーC

    こんな感じで吹き出しの中のテキストにマーカーを引くのももちろん可能です。


    https://tcd.plus/tcd080/wp-content/themes/haku_tcd080/img/common/no_avatar.png
    ユーザーD

    枠と背景の色を分けられるので、幅広いデザインを楽しめますね!

    Nao

    Nao

    テーマデザインを担当しているNaoです。WEBデザインに関する豆知識や、お役立ち情報を発信していきます。個人的な日常も交えてますが、少しでもお客様の参考になると嬉しいです〜!

    関連記事

    TOP