- Macのホームページ作成ガイド >
- 無料ホームページ作成 >
- ホームページのメインコンテンツ部分の作成 - 完全無料でホームページを作る！
ホームページのメインコンテンツ部分の作成 - 完全無料でホームページを作る！
2011/08/07
このページでは、当サイトで配布している無料テンプレートをベースにして、ページのメインコンテンツの部分の作成について解説しています。
基本的なHTMLとCSSで作成していますので、他のサイトで配布しているテンプレートや、独学で作成されたページに対しても応用できると思います。
また、ダウンロードしたテンプレートの圧縮ファイルを解凍してできたフォルダを、以降「テンプレートフォルダ」と呼びます。
メインセクションの範囲
メインセクションは、テンプレートHTMLソースの以下の部分です。
<div id="content"> <ul id="pan"> <li>ホーム ></li> <li>ホーム</li> </ul> <div id="main"> メインコンテンツ </div> <div id="sidemenu"> サイドメニュー </div> </div>
メインセクションには、メインコンテンツの他に、現在のページの位置を示すパン屑リストや後述するサイドメニューセクションも内包されます。 ここではメインコンテンツ部分にビルボード画像（ユーザーの目を引かせる為の大きな画像）や中見出しなども設置して、メイン部分を整頓する手順を解説します。
ビルボード画像を設置
ページを見たユーザーの目をひく事はもちろん、キャンペーン情報など告知したい情報をビジュアルで見せたい時にもビルボード画像はよく使われます。
ここでは単純にimgタグを使って設置しますが、Ajaxなどを使ってアコーディオン型にしてみたり、いろいろなパターンがありますので、バージョンアップについては後ほど解説します。
<div id="content"> <ul id="pan"> <li>ホーム ></li> <li>ホーム</li> </ul> <div id="main"> <img src="images/bil_img_01.jpg" width="630" height="300" alt="サンプルビルボード画像"> メインコンテンツ </div> <div id="sidemenu"> サイドメニュー </div> </div>
メインセクションはdivの数も多くややこしくなってきますので、設置する位置に気をつけてください。
上記のように<div id="main">の下に設置すれば問題はありませんが、違う場所に設置してしまうと、見た目が崩れてしまったりする場合があります。
中見出しとメインコンテンツのテキストを設置
テキストを中心にしたメインコンテンツを設置する事で、検索エンジンにページの内容が伝わりやすくなります。画像を中心にするとページのテキスト量はどうしても少なくなってしまいますので、できるだけテキスト量は増やしておく方が良いでしょう。
また中見出しを設置して、区切りをつけておくとページも見やすくなります。
ここでは中見出しに「新着情報」を設置してみましょう。
メインコンテンツには新着情報の中身を設置します。
<div id="main">あ <img src="images/bil_img_01.jpg" width="630" height="300" alt="サンプルビルボード画像"> <h2>新着情報</h2> ○/× △△を追加しました<br /> ×/○ □□を公開しました<br /> </div>
<br />というタグが登場しましたが、このタグはテキストを改行するタグです。
文章をメインコンテンツに書いた時などでも、改行したい箇所があれば<br />タグを設置する事で改行できますので、いろんな場面で使えます。
見出しタグの設置順序について
中見出しに<h2>タグを使いました。
ヘッダセクションに使った大見出しタグが<h1>ですので、勘のいい方はもうお分かりでしょう。
見出しタグは<h1>から順番に使っていく必要があるんです。
一応<h6>までHTMLにはありますが、実際には<h3>くらいまでしか使わないと思いますし、無理に使う必要もありません。
また、<h3>の後に<h2>を使っても問題はありません。
見出しの順番については、なかなか難しいので使っても良い順番と、使ってはいけない順番の例をだします。
<h1>→<h2>→<h3> ○ <h1>→<h3>→<h2> × <h1>→<h2>→<h3>→<h2> ○ <h1>→<h2>→<h4>→<h2> ×
この見出しタグの順番はあくまでも「HTMLソースに書かれた順番」です。
ブラウザなどでの見た目の順番ではありません。（見た目の順番はCSSで変える事ができるため）
ここまで見出しタグの順番について書いてきておいて・・・という感じもしますが、実際に順番が正しくなっていなくても、見た目が崩れるとか、SEOで不利になるとかの問題は、まずありません。
それほど気にしなくても大丈夫なのです。
メインコンテンツのカラムを増やすには？
現在の状態ではメインコンテンツは1カラムです。掲載する情報が増えて、整理したいときにはメインコンテンツを2段組にするなどの工夫が必要です。
コンテンツを2段組にする方法については、HTMLを2カラムレイアウトにする方法というページを用意しましたので、そちらのページをご覧ください。
