ここの見出しは<h3>です。
本文の見出しは上記のように<h3>です。リンクを貼るとフォントカラーが#666から#cc6699になり、下線が出ます。
外部CSSのbodyの設定をご覧戴くと分かりますが、全体的なフォントカラーは#666です。
サイドの見出しは<h4>です。ご覧のように背景色が設定されています。リンクを貼ってもフォントカラーは変わりません。
<h1>は看板画像にあるサイト名に使用します。<h2>は説明文です。
<h2>にリンクを使用する場合は、<h2>内の【リンク見本】のようになります。
<h1>のリンクはindexファイル(トップページ)にします。オンマウス時に下線が出ます。
<h1>以外のリンクはすべて、オンマウス時に下線が消えます。
現在、一部サイト外へのリンクを除き、リンク先はすべてindex.htmlになています。
テキストリンクにはタイトルを入れましょう。アクセシビリティ、SEO面のどちらから見てもあったほうが良いです。例えば「HOME」というリンクには「○○サイトホームページ」と入れるようにすると良いでしょう。私の場合、リンクテキストがアルファベットの場合は必ず入れるようにしています。※画像にリンクを貼る場合は代替テキスト(altタグ)を画像に入れるのでtitleの必要はありません。
画像の仕様について
左側サイドメニューに画像を使用する場合、今ある、「沖縄SEO」、のように幅180pxの画像を<p>タグ、<li>タグ内で使ってください。サイドメニューの画像設定は特にしていませんので、これより小さい画像とテキストを同じタグ内で使用する場合、テキストの回りこみの設定が必要です。
看板画像について・・・看板部分の画像は、幅960px、高さ200pxでご用意下さい。画像はフォルダ「images」にtop.jpgの名前で保存します。画像の色調によって、タイトル<h1>と<h2>のフォントカラーを外部CSSで変更してください。
右側の本文コンテンツに画像を使用する場合、
<p>タグ内に使用すると、回り込み左(float : left)、
<p>タグで囲まず画像を配置すると、回り込み右(float : right)になります。
現在、太陽の画像は<h3>「画像の仕様について」内に配置されています。
本来は回り込みの設定を2つ作り、classで指定することでどちらにも使用できるのですが、
ここでは判りやすいように・・・<p>タグの中で使えば左、<p>以外で囲めば右、としています。
※タグで囲まずに<img>のみを使用しても右側に配置されます。
※画像使用のコツとしては、見出しに関連のある画像は<h3>内で右側に配置、<p>タグ内の文章に関連のある画像を左に持ってくると良いでしょう。そして単に右側に配置したい場合は<p>、<h3>タグなどで囲まずに使用します。
こんなの面倒くさい、という方はご自分で設定を変更してください。
看板画像下のメニューバーについて
看板下のメニューで、今開いているページの背景色を変えるには、<li class="open">とします。現在、Profileがそうなっていますので、HTMLで確認してください。※開いているページのリンクは外さずに指定してください。
そのほか、ページでの配色設定はCSSで色々変更してみてください。
このテンプレートは文字コードUTF-8。W3C web標準、HTML4.01、CSS2.1で記述されています。
現段階でAnother HTML-lint gatewayで100点です。