HTMLヘッダーが完成したので、次は実際にブラウザで表示されるヘッダーの部分を製作したいと思います。僕の好みなの問題かもしれませんが、ヘッダー自体は極々シンプルな作りです。
今更ながらですがテンプレート製作に関する記事は、当分の間スタイルシート（CSS）は無視して書いていきたいと思います。スタイルシート（CSS）に関する部分は個人のデザインの好みがかなりの部分を占めると思いますので、とにかく後回しにしたいと思います。テンプレート全体の構築ができた時点で記事にしていこうと考えてます。
実際このサイトを作った際は、スタイルシートと同時進行でテンプレートを構築していったのですが、記事として公開するにあたって、いったりきたりする内容になるよりは、一旦別ものとして一つずつ公開する方がまとめやすいですし、分かりやすいのではないでしょうか。
今更ながらですがテンプレート製作に関する記事は、当分の間スタイルシート（CSS）は無視して書いていきたいと思います。スタイルシート（CSS）に関する部分は個人のデザインの好みがかなりの部分を占めると思いますので、とにかく後回しにしたいと思います。テンプレート全体の構築ができた時点で記事にしていこうと考えてます。
実際このサイトを作った際は、スタイルシートと同時進行でテンプレートを構築していったのですが、記事として公開するにあたって、いったりきたりする内容になるよりは、一旦別ものとして一つずつ公開する方がまとめやすいですし、分かりやすいのではないでしょうか。
ヘッダー
<h1><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></h1>
<div><$MTBlogDescription$></div>
<h1>として<$mt:BlogName encode_html="1"$>でブログタイトルを表示し、<a href="<$mt:BlogURL$>" accesskey="1">〜</a>で<$mt:BlogName encode_html="1"$>を囲む事により、表示されたブログタイトルにトップページへのリンクを挿入しています。さらに<div>としてブログの説明を<$MTBlogDescription$>で表示するようにしています。<div><$MTBlogDescription$></div>
ヘッダー（オリジナルロゴをタイトルとする場合）
<h1>
<a href="<mt:BlogUrl />"><img src="<mt:BlogUrl />画像ファイルを置いたフォルダ名/画像ファイル" alt="<mt:BlogName />" width="画像横幅" height="画像高さ" /></a>
</h1>
<div><$MTBlogDescription$></div>
先ほどはブログタイトルを文字として表示していましたが、コチラではオリジナルロゴを画像として用意し、タイトルとして表示するコードです。<h1>に<img src="<mt:BlogUrl />画像ファイルを置いたフォルダ名/画像ファイル" alt="<mt:BlogName />" width="画像横幅" height="画像高さ" />としてロゴ画像を指定し、<a href="<$mt:BlogURL$>" accesskey="1">〜</a>で囲む事によって表示されたブログタイトルにトップページへのリンクを挿入しています。赤で書かれている部分は各自の設定内容により変更する必要があります。さらに<div>としてブログの説明を<$MTBlogDescription$>で表示するようにしています。<a href="<mt:BlogUrl />"><img src="<mt:BlogUrl />画像ファイルを置いたフォルダ名/画像ファイル" alt="<mt:BlogName />" width="画像横幅" height="画像高さ" /></a>
</h1>
<div><$MTBlogDescription$></div>
極々シンプルなヘッダーですが以上でヘッダーは終了です。
コチラもモジュールとして扱う事により、変更を加える際に便利になると思います。
コメントする