CSSを使ってブログとウェブサイトにナビゲーションバーを作ろう！

bannerやheaderの後にナビゲーションのクラスやIDを作りリストで指定します。 たとえば私のところはこんな感じ・・・

<div class="none"><a href="#main">メニューを読み飛ばす</a></div>
<map id="Navigation" name="Navigation" title="Navigation">
        <ul>
                <li><a href="/" title="Web標準 Webサイト制作  アットスタイル ホーム">ホーム</a></li>
                <li><a href="service.php" title="Web制作">Web制作</a></li>
                <li><a href="blogtemptop.php" title="テンプレート">テンプレート</a></li>
                <li><a href="form.php" title="お問い合わせ">お問い合わせ</a></li>
                <li><a href="http://s36ph.s72.xrea.com/" title="ブログ">ブログ</a></li>
                <li><a href="http://style.jp.land.to/phpbb/index.php" title="フォーラム">フォーラム</a></li>
        </ul>
</map>
<div class="none">ナビゲーション閉じる</div>

スタイルシートで整形すればOK！

#navi  {
        float: left;
        margin: 0;
        padding: 0px;
        width: 100%;
}
#navi ul {
        font-size: 0.7em;
        margin: 0;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #333333;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #333333;
        padding: 0;
        width: 100%;
        float: left;
        list-style: none;
        background: #D2D2D2 url("webimg/background.png") 0% 40% repeat-x;
}
#navi ul li {
        float: left;
        margin: 0;
        padding: 0;
}
#navi a, #navi a:visited {
        display: block;
        padding: 2px 10px;
        margin: 0;
        color: #000;
        text-decoration: none;
        font-weight: normal;
        border: 0;
        border-top: 1px solid #EEEEEE;
        border-left: 1px solid #EEEEEE;
        border-right: 1px solid #333333;
}
#navi a:hover {
        background: url("webimg/over.png") 0% 40% repeat-x;
        border-top: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
}

css.maxdesign.com.au - CSS resources and tutorials for web designers and web developersに迷ってしまうほどたくさんのリストナビゲーションが紹介されています。

お気に入りが見つかるかも・・・

ただいま制作中・・・といってもちょっと時間が空いたので、うちの奥さんのサイトです。

今のサイトは4年ほど前に制作した画像スライス・テーブルレイアウトのため、スタイルシートから全て新作です。

もちろんValid XHTML（1.0）・テーブルは一切なし！です。

細かいところを作りこまないといけません。さらに画像などを追加予定です。
（完成までには、当分かかりそうです・・・）

アクセスビリティの高い Web ページの提案
＊現在、該当ページは公開されていません。

私の個人的なBlogが参考URLとして紹介されていました。私のところはあまり参考にならないのですが、この文書はWebサイトのアクセスビリティについて非常にわかりやすく解説してありますので、ぜひお読みになることをお勧めいたします。

Gene Berg japan様のサイトを5月25日完成・納品いたしました。

XHTML・スタイルシートレイアウト（伸縮2カラム）・フラッシュ・ショッピングカートCGI

MovableTypeのPHP化の設定は以下の手順で行います。

ウェブログの設定＞ウェブログの設定 にて「アーカイブのファイルの拡張子」をphpへ変更。

アーカイブの設定で、Individual Entry Archiveを以下のように変更します。

<$MTArchiveDate format="%Y/%m/%d_%H%M"$>.php

これで年および月別のディレクトリを生成して何日の何時何分のエントリという形式のパーマネントリンクとなります。（/はディレクトリをあらわします。）
全てを再構築。

テンプレートのインデックス・テンプレートの
Main Indexの出力ファイル名：index.php
Master Archive Indexの出力ファイル名：archives.phpに変更。

新規構築の場合は再構築を行えば完了です。

運営中のBlogをPHP化する場合には以下の設定もお忘れなく。

新しいインデックス・テンプレートを作るより、
テンプレートの名前：htaccess
出力ファイル名：htaccess.phpとして
テンプレートの中身に以下を記入します

<MTArchiveList archive_type="Individual">
Redirect permanent /x/archives/<MTEntries><$MTEntryID pad="1"$>.html</MTEntries> <$MTBlogURL$>archives/<$MTArchiveDate format="%Y/%m/%d_%H%M"$>.php
</MTArchiveList>　

再構築すると、htaccess.phpが出来ます。

htaccess.phpをダウンロードし、月別アーカイブやカテゴリーアーカイブの追加記入をしてアップロードします。アップロード後、ファイル名を.htaccessに変更。

全てのhtmlファイルを削除して、終了です・・・

これでPHPとなり、サイドバーやフッターのモジュール化が行えるようになります。