HTMLパーツからHTMLタグへ 【サイドバー編４】
ども、サンデーアマグラマーNorimakiです。
今回はメイン部分の説明に入るはずだったんですが、重大なことを
忘れていまして、再びサイドバー編です。
前回まで、サイドバーのHTMLタグが入る範囲を設定する枠組み
のタグについてお話をしてきました。それがこれです。
<div id="Sidebar">
<div id="LeftSidebar">～</div>
<div id="RightSidebar">～</div>
</div>
で、忘れていた重大なことというのは、このタグの内部に入るHTMLタグの
説明を忘れていたということです。サイドバーに入るタグには、
・メニュータイトル
・メニュー（リンク）
・コンテンツ（文章等）
・メニュー以外のリンク等（ランキングやリンク等）
があると、以前の記事で書きました。これらについて説明します。
実際のところ、メニューは複数あることが通常です。よく見るブログでも、
・最近の記事
・カテゴリ
・月別アーカイブ
など、複数のメニューで構成されています。
そのメニューの枠組みを設定するために、menuクラスを設定します。
<div class="menu">～</div>
これで、各メニューを括ります。これは、右のサイドバーに入るか
左のサイドバーに入るかで、RightSideBarまたはLeftSideBarの
中に配置されます。
そして、よく見るパターンとして、
・メニュータイトル、メニューリンク
・メニュータイトル、コンテンツ（文章）
・その他のリンク（やコンテンツ）
というパターンがあると思います。それぞれのタグを挙げていきます。
先ほどのmenuクラスと合わせて記述します。
■メニュータイトル、メニューリンク
<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">
<p class="MenuContents">
文章コンテンツなど
</p>
</div>
</div>
■その他のリンク（やコンテンツ）
<div class="menu">
<div class="MenuBody">
<p class="MenuContents">
その他コンテンツなど
</p>
</div>
</div>
こんな感じになると思います。
これらを右または左に応じてRightSideBarまたはLeftSideBarの
中に配置するということになります。
とりあえずこんな感じでしょう。
必要に応じて修正します。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
今回はメイン部分の説明に入るはずだったんですが、重大なことを
忘れていまして、再びサイドバー編です。
前回まで、サイドバーのHTMLタグが入る範囲を設定する枠組み
のタグについてお話をしてきました。それがこれです。
<div id="Sidebar">
<div id="LeftSidebar">～</div>
<div id="RightSidebar">～</div>
</div>
で、忘れていた重大なことというのは、このタグの内部に入るHTMLタグの
説明を忘れていたということです。サイドバーに入るタグには、
・メニュータイトル
・メニュー（リンク）
・コンテンツ（文章等）
・メニュー以外のリンク等（ランキングやリンク等）
があると、以前の記事で書きました。これらについて説明します。
実際のところ、メニューは複数あることが通常です。よく見るブログでも、
・最近の記事
・カテゴリ
・月別アーカイブ
など、複数のメニューで構成されています。
そのメニューの枠組みを設定するために、menuクラスを設定します。
<div class="menu">～</div>
これで、各メニューを括ります。これは、右のサイドバーに入るか
左のサイドバーに入るかで、RightSideBarまたはLeftSideBarの
中に配置されます。
そして、よく見るパターンとして、
・メニュータイトル、メニューリンク
・メニュータイトル、コンテンツ（文章）
・その他のリンク（やコンテンツ）
というパターンがあると思います。それぞれのタグを挙げていきます。
先ほどのmenuクラスと合わせて記述します。
■メニュータイトル、メニューリンク
<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">
<p class="MenuContents">
文章コンテンツなど
</p>
</div>
</div>
■その他のリンク（やコンテンツ）
<div class="menu">
<div class="MenuBody">
<p class="MenuContents">
その他コンテンツなど
</p>
</div>
</div>
こんな感じになると思います。
これらを右または左に応じてRightSideBarまたはLeftSideBarの
中に配置するということになります。
とりあえずこんな感じでしょう。
必要に応じて修正します。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
本日メルマガ１号発行します。
ども、サンデーアマグラマーNorimakiです。
メールマガジンの発行準備をしていて、ドタバタしていましたが、
何とか今日、メルマガの第１号を発行できる準備が整いました。
内容をちょっと明かすと、ミニブラウザに新機能を追加することに
決定しました。以前、このブログでもちょろりと触れたことのある
内容ですので推測は出来るかと思います。
メルマガでは、その新機能を追加した開発バージョンをダウンロード
していただけます。
まだ登録されていない方は、こちらから登録していただけます。
よろしければどうぞ。
Norimakiのアフィリエイトツール談義
ではでは。
Norimakiでした。
メールマガジンの発行準備をしていて、ドタバタしていましたが、
何とか今日、メルマガの第１号を発行できる準備が整いました。
内容をちょっと明かすと、ミニブラウザに新機能を追加することに
決定しました。以前、このブログでもちょろりと触れたことのある
内容ですので推測は出来るかと思います。
メルマガでは、その新機能を追加した開発バージョンをダウンロード
していただけます。
まだ登録されていない方は、こちらから登録していただけます。
よろしければどうぞ。
Norimakiのアフィリエイトツール談義
ではでは。
Norimakiでした。
HTMLパーツからHTMLタグへ 【サイドバー編３】
ども、サンデーアマグラマーNorimakiです。
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。前回は、とりあえずということで、実際にサンプルを見て
いただきました。ご覧になっていない方のために、こちらです。
http://usefultoolers.com/magazine/001/columnstyle/
スタイルを変更する選択ボックスがあるんですが、そこを色々いじると
スタイルが変わって、１カラム、２カラム、３カラムに変更されます。
HTML自体は変わっていません。スタイルシートの適用を変えている
だけです。
からくりは単純で、スタイルシートの positon:absolute; を使っている
だけです。これはあまり使いたくなかったんですが、色々考えた末、
自分の能力ではこれしかないなと。
そう思ったので、これを使いました。
ソースもダウンロードできるようにしてありますので、気になる方は
ダウンロードしてみてください。
http://usefultoolers.com/magazine/001/columnstyle/columnstyle.zip
前回も書きましたが、これを使うと、色々とスタイルシートを修正する
必要が出てくる場面に遭遇するのですが、そのときは説明書に詳しく書く
ことで対応したいと思います。
具体的には、サイドバーの高さを内容（メニューなど）によって変更
しなければいけなくなるスタイルもあるということです。全部ではない
ですけど。
そんな感じになってます。
次はメイン部分の説明に入っていきます。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。前回は、とりあえずということで、実際にサンプルを見て
いただきました。ご覧になっていない方のために、こちらです。
http://usefultoolers.com/magazine/001/columnstyle/
スタイルを変更する選択ボックスがあるんですが、そこを色々いじると
スタイルが変わって、１カラム、２カラム、３カラムに変更されます。
HTML自体は変わっていません。スタイルシートの適用を変えている
だけです。
からくりは単純で、スタイルシートの positon:absolute; を使っている
だけです。これはあまり使いたくなかったんですが、色々考えた末、
自分の能力ではこれしかないなと。
そう思ったので、これを使いました。
ソースもダウンロードできるようにしてありますので、気になる方は
ダウンロードしてみてください。
http://usefultoolers.com/magazine/001/columnstyle/columnstyle.zip
前回も書きましたが、これを使うと、色々とスタイルシートを修正する
必要が出てくる場面に遭遇するのですが、そのときは説明書に詳しく書く
ことで対応したいと思います。
具体的には、サイドバーの高さを内容（メニューなど）によって変更
しなければいけなくなるスタイルもあるということです。全部ではない
ですけど。
そんな感じになってます。
次はメイン部分の説明に入っていきます。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
HTMLパーツからHTMLタグへ 【サイドバー編２】
ども、サンデーアマグラマーNorimakiです。
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
ということなんですが、前回、
今までのやり方ではサイドバー部分は上手く行きませんよ
と書きましたが、実はあれから色々やってみて、こんな感じだろうなと
思うものが出来ましたので、ご紹介します。
http://usefultoolers.com/magazine/001/columnstyle/
ドロップダウンボックスで適用するスタイルが変わります。
色々変えていじってみてください。
ということで前言撤回です。
この方法も完全じゃないので、ページごとに調整する必要のある
スタイルシートもありますが、そこら辺は適宜調整してもらうとします。
ちなみにソースはこちら。
とりあえず、今回は今までどおりで良いですよというご報告でした。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
ということなんですが、前回、
今までのやり方ではサイドバー部分は上手く行きませんよ
と書きましたが、実はあれから色々やってみて、こんな感じだろうなと
思うものが出来ましたので、ご紹介します。
http://usefultoolers.com/magazine/001/columnstyle/
ドロップダウンボックスで適用するスタイルが変わります。
色々変えていじってみてください。
ということで前言撤回です。
この方法も完全じゃないので、ページごとに調整する必要のある
スタイルシートもありますが、そこら辺は適宜調整してもらうとします。
ちなみにソースはこちら。
とりあえず、今回は今までどおりで良いですよというご報告でした。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
HTMLパーツからHTMLタグへ 【サイドバー編】
ども、サンデーアマグラマーNorimakiです。
かなり前に終わったフッター編ですが、その後、メルマガ発行準備
などで、間が開いてしまいました。今回からはサイドバー編です。
例の如くおさらいをしておきましょう。
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
でもって、HTMLテンプレートを４つのパーツに分けています。
・ヘッダー
・フッター
・サイドバー
・メイン部分
この４つですね。で、今回はサイドバー編。
で、サイドバーは次の要素に分けられます。
・メニュータイトル
・メニュー（リンク）
・コンテンツ（文章等）
・メニュー以外のリンク等（ランキングやリンク等）
こんな感じなんですが、実際はこれ以外の要素もあったりします。
それをどこまで今回の要素として含めるかということは非常に難しい
問題だったりします。
とりあえず今回は上記の要素について考えてみます。
サイドバーは２カラムの場合は１つですが、３カラムの場合は
２つあるので、それらについて範囲を決定する必要があります。
まず、サイドバー全体の範囲を設定するのに、
<div id="Sidebar">～</div>
こんな感じで設定します。で、２つのサイドバーの範囲を設定
するために、上記のタグの中に次のように設定します。
<div id="LeftSidebar">～</div>
<div id="RightSidebar">～</div>
ということで、これらを合わせて次のような感じになります。
<div id="Sidebar">
<div id="LeftSidebar">～</div>
<div id="RightSidebar">～</div>
</div>
．．．．．となるはずですが、これだとちょいとまずいんですよね。
スタイルシートで２カラム、３カラムなどの段組をする場合、Floatなる
もので段組をするんですが、上記のように、２つのサイドバーを１つの
divタグで括ると、面倒な方法を取らなければいけなくなるんですよね。
というか、僕が上手い方法を知らないだけだと思うんですが。
なので、範囲を設定する枠組みについては「メイン部分」と絡めて
説明することにします。なので、今回はちょいと置いておいて下さい。
今回は「今までのやり方ではサイドバー部分は上手く行きませんよ」
ということをご紹介しました。
スタイルシートで段組ってのが面倒くさい部分の１つですね。
HTMLを変えずに、１カラム、２カラム、３カラムをどう使い分けるのか
ということを次回、ある程度整理してご紹介したいと思います。
実は出来るかどうか、現時点ではまだ分かってなかったりします（汗）。
ではでは。
Norimakiでした。
【追記】
この後色々いじってみて、何とかできそうだということになりました。
HTMLパーツからHTMLタグへ 【サイドバー編２】でご紹介して
います。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
かなり前に終わったフッター編ですが、その後、メルマガ発行準備
などで、間が開いてしまいました。今回からはサイドバー編です。
例の如くおさらいをしておきましょう。
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
でもって、HTMLテンプレートを４つのパーツに分けています。
・ヘッダー
・フッター
・サイドバー
・メイン部分
この４つですね。で、今回はサイドバー編。
で、サイドバーは次の要素に分けられます。
・メニュータイトル
・メニュー（リンク）
・コンテンツ（文章等）
・メニュー以外のリンク等（ランキングやリンク等）
こんな感じなんですが、実際はこれ以外の要素もあったりします。
それをどこまで今回の要素として含めるかということは非常に難しい
問題だったりします。
とりあえず今回は上記の要素について考えてみます。
サイドバーは２カラムの場合は１つですが、３カラムの場合は
２つあるので、それらについて範囲を決定する必要があります。
まず、サイドバー全体の範囲を設定するのに、
<div id="Sidebar">～</div>
こんな感じで設定します。で、２つのサイドバーの範囲を設定
するために、上記のタグの中に次のように設定します。
<div id="LeftSidebar">～</div>
<div id="RightSidebar">～</div>
ということで、これらを合わせて次のような感じになります。
<div id="Sidebar">
<div id="LeftSidebar">～</div>
<div id="RightSidebar">～</div>
</div>
．．．．．となるはずですが、これだとちょいとまずいんですよね。
スタイルシートで２カラム、３カラムなどの段組をする場合、Floatなる
もので段組をするんですが、上記のように、２つのサイドバーを１つの
divタグで括ると、面倒な方法を取らなければいけなくなるんですよね。
というか、僕が上手い方法を知らないだけだと思うんですが。
なので、範囲を設定する枠組みについては「メイン部分」と絡めて
説明することにします。なので、今回はちょいと置いておいて下さい。
今回は「今までのやり方ではサイドバー部分は上手く行きませんよ」
ということをご紹介しました。
スタイルシートで段組ってのが面倒くさい部分の１つですね。
HTMLを変えずに、１カラム、２カラム、３カラムをどう使い分けるのか
ということを次回、ある程度整理してご紹介したいと思います。
実は出来るかどうか、現時点ではまだ分かってなかったりします（汗）。
ではでは。
Norimakiでした。
【追記】
この後色々いじってみて、何とかできそうだということになりました。
HTMLパーツからHTMLタグへ 【サイドバー編２】でご紹介して
います。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ