HPB18 | HPB19 コンテンツ一覧
ホーム > HPB19 > 見出し文字 (h1、h2、h3タグ) の大きさ・色を変える
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

ホームページビルダー19 見出し文字 (h1、h2、h3タグ) の大きさ・色を変える



ホームページビルダー19 見出し (h1、h2、h3タグ) の使い方



見出し文字とか、見出しタグとか、あまり聞きなれない言葉かと思います
知らなくても、あるいは、使わなくても、ちゃんとホームページはできます

ただ、この見出しタグ、正しく使えば、SEO対策として有効ですよと、かの Google 大先生がおっしゃっていますので、使い方をご説明します




見出し1 <h1>  見出し2 <h2>  見出し3 <h3>  ・ ・ ・ とは


見出し1、見出し2、見出し3を設定すると、それそれの文字列に、<h1>タグ、<h2>タグ、<h3>タグが設定されます
見出しは、重要な順に、見出し1に始まり、見出し6まで、タグも同様に、<h1> ~ <h5> まであります
<h>は、「heading」の意です


見出し タグ 意味
見出し1 <h1>
見出し2 <h2>
見出し3 <h3>
見出し4 <h4>
見出し5 <h5>
見出し6 <h6> 小見出し


Google 、Yahoo! 等の検索サイトでは、検索順位を決定する際に、この文字列を、重要キーワードとして認識します
(タグ名については、参考記述です ここで意識する必要はありません)




ホームページビルダー19 見出しタグ文字1 <h1>の設定




見出し文字の設定


見出し1にしたい文字列を、マウスドラッグで選択し、メニューバーの「挿入」 → 「段落」 → 「見出し1」をクリックします
ホームページビルダー19 見出しタグ文字1 <h1>の設定結果




文字列「見出し1」が、「見出し1」として設定されました

なお、見出し設定時は、同時に改行も設定されますので、下の文字列との間に、1行追加されています
ホームページビルダー19 見出しタグ文字2 <h2> の設定




見出し2も同様に、見出し2にしたい文字列を、マウスドラッグで選択し、メニューバーの「挿入」 → 「段落」 → 「見出し2」をクリックします
ホームページビルダー19 見出しタグ文字の文字修飾方法の説明




見出し文字の修飾


同様にして、見出し3まで設定し、余分な改行を削除しました

さて、見出し文字列としての設定は完了ですが、ちょっと見栄えがよろしくありませんね

いくら重要と言われても、このままでは使う気にならないと思いますので、文字列の見栄えを調整しましょう


ホームページビルダー19 見出しタグ文字の文字修飾 直接文字修飾はNG




といって、ツールバーの「文字縮小」や「文字色の変更」を使って、文字列を直接文字修飾してはいけません
ホームページビルダー19 見出しタグ文字の文字修飾 修飾前の状態




見出し設定しただけの状態の「HTML ソース」の下の方です

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

見出し文字列が、それぞれ、「 <h1> </h1> 」、「 <h2> </h2> 」、「 <h3> </h3> 」で直接囲われています
ホームページビルダー19 見出しタグ文字の文字修飾 見出しタグ内に文字修飾タグ文字が入ってしまう




文字列に直接文字修飾すると、

<h1><font size="-1" color="#ff0000">見出し1</font></h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

という風に、「 <h1> </h1> 」タグの間に、余計な文字列(文字修飾用のタグ)が入り込んでしまい、せっかくの見出し設定が台無しです


ホームページビルダー19 見出しタグ文字の文字修飾 行間が空いてしまう




そもそも、文字列だけ変えても、行の高さとか他の要素が変わりませんので、妙に行間が空いてしまいます

左図の赤枠分だけ、見出し文字用のスペースが取られてしまっています
ホームページビルダー19 見出しタグ文字の文字修飾 スタイルシート マネージャーを使用する




で、どうするかと言いますと、行間の調整同様、スタイル設定を利用します

メニューバー「表示」から、「スタイルシートマネージャー」を選択します
ホームページビルダー19 見出しタグ文字の文字修飾 スタイルの追加




「スタイルシート マネージャー」ダイアログ中段から、「追加」 → 「スタイル」をクリックします
ホームページビルダー19 見出しタグ文字の文字修飾 スタイルシート マネージャー 見出し1 h1 を選択




「スタイルの設定」ダイアログ右上の「HTML タグの候補」から、「見出し 1   h1」をクリックします
ホームページビルダー19 見出しタグ文字の文字修飾 スタイルシート マネージャー 見出し1 h1 文字の大きさの単位を選択




例えば、文字の大きさを変えたい場合、「フォント」タブ内左下の「サイズ」の「予約語」から「パーセント」をクリック選択します
ホームページビルダー19 見出しタグ文字の文字修飾 スタイルシート マネージャー 見出し1 h1 文字の大きさを100%に設定




「サイズ」に「100」(標準の文字サイズに対しての比率100% = 標準の文字サイズ)と入力します
ホームページビルダー19 見出しタグ文字の文字修飾 スタイルシート マネージャー 見出し1 h1 文字の色を設定




赤文字にしたい場合、同じく、「スタイルの設定」ダイアログの「文字と背景」タブから、「前景色」で「赤」をクリック選択します

「OK」をクリックします
ホームページビルダー19 見出しタグ文字の文字修飾 スタイルシート マネージャー 見出し2 h2 見出し3 h3 スタイルの追加




「見出し2」と「見出し3」に対しても同様に、「スタイルシート マネージャー」ダイアログで、「追加」 → 「スタイル」をクリック
ホームページビルダー19 見出しタグ文字の文字修飾 スタイルシート マネージャー 見出し2 h2 文字修飾の設定




それぞれ、「見出し 2   h2」、「見出し 3   h3」をクリック選択し、文字修飾設定を行います
ホームページビルダー19 見出しタグ文字の文字修飾 見出しタグ文字の修正方法




修正したい場合は、「スタイルシート マネージャー」中段の「編集」をクリックするか、その上の窓から修正したいタグを直接ダブルクリックします
ホームページビルダー19 見出しタグ文字の文字修飾 見出しタグ文字の修正設定




既存の設定ダイアログが開きますので、変更したい箇所を修正します
ホームページビルダー19 見出しタグ文字の文字修飾 見出しタグ文字の修正結果




「OK」をクリックして、「スタイルシート マネージャー」ダイアログを閉じます
ホームページビルダー19 見出しタグ文字の文字修飾 見出しタグ文字のスタイル設定の結果




文字修飾完成です
ホームページビルダー19 見出しタグ文字の文字修飾 見出しタグ文字のスタイル設定の結果HTMLソース




「HTML ソース」を見てもきれいなままです

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

その上の、「

h1{
font-size : 100%;
color : red;
}

h2{
font-size : 100%;
color : red;
}

h3{
font-size : 100%;
color : blue;
}

」部分が、今回設定した部分になります


ホームページビルダー19 見出しタグ文字の文字修飾 見出しタグ文字のrベルの変更方法




見出しレベルの変更

見出しの解除とか、見出し3を見出し2とかへの変更する際は、変更したい見出し文字列をダブルクリック

メニューバー「書式」 → 「段落」 → 変更したい見出しレベルをクリック選択します
ホームページビルダー19 見出しタグ文字の文字修飾 見出しタグ文字のrベルの変更結果




変更完了です



注.SEOの観点から

「見出し1」は、ページ内に1つだけ、それ以下レベルの見出し2以降とかは、複数配置可能ですが、階層関係を必ず守ること

例えば、「見出し1」の後に、「見出し2」をとばして、「見出し3」が出てくるのは、NGです




お断り  説明内容に支障のないところでは、ホームページビルダー18 のハードコピーが使われておりますこと、ご了承下さい

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > 見出し文字 (h1、h2、h3タグ) の大きさ・色を変える
HPB18 | HPB19 コンテンツ一覧
   

© 2014 abhp.net All Rights Reserved.
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP