OWLetのすごいところ vol.2 サイト構築にかかせない「見出し」機能

  • このエントリーをはてなブックマークに追加
HTMLの文章構造に大切な要素である見出し。SEOの役割でも非常に重要な要素でもあります。
OWLetでは3種類の「見出し」機能があります。用途別に説明します。

基本中の基本パーツ「見出し」

基本中の基本パーツ「見出し」

sample

3種ある見出し機能の中では一番頻繁に使用する機能になります。

「見出し」基本設定項目

css id

見出しにidを設定できます。

半角スペース区切りで複数設定可能になっています。

css class 見出しにclassを設定できます。

半角スペース区切りで複数設定可能になっています。

タグ タグの種類を選択できます。

自動:セクションと連動

H1:<h1>に相当

大見出し:<h2>に相当

中見出し:<h3>に相当

小見出し:<h4>に相当

極小見出し:<h5>に相当

最小見出し:<h6>に相当

見出しテキスト テキストを設定できます。

タグを使用することも可能です。

 

例:「<b>見出し</b>機能」とすれば太字になります。

画像 画像を設定できます。

画像設定時、見出しテキストに設定したテキストはaltになります。

「見出し」機能にあるタグの自動ってなんだ?

sample

OWLetにはHTML5で追加されたセクション要素に対応する為、

「セクション」パーツが存在します。

この「セクション」パーツの中にタグを自動にした見出しを配置すると、

自動的にセクショニングされh1~6に切り替わります。

HTML5の例
sample

OWLetでは「セクション」パーツがありますので、

「セクション」パーツにタグ:自動に設定した見出しを配置し、ネストされれば自動的にhタグは変化します。

 

余談ですが、OWLetではXHTML・HTML5の切替が安易に出来ます。

セクションパーツを始め、header、footer等、HTML5で追加されたタグのパーツを使用した場合でも、自動的に下記にように切り替わります。

XHTMLの時は使えないという心配はありません。

 

HTML5

<section></section>

<header></header>

<footer></footer>

 

XHTML

<div class="section"></div>

<div class="header"></div>

<div class="footer"></div>

テキスト設定が不要!「ページ見出し」

sample

ページ見出しはその名の通り、ページに設定した「ページ名」を自動出力してくれます。

 

例えば「会社紹介」というページがあった場合、

最初の見出しは「会社紹介」になる事が多いのではないでしょうか。

ページタイトルがそのまま見出しになっている際に入力の手間が省ける便利な機能になります。

「ページ見出し」基本設定項目

タグ
タグの種類を選択できます。
自動:セクションと連動
H1:<h1>に相当
大見出し:<h2>に相当
中見出し:<h3>に相当
小見出し:<h4>に相当
極小見出し:<h5>に相当
最小見出し:<h6>に相当
css id
見出しにidを設定できます。
半角スペース区切りで複数設定可能になっています。
css class
見出しにclassを設定できます。
半角スペース区切りで複数設定可能になっています。

レイアウト専用!「SEO用見出し」

sample

「SEO用見出し」はレイアウト設置専用パーツになります。

h1固定で、meta要素設定と連動する重要なパーツになります。

原則1サイト1個設置となります。

「SEO用見出し」基本設定項目

css id
見出しにidを設定できます。
半角スペース区切りで複数設定可能になっています。
css class
見出しにclassを設定できます。
半角スペース区切りで複数設定可能になっています。
sample

meta要素設定の「SEO用見出し」に設定した内容が出力されます。

デフォルトはtitleを出力。直接入力で出力内容の変更も可能、

出力形式の選択も可能になっています。

 

SEOに強いOWLetならではの機能になります。

< >

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

EXPOバナーよくある御質問OWLetの改修要望募集WordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 10:00~18:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>