OWLetのすごいところ vol.2 サイト構築にかかせない「見出し」機能
HTMLの文章構造に大切な要素である見出し。SEOの役割でも非常に重要な要素でもあります。
OWLetでは３種類の「見出し」機能があります。用途別に説明します。
OWLetでは３種類の「見出し」機能があります。用途別に説明します。
基本中の基本パーツ「見出し」
３種ある見出し機能の中では一番頻繁に使用する機能になります。
「見出し」基本設定項目
| css id |
見出しにidを設定できます。 半角スペース区切りで複数設定可能になっています。 |
|---|---|
| css class | 見出しにclassを設定できます。
半角スペース区切りで複数設定可能になっています。 |
| タグ | タグの種類を選択できます。
自動：セクションと連動 H1：<h1>に相当 大見出し：<h2>に相当 中見出し：<h3>に相当 小見出し：<h4>に相当 極小見出し：<h5>に相当 最小見出し：<h6>に相当 |
| 見出しテキスト | テキストを設定できます。
タグを使用することも可能です。
例：「<b>見出し</b>機能」とすれば太字になります。 |
| 画像 | 画像を設定できます。
画像設定時、見出しテキストに設定したテキストはaltになります。 |
「見出し」機能にあるタグの自動ってなんだ？
OWLetにはHTML5で追加されたセクション要素に対応する為、
「セクション」パーツが存在します。
この「セクション」パーツの中にタグを自動にした見出しを配置すると、
自動的にセクショニングされh１～６に切り替わります。
HTML5の例
OWLetでは「セクション」パーツがありますので、
「セクション」パーツにタグ：自動に設定した見出しを配置し、ネストされれば自動的にｈタグは変化します。
余談ですが、OWLetではXHTML・HTML５の切替が安易に出来ます。
セクションパーツを始め、header、footer等、HTML5で追加されたタグのパーツを使用した場合でも、自動的に下記にように切り替わります。
XHTMLの時は使えないという心配はありません。
HTML5
<section></section>
<header></header>
<footer></footer>
XHTML
<div class="section"></div>
<div class="header"></div>
<div class="footer"></div>
テキスト設定が不要！「ページ見出し」
ページ見出しはその名の通り、ページに設定した「ページ名」を自動出力してくれます。
例えば「会社紹介」というページがあった場合、
最初の見出しは「会社紹介」になる事が多いのではないでしょうか。
ページタイトルがそのまま見出しになっている際に入力の手間が省ける便利な機能になります。
「ページ見出し」基本設定項目
| タグ |
タグの種類を選択できます。 自動：セクションと連動 H1：<h1>に相当 大見出し：<h2>に相当 中見出し：<h3>に相当 小見出し：<h4>に相当 極小見出し：<h5>に相当 最小見出し：<h6>に相当
|
|---|---|
| css id |
見出しにidを設定できます。 半角スペース区切りで複数設定可能になっています。
|
| css class |
見出しにclassを設定できます。 半角スペース区切りで複数設定可能になっています。
|
レイアウト専用！「SEO用見出し」
「SEO用見出し」はレイアウト設置専用パーツになります。
h１固定で、meta要素設定と連動する重要なパーツになります。
原則１サイト１個設置となります。
「SEO用見出し」基本設定項目
| css id |
見出しにidを設定できます。 半角スペース区切りで複数設定可能になっています。
|
|---|---|
| css class |
見出しにclassを設定できます。 半角スペース区切りで複数設定可能になっています。
|
meta要素設定の「SEO用見出し」に設定した内容が出力されます。
デフォルトはtitleを出力。直接入力で出力内容の変更も可能、
出力形式の選択も可能になっています。
SEOに強いOWLetならではの機能になります。
