HTMLテンプレート【ベースHTML７：フッター部分】
ども、サンデーアマグラマーNorimakiです。
前回に続いて、今回はフッター部分について説明していきます。
フッターのHTMLソースはこちら。
まぁ、難しいところはないですね。
Footer というIDでまずフッター全体を括っています。
そして、Footerの中に要素として以下の項目を入れ込んでいます。
・サイト名、サイトURL
・連絡先（e-mailアドレス）
・テンプレート作者サイトへのリンク
・イラスト提供者サイトへのリンク
この部分を書き換えればOK。
これまで、都合４回に分けてHTML部分の解説をしてきましたが、
難しいことはなかったと思います。
押さえておくべきことは、HTMLソースは４つのパーツからできていて、
まずは、その４つの部分がHTML上でどこに当たるのかを把握すること。
その際の目印は divタグだということ。
４つのパーツが把握できたら、修正したいところを絞っていくこと。
あとは、目的の内容に書き換える。
これだけです。この方法は一般的なテンプレートにも応用できると
思います。テンプレート作者の思想によって、多少の違いはありますが、
div タグによって、パーツに分割するという考え方は通用するでしょう。
こんな感じで見ていくと、今回提示したテンプレートだけではなく、
無料で配布されている他のテンプレートや、有料で販売されている
テンプレートを有効に活用することもできるようになるでしょう。
ということで、今回はこの辺で終了とします。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
前回に続いて、今回はフッター部分について説明していきます。
フッターのHTMLソースはこちら。
<div id="Footer">
copyright(c) 2010.<span class="SiteName"><a href="{$サイトURL}">{$サイトタイトル}</a></span>
<span class="eMail"><a href="mailto:{$e-mail}">{$e-mail}</a></span>
Template by <span class="TempCreator">
<a href="http://usefultoolers.com/">テンミニッツサイトストラテジー</a></span>
Illustrated by <span class="IllustCreator"><a href="{$画像作者サイトURL}">{$画像作者サイト}</a></span>
</div>
</div>
まぁ、難しいところはないですね。
Footer というIDでまずフッター全体を括っています。
そして、Footerの中に要素として以下の項目を入れ込んでいます。
・サイト名、サイトURL
・連絡先（e-mailアドレス）
・テンプレート作者サイトへのリンク
・イラスト提供者サイトへのリンク
この部分を書き換えればOK。
これまで、都合４回に分けてHTML部分の解説をしてきましたが、
難しいことはなかったと思います。
押さえておくべきことは、HTMLソースは４つのパーツからできていて、
まずは、その４つの部分がHTML上でどこに当たるのかを把握すること。
その際の目印は divタグだということ。
４つのパーツが把握できたら、修正したいところを絞っていくこと。
あとは、目的の内容に書き換える。
これだけです。この方法は一般的なテンプレートにも応用できると
思います。テンプレート作者の思想によって、多少の違いはありますが、
div タグによって、パーツに分割するという考え方は通用するでしょう。
こんな感じで見ていくと、今回提示したテンプレートだけではなく、
無料で配布されている他のテンプレートや、有料で販売されている
テンプレートを有効に活用することもできるようになるでしょう。
ということで、今回はこの辺で終了とします。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
HTMLテンプレート【ベースHTML６：サイドバー部分】
ども、サンデーアマグラマーNorimakiです。
前回に続いて、今回はサイドバー部分について説明していきます。
サイドバーのHTMLソースはこちら。
まず、Sidebar というIDでサイドバー全体を括っています。
そのSidebarの中には、
・LeftSidebar
・RightSidebar
のIDがあって、左右のサイドバーを表示させています。
さらに、それぞれのサイドバーの中には、
・Menu
・MenuTitle
・MenuBody
が存在して、メニュータイトル、メニューリンクを表示させています。
メニューが複数存在する場合は、<div class="Menu">～</div>を
複数用意して対応させます。
今回のソースでは、左サイドバーにメニューが２つ、右サイドバーに
メニューを１つ用意しています。
ここを必要に応じて書き換えることになります。
最後の行は色が違っていますが、これは前回の<div id="Contents">に
対応する divタグになります。
ということで、今回はこんな感じで。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
前回に続いて、今回はサイドバー部分について説明していきます。
サイドバーのHTMLソースはこちら。
<div id="Sidebar">
<div id="LeftSidebar">
<div class="Menu">
<div class="MenuTitle">メニュータイトル</div>
<div class="MenuBody">
<ul>
<li><a href="URL">左メニュー１</a></li>
<li><a href="URL">左メニュー２</a></li>
<li><a href="URL">左メニュー３</a></li>
<li><a href="URL">左メニュー４</a></li>
</ul>
</div>
</div>
<div class="Menu">
<div class="MenuTitle">メニュータイトル</div>
<div class="MenuBody">
<ul>
<li><a href="URL">左メニュー１</a></li>
<li><a href="URL">左メニュー２</a></li>
<li><a href="URL">左メニュー３</a></li>
<li><a href="URL">左メニュー４</a></li>
</ul>
</div>
</div>
</div>
<div id="RightSidebar">
<div class="Menu">
<div class="MenuTitle">メニュータイトル</div>
<div class="MenuBody">
<ul>
<li><a href="URL">右メニュー１</a></li>
<li><a href="URL">右メニュー２</a></li>
<li><a href="URL">右メニュー３</a></li>
<li><a href="URL">右メニュー４</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
まず、Sidebar というIDでサイドバー全体を括っています。
そのSidebarの中には、
・LeftSidebar
・RightSidebar
のIDがあって、左右のサイドバーを表示させています。
さらに、それぞれのサイドバーの中には、
・Menu
・MenuTitle
・MenuBody
が存在して、メニュータイトル、メニューリンクを表示させています。
メニューが複数存在する場合は、<div class="Menu">～</div>を
複数用意して対応させます。
今回のソースでは、左サイドバーにメニューが２つ、右サイドバーに
メニューを１つ用意しています。
ここを必要に応じて書き換えることになります。
最後の行は色が違っていますが、これは前回の<div id="Contents">に
対応する divタグになります。
ということで、今回はこんな感じで。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
HTMLテンプレート【ベースHTML５：本文部分】
ども、サンデーアマグラマーNorimakiです。
前回に続いて、今回は本文部分について説明していきます。
本文のHTMLソースはこちら。
まず最初に来る、Contents というブロックがありますが、これで、
次に来る、パンくずリスト、本文、サイドバーを括っています。
今までの解説では、パンくずリストもヘッダー部分に含ませて
いましたが、都合により、このブロックに移動させました。
この部分の構成としては、
・パンくずリスト
・本文
で、成り立っています。
さらに本文は、
・記事タイトル
・記事本文
で構成されて、記事タイトルは h3タグ、記事本文は ItemBodyクラス
で括っています。そして、１記事ごとに Itemクラスで括っています。
ここでは都合２記事分、HTMLソースとして提示しています。
それ以上の記事数が必要の場合は、 <div class="Item">～</div>
を必要な数だけコピペしてください。
ということで、今回はこんな感じで。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
前回に続いて、今回は本文部分について説明していきます。
本文のHTMLソースはこちら。
<div id="Contents">
<div id="Pankuzu">
<ul>
<li class="PL"><a href="URL">HOME</a> > </li>
<li class="PL"><a href="URL">カテゴリ１</a> > </li>
<li class="PL">個別記事１</li>
</ul>
</div>
<div id="Main">
<div class="Item">
<h3>{$記事タイトル１}</h3>
<p class="Itembody">
{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}
</p>
</div>
<div class="Item">
<h3>{$記事タイトル２}</h3>
<p class="Itembody">
{$記事本文２}
</p>
</div>
<div class="Item">
<h3>{$記事タイトル２}</h3>
<p class="Itembody">
{$記事本文２}
</p>
</div>
</div>
まず最初に来る、Contents というブロックがありますが、これで、
次に来る、パンくずリスト、本文、サイドバーを括っています。
今までの解説では、パンくずリストもヘッダー部分に含ませて
いましたが、都合により、このブロックに移動させました。
この部分の構成としては、
・パンくずリスト
・本文
で、成り立っています。
さらに本文は、
・記事タイトル
・記事本文
で構成されて、記事タイトルは h3タグ、記事本文は ItemBodyクラス
で括っています。そして、１記事ごとに Itemクラスで括っています。
ここでは都合２記事分、HTMLソースとして提示しています。
それ以上の記事数が必要の場合は、 <div class="Item">～</div>
を必要な数だけコピペしてください。
ということで、今回はこんな感じで。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
HTMLテンプレート【ベースHTML４：ヘッダー部分】
ども、サンデーアマグラマーNorimakiです。
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。今回はちょいと思うところがあるのでちゃっちゃといきます。
前回、HTMLソースの簡単な解説をしましたが、これまで言ってきたように
ソースは大きく分けて４つのパーツに別れています。繰り返しますが、
・ヘッダー
・本文
・サイドバー
・フッター
この４つです。で、これらを Container という ID で括ってまとめている。
という形になっています。
では早速、ヘッダーを見てみます。
こうなっています。
先ほども説明したとおり、最初の div はコンテンツ全体を
まとめる部分です。
h1タグが Header ブロックから外れていますが、できるだけBody直下に
置きたかったというのがあります。だったら div よりも上に置けって
話になっちゃいますが、ま、今回はこれで行きます。
Headerブロックの中身としては、今までご説明してきたとおりですが、
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
が置かれています。ここは特に難しい部分はないと思います。
リンクの貼り方が分かれば書き換えは可能でしょう。
今までの解説では、グローバルメニューとリンクもHeader内に置く
ということでしたが、諸事情があって Headerブロックからは外しています。
順番としては次に出てくるんですけども。
特にここは問題ないでしょう。先程と同様にリンクが貼ってあるだけです。
具体的なデザインに関しては、スタイルシートが担当なので、そちらに
任せます。
あと、ひとつだけ。
グローバルメニューのID,クラス指定ですが、クラスはそのままで
問題ないのですが、IDについては、どのページを表示しているか
ということを表しています。
ここでは GL3 となっていて、３番目のページを表示しているということを
意味します。それと同時に、グローバルメニューの３番目のリンクだけが
色違いで表示されています。
スクリーンショットをご覧ください。そうなっています。
ここはスタイルシートの担当部分ですが、HTML部分でも用意すべき
ところがあるので取り上げておきました。
とりあえず今回はこんな感じで。
ではでは。
Norimaki。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。今回はちょいと思うところがあるのでちゃっちゃといきます。
前回、HTMLソースの簡単な解説をしましたが、これまで言ってきたように
ソースは大きく分けて４つのパーツに別れています。繰り返しますが、
・ヘッダー
・本文
・サイドバー
・フッター
この４つです。で、これらを Container という ID で括ってまとめている。
という形になっています。
では早速、ヘッダーを見てみます。
<div id="Container">
<h1>{$サイトキーワード}</h1>
<div id="Header">
<h2 class="SiteTitle"><a href="http://........">ここにサイトタイトルを</a></h2>
<p class="SubTitle">ここにサブタイトルを<br>ここにサブタイトルを<br></p>
<p class="SiteExp">ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。ここにサイト説明文を。。</p>
<p class="AfBanner">
<a href="http://....."><img src="./images/banner.jpg"></a></p>
</div>
こうなっています。
先ほども説明したとおり、最初の div はコンテンツ全体を
まとめる部分です。
h1タグが Header ブロックから外れていますが、できるだけBody直下に
置きたかったというのがあります。だったら div よりも上に置けって
話になっちゃいますが、ま、今回はこれで行きます。
Headerブロックの中身としては、今までご説明してきたとおりですが、
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
が置かれています。ここは特に難しい部分はないと思います。
リンクの貼り方が分かれば書き換えは可能でしょう。
今までの解説では、グローバルメニューとリンクもHeader内に置く
ということでしたが、諸事情があって Headerブロックからは外しています。
順番としては次に出てくるんですけども。
<div id="GlobalNavi">
<ul id="GL3">
<li class="GL1"><a href="URL">リスト</a></li>
<li class="GL2"><a href="URL">リスト</a></li>
<li class="GL3"><a href="URL">リスト</a></li>
</ul>
</div>
<div id="Links">
<ul>
<li class="Link1"><a href="URL1">リンク１</a> | </li>
<li class="Link2"><a href="URL2">リンク２</a> | </li>
<li class="Link3"><a href="URL3">リンク３</a></li>
</ul>
</div>
特にここは問題ないでしょう。先程と同様にリンクが貼ってあるだけです。
具体的なデザインに関しては、スタイルシートが担当なので、そちらに
任せます。
あと、ひとつだけ。
グローバルメニューのID,クラス指定ですが、クラスはそのままで
問題ないのですが、IDについては、どのページを表示しているか
ということを表しています。
ここでは GL3 となっていて、３番目のページを表示しているということを
意味します。それと同時に、グローバルメニューの３番目のリンクだけが
色違いで表示されています。
スクリーンショットをご覧ください。そうなっています。
ここはスタイルシートの担当部分ですが、HTML部分でも用意すべき
ところがあるので取り上げておきました。
とりあえず今回はこんな感じで。
ではでは。
Norimaki。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
HTMLテンプレート【ベースHTML３】
ども、サンデーアマグラマーNorimakiです。
現在取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。前回から間が空いてしまいましたが続きを始めましょう。
HTMLソースを見て、手を入れようとしたときに、まずすべきことは
全体像の把握です。
HTMLソースを読み解くには、大体にして div タグを追っていけば、
構造は分かるようになっているはずです。
今回提示したHTMLソースも div タグを追っていくと理解しやすいと
思います。
<head>～</head>に関しては今回は省略します。
こんなもんだと思っておいてください。タイトルタグがありますよ
って事くらいは押さえておきましょう。
で、<body>～</body>に関して説明していきます。
大きく分けて次のような構造になっています。
・Container
・Header
・GlobalNavi
・Links
・Contents
・Pankuzu
・Main
・Item
・Sidebar
・LeftSidebar
・Menu
・MenuTitle
・MenuBody
・RightSidebar
・Menu
・MenuTitle
・MenuBody
・Footer
こんな感じですね。分かりにくいでしょうか。
一番大きな枠（ブロック）として、まず Container という名前をつけた
枠があり、それ以下の内容を、この Container ブロックが囲んでいます。
そして、Headerブロックがあって、ここにヘッダー画像や
サイトタイトルなどが表示されます。
その下にグローバルナビ、リンクがきて、コンテンツに入っていきます。
コンテンツは Contents ブロックで囲み、その中にパンくずリンクと
記事部分とサイドバー部分が入ってきています。
コンテンツ部分が終わると、最後にフッタとして Footer ブロックが
きてフッターを構成します。
という感じで、まずはHTMLの大枠を掴みます。このようにして、
修正したいところがどこのブロックにあるのかをまず始めに把握します。
その上で、修正したいところを探していきます。
ということで、今回はこの辺で。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
現在取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。前回から間が空いてしまいましたが続きを始めましょう。
HTMLソースを見て、手を入れようとしたときに、まずすべきことは
全体像の把握です。
HTMLソースを読み解くには、大体にして div タグを追っていけば、
構造は分かるようになっているはずです。
今回提示したHTMLソースも div タグを追っていくと理解しやすいと
思います。
<head>～</head>に関しては今回は省略します。
こんなもんだと思っておいてください。タイトルタグがありますよ
って事くらいは押さえておきましょう。
で、<body>～</body>に関して説明していきます。
大きく分けて次のような構造になっています。
・Container
・Header
・GlobalNavi
・Links
・Contents
・Pankuzu
・Main
・Item
・Sidebar
・LeftSidebar
・Menu
・MenuTitle
・MenuBody
・RightSidebar
・Menu
・MenuTitle
・MenuBody
・Footer
こんな感じですね。分かりにくいでしょうか。
一番大きな枠（ブロック）として、まず Container という名前をつけた
枠があり、それ以下の内容を、この Container ブロックが囲んでいます。
そして、Headerブロックがあって、ここにヘッダー画像や
サイトタイトルなどが表示されます。
その下にグローバルナビ、リンクがきて、コンテンツに入っていきます。
コンテンツは Contents ブロックで囲み、その中にパンくずリンクと
記事部分とサイドバー部分が入ってきています。
コンテンツ部分が終わると、最後にフッタとして Footer ブロックが
きてフッターを構成します。
という感じで、まずはHTMLの大枠を掴みます。このようにして、
修正したいところがどこのブロックにあるのかをまず始めに把握します。
その上で、修正したいところを探していきます。
ということで、今回はこの辺で。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ