(※こちらはサンプル画像です。)
サイトの構造を視覚的に素早く理解するために見出しの設置は重要です。
通常、見出しに使用する画像のデザインなどはPhotoshopやIllustratorなどのグラフィック編集ソフトを使用して作成するかと思いますが、ザ・トールではプルダウンからお好みの組み合わせを選んで色を決めるだけで見出しを作成することができます。
もちろんHTMLやCSSなどの専門の知識はとくに不要です。
ザ・トールの見出しはh2やh3などのhタグに割り当てることができ、目次の機能と併用すれば、訪問者を円滑に誘導することができます。
(※こちらはサンプル画像です。) ザ・トールではページの冒頭や好きな場所に目次を設置することができます。 目次があることで訪問者がページ内の構造を素早く理解でき 気になる項目(見出し)をクリックすることで瞬[…]
以降では見出しの設定方法と、見出しを使用したレイアウトを確認することができますのでご覧ください。
見出しデザインの設定方法
【カスタマイズ→パーツスタイル設定→見出し設定(個別ページ用)】
見出しはH2~H5までデザインすることができ、ここでは例としてH2の見出しのデザインの設定方法をご案内します。
先に任意のページ内にh2タグを配置しておいた後にこの見出しデザインの設定を開けば、見出しの編集をする際に常に画面右側でプレビューが表示されてるのでデザインを色々試しながら更新せずに確認ができます。
【デザインを選択】
こちらをクリックすることでプルダウンから見出しのベースとなるデザインを選択します。
※画像の一覧はほんの一部です。
【カラーAを設定】【カラーBを設定】【カラーCを設定】
続いて選択したデザインのA,B,Cのそれぞれの色を決めます。
以降はワードプレスの記事投稿画面でh2やh3のタグを使用すると設定した見出しデザインが反映されるようになります。
見出しデザインのサンプル
こちでは配置した見出しパターンのサンプルをご紹介します。
一部の色はデザインにあわせて適宜変更しています。
※こちらの見出しは「見出し(hタグ)」として配置すると、このページの目次が無駄に増えてしまうのであえて画像で配置してます。
【下線-基本】
【左下線-左2色】
【背景-ストライブ】
【背景-はみ出す線】
【グラデ-ラウンド】
【丸マーク-グラデ上線(文字黒)】
以上で見出しの設定の説明は終わりです。
デザインの設定というと難しく感じるかと思いますが、操作方法はわざわざご案内する必要はなかったかもしれないくらいにいたってシンプルでしたね(苦笑)。
ただぞれだけザ・トールでは簡単に豊富なデザインが適用できるということを知っていただく為、今回ご案内させていただきました。
H2やH3の見出しの文言もコンテンツの内容を要約する役割としてSEOに影響するといわれていす。
文言とあわせて目立つカッコイイデザインも楽しんでみてください!