|
|
© 2014 abhp.net All Rights Reserved. | |
HTML 見出しタグ文字（ h1 h2 h3 ・・・ ）の大きさ・色・行間を変える |
HTML 見出しタグ文字（ h1 h2 h3 ・・・ ）の大きさ・色・行間を変えるSEO対策を考えるうえで、<h1>、<h2>タグは重要な意味を持ちます ページの中に、<h1>を１つ、<h2>タグを複数配置するのが有効と言われていますが、実際、<h1>、<h2>等見出しタグを使おうとしたら、文字の大きさがページデザインに合わず、使用をあきらめている方もおられるかと思います ここでは、そんな<h1>、<h2>等見出しタグの文字の大きさ、表示色等の変更方法をご説明します 尚、見出しタグは、重要な順に、<h1> から、<h6>までありますが、指定方法はどれも同じです <h>は、「heading」の意です |
|||||||
ヘッダータグ内に、文字の大きさ、表示色、背景色を記述する＜記述例＞ <head>～</head>タグ内に、以下の様に記述します <head> h1、h2、h3 は、それぞれの見出しタグに対する設定であることを指定しています 各タグの中は、「 ; 」 （セミコロン）で区切って、複数設定できます font-size は、文字の大きさに対する設定で、100% は、表示したい文字の大きさを標準文字サイズに対する比率を指定します ピクセル指定で、例えば、「 12px 」と記述することもできます color: #ff0000; は、文字の色、 background-color: #ffffff; は、文字の背景色で、この場合、それぞれ、赤色、白色となります それぞれ、「 red 」、「 white 」と記述することもできます 見出しタグは、重要なワードであることを示すため、デフォルトで、強調表示（ <strong>タグ指定と等価 ）されます 強調表示されたくないときは、<h3>タグでの記述例の様に、 font-weight : normal; を記述します 見出しタグのマージン（ margin ）、パディング（ padding ）を初期化する見出しタグには、デフォルトで、各タグに応じた、マージン、パディングが設定されているため、妙に行間が空いてしまいます それに合わせて、ホームページをデザインするのも手かと思いますが、面倒な思いをすることも少なくないと思いますので、デフォルト設定を初期化してしまう方法、通常の文字の行間と同じにする方法について、ご説明します h1, h2, h3, h4, h5, h6{ 「 , 」（カンマ）区切りを用いることにより、h1, h2, h3, h4, h5, h6 タグ、まとめて設定できます margin も、padding も、0 、これで通常の文字列と同じになります 見出しタグに限らず、全てのタグを初期化しておきたい時は、 *{ margin: 0; padding : 0; } と書きます 「 * 」（アスタリスク）は、ワイルド文字と言って、全てと言う意味になります ページで行間を指定している場合ページ全体で、行間とかの指定をしてある方は、マージン、パディングの初期化も併せて設定しておきましょう でないと、文字の大きさを変えた際、相乗効果ですごいことになります <style type="text/css"> ホームページビルダーの自動整形について
スタイル（ style ）設定は、上の左の様に、１行にまとめて書いてもいいのですが、ホームページビルダー19 の「ツール」→「オプション」で、「HTMLソースを自動整形する」にチェックが付いている場合（デフォルト）、上の右の様に、改行整形されてしまいます （ご参考） SEO対策についての詳細は、「 SEO対策 SEO（検索エンジン最適化）とは 」をご参照下さい |
|||||||