Y-DESIGNER

BiNDでのホームページ制作に役立つ情報をお届けしています。

BiNDの段落のスタイル(見出しタグの設定)

こんにちは。Y-DESIGNERの須山です。BiNDユーザーの皆様、BiNDでホームページを制作する際に段落スタイルは活用されていますか?今回はBiNDの段落スタイルについてご紹介させていただきます。

全て本文はNG!!

BiNDではHTMLのhタグ(見出しタグ)とpタグ(本文タグ)を段落のスタイルで設定できます。BiNDで制作したホームページのリニューアルをご依頼いただく際にリニューアル前のBiNDのサイトデータを拝見させていただくと段落スタイルが全て本文になっているお客様も少なくありません。

段落スタイルをしっかり設定することで多くのメリットがありますのでこの機会にぜひご確認ください。

段落のスタイルとは

BiNDにはHTML上での見出しの種類と本文の種類を記述できる『段落のスタイル』があります。適切な段落のスタイルを設定することで内部SEO対策、ホームページの更新の簡易化などのメリットがあります。

f:id:y-designer:20170923174511j:plain

段落のスタイルの種類

見出し系のスタイル

BiNDで設定可能な見出し系のスタイルはページタイトル(h1)、タイトル(h2)、大見出し(h3)、小見出し(h4)の4つになります。

ページタイトル(h1)について

文字通りそのページのタイトルです。基本的には1ページに1回だけの使用にしましょう。また基本的にはページの初めの方に設置するのが望ましいでしょう。
文字数は30文字くらいが望ましいと言われています。
文字数が長くなり、h1内にキーワードが増えれば増えるほど効果が弱くなると言われています。
下手にキーワードを盛り込むよりもページごとにキーワードをしっかり設定してよりシンプルでわかりやすいページタイトルにしましょう。

タイトル(h2)から小見出し(h4)

見出しタグの順番はh1から順にh2、h3、h4と数字が小さいほど大きな見出しになります。

例えば、まだh1が設定されていないのにいきなりh4を設定するなんてことは基本的にはありえません。
ホームページを作る際に文章を一度考え、見出しなども事前に考えて置くとBiNDでページを編集する際に容易に編集ができます。

以下はBiNDでタグを設置するときの一例です。

f:id:y-designer:20170923183514j:plain

基本的にh1の中にh2、h2の中にh3、h3の中にh4と見出しタグが入れ子になっていることがわかると思います。
レイアウトの都合もあると思いますので1ブロックでここまで段落のスタイルを設定することもないと思いますが、わかりやすいイメージだと思っていただければと思います。

本文系のスタイル

本文系のスタイルの種類

本文、リード文、引用、注釈、囲み、クレジットがありますがBiND9の仕様では全てpタグをいうHTMLの本文タグで書き出されます。
つまり、どれにしてもHTML上は変わりありません。

本文系のスタイルの使い分け

本文

基本的にタイトル以外の文章は本文に設定しています。本文系のスタイルではこれが一番使用すると思います。

リード文

見出しの補足文や説明文の部分はリード文を使用します。(個人によって異なると思います。私はそうしてます。)

引用 

他のホームページから情報をお借りしたときなどは引用タグを使用します。
例えば、ウィキペディアから文章をお借りした時や引用元の情報を記載する時などに使用します。

注釈

注意書きなどに使用します。

囲み

文章を線や背景色で囲みたい時に使用します。このブログの目次の部分のような見せ方をしたいときは囲みを使います。

クレジット

著作権の表記の箇所などに使用します。ホームページのフッターにあるcopyrightなどに使用します。

HTML的には

上で説明させていただきました本文系のスタイルは全てpタグで書き出されます。
つまりHTML上はどの文章タグにしても然程支障はありませんが、段落のスタイルごとにCSSでデザインが指定されているので上のような使い方をするのが無難だと思います。
またBiNDの仕様の変更等で書き出されるタグが変更になる可能性もありますので内容に沿った形式での使用を心がけましょう。

段落スタイルを使用するメリット

内部SEO対策

段落スタイルを適切に使用することでホームページの内部SEO対策が期待できます。
ホームページを作る前にページ構成やキーワードをしっかり考え、各ページの見出しを設定しましょう。

更新作業の簡易化

BiNDのCSS詳細設定やDRESSを活用することで各段落のスタイルごとにデザインを自動的に生成することができます。
CSSの詳細設定やDRESSに関しては今後違う記事で紹介していきたいと思います。

まとめ

段落のスタイルをしっかりと活用することでSEOや作業の効率化、デザインの統一など多くのメリットがあります。ホームページを制作する前に構成をしっかりと考えて適切な段落のスタイルを設定しましょう。

 

BiNDの制作依頼はぜひY-DESIGNERへ!!

y-designer.com

(C)2017 Y-DESIGNER