HTMLテンプレート【スタイルシート・ヘッダー編】
ども、サンデーアマグラマーNorimakiです。
久しぶりにブログが更新されていたと思ったら業務連絡かよ。
と思った方、すいません。
ということで、テーマに戻ります。テーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。前回まででHTMLの説明をしてきました。
HTMLのソースも提示しました。
ということで、HTML部分の説明は完了です。
あとは、HTMLにどのような、ID・クラスが設定されているかを
押さえて、スタイルシートに反映させるだけです。
HTMLの構造・要素は前回（HTMLテンプレート【コンテンツ書換編】）の
記事で説明したとおりですので、イマイチしっくり来ない。という方は
もう一度、前回の記事を読んでみてください。
で、今回はスタイルシートとHTMLの橋渡しについてです。
ソースを提示しましたので想像は付くかと思います。
しつこいようですが、再度、HTMLの構造を振り返ります。
まず、テンプレートを４つに分けました。
・ヘッダー
・本文
・サイドバー
・フッター
です。
ヘッダーには以下の要素があります。
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
・H1タグ
・グローバルメニュー
・リンク
です。
で、HTMLソースがこうです。Bodyタグ以下になります。
まずは、DivタグとID「Container」で表示部分をグループ化しています。
このグループの中にヘッダ、本文、サイドバー、フッタが所属します。
このグループに所属しないのは背景だけということになります。
そして、次にH1タグが来ています。ここでH1タグのスタイルを当てます。
h1{
font-weight:bold;
color:white;
}
みたいな感じです。
次に、ヘッダーとして、DivタグとID「Header」が来ています。
ここに、
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
が表示されます。
サイトタイトルには、H2タグと「SiteTitle」というクラスが
当てられています。で、リンクも貼られていますので、aタグの
スタイルも設定する必要があります。
次に、サブタイトルとサイト説明文ですが、いずれも、
pタグで囲まれており、サブタイトルが「SubTitle」というクラス、
サイト説明文が「SiteExp」というクラスが当てられています。
で、バナーですが、pタグで囲まれており、「AfBanner」
というクラスが当てられています。さらに、
aタグのスタイルも設定する必要があります。
それぞれ、スタイルシートで設定します。
次に、グローバルナビとリンクですが、予想外に長くなってしまったので、
次回にすることにします。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
久しぶりにブログが更新されていたと思ったら業務連絡かよ。
と思った方、すいません。
ということで、テーマに戻ります。テーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。前回まででHTMLの説明をしてきました。
HTMLのソースも提示しました。
ということで、HTML部分の説明は完了です。
あとは、HTMLにどのような、ID・クラスが設定されているかを
押さえて、スタイルシートに反映させるだけです。
HTMLの構造・要素は前回（HTMLテンプレート【コンテンツ書換編】）の
記事で説明したとおりですので、イマイチしっくり来ない。という方は
もう一度、前回の記事を読んでみてください。
で、今回はスタイルシートとHTMLの橋渡しについてです。
ソースを提示しましたので想像は付くかと思います。
しつこいようですが、再度、HTMLの構造を振り返ります。
まず、テンプレートを４つに分けました。
・ヘッダー
・本文
・サイドバー
・フッター
です。
ヘッダーには以下の要素があります。
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
・H1タグ
・グローバルメニュー
・リンク
です。
で、HTMLソースがこうです。Bodyタグ以下になります。
<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 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>
まずは、DivタグとID「Container」で表示部分をグループ化しています。
このグループの中にヘッダ、本文、サイドバー、フッタが所属します。
このグループに所属しないのは背景だけということになります。
そして、次にH1タグが来ています。ここでH1タグのスタイルを当てます。
h1{
font-weight:bold;
color:white;
}
みたいな感じです。
次に、ヘッダーとして、DivタグとID「Header」が来ています。
ここに、
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
が表示されます。
サイトタイトルには、H2タグと「SiteTitle」というクラスが
当てられています。で、リンクも貼られていますので、aタグの
スタイルも設定する必要があります。
次に、サブタイトルとサイト説明文ですが、いずれも、
pタグで囲まれており、サブタイトルが「SubTitle」というクラス、
サイト説明文が「SiteExp」というクラスが当てられています。
で、バナーですが、pタグで囲まれており、「AfBanner」
というクラスが当てられています。さらに、
aタグのスタイルも設定する必要があります。
それぞれ、スタイルシートで設定します。
次に、グローバルナビとリンクですが、予想外に長くなってしまったので、
次回にすることにします。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
もしかして、PageMakerってツールがアドビさんから出てる？
ども、サンデーアマグラマーNorimakiです。
テンミニッツサイトストラテジーでページ作成ツールを
公開していて、その名前がPageMakerとしているんですが、
ちょっと気になって調べてみたら、なにやら、アドビさんから
PageMakerなる製品が出ているみたいです。
いやはや。
別に狙ったわけじゃないんですけど。
名前変えなきゃいけないかなと。
そんな気もしているわけです。
ちょっと考えます。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
テンミニッツサイトストラテジーでページ作成ツールを
公開していて、その名前がPageMakerとしているんですが、
ちょっと気になって調べてみたら、なにやら、アドビさんから
PageMakerなる製品が出ているみたいです。
いやはや。
別に狙ったわけじゃないんですけど。
名前変えなきゃいけないかなと。
そんな気もしているわけです。
ちょっと考えます。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
HTMLテンプレート【コンテンツ書換編】
ども、サンデーアマグラマーNorimakiです。
やっとテーマに戻ってまいりました。テーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。どういうわけか分かりませんが（？）、前回の記事より
３週間近く経っているではありませんか。
さて、３週間も放ったらかしだったもんで、ちょいと記憶が
曖昧だったりします。なので、復習も兼ねて振り返ってみます。
とりあえず、HTMLテンプレートを４つに分けることから始めました。
その４つとは、以下の４つです。
・ヘッダー
・本文
・サイドバー
・フッター
さらに、それぞれを構成する内容について見てみます。
【ヘッダー】
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
があります。ヘッダー部分からは外れてしまいますが、
H1タグやグローバルメニュー、リンクも大きく分けて、
ヘッダー部分を構成する要素です。
【本文】
・パンくずリスト
・本文
パンくずリストは最初、ヘッダーに属していたんですが、
色々ありまして、本文ブロックに所属してもらうことになりました。
ま、違和感はあるんですが、この際、そんなことは置いておいて。
で、本文には、
・記事タイトル
・記事本文
がありますよと。こんな内容でした。
これらを記事の数だけ繰り返すんですね。
【サイドバー】
・左サイドバー
・右サイドバー
大きく分けて左右に１つずつサイドバーがあります。
で、各サイドバーには、
・メニュータイトル
・メニュー本文
これらを１つのブロックとして、複数のブロックが配置されます。
具体的には、カテゴリだったり、最新の記事だったり、リンク集
だったりするわけです。
スタイルシート的にはもう少し細かい指定が必要なので、
HTMLのDIVタグの数はもう少し増えます。
そういえば、ここで出したHTMLソースにはちょいと
抜けているところがありました。いやいや、本当にすいません。
後で、きちっとしたものを出しますんで勘弁して下さい。
【フッター】
・サイト名、サイトURL
・連絡先（e-mailアドレス）
・テンプレート作者サイトへのリンク
・イラスト提供者サイトへのリンク
ですね。
こんな感じです。
で、テンプレート上で書き換える部分というのは、記事本文以外は
結構文字だけって事も多いわけです。
本文に至っても使うタグというのは、そんなに多いものではなくて、
ここの記事（HTMLパーツからHTMLタグへ 【メイン部分編２】）で
挙げたタグくらいでいいと思うんですよね。
・H1～H6タグ
・pタグ
・ul,liタグ
・ol,liタグ
・hrタグ
・blockquoteタグ
・strongタグ
・emタグ
・uタグ
・sタグ
それほど、こだわったピカピカの本文なんて、そうそう
書くもんじゃ無いでしょうからこれだけあれば十分でしょう。
とりあえず、まとめておきました。
ちょいと抜けている過去の記事を修正してこようかと思ったりします。
ではでは。
Norimaki。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
やっとテーマに戻ってまいりました。テーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。どういうわけか分かりませんが（？）、前回の記事より
３週間近く経っているではありませんか。
さて、３週間も放ったらかしだったもんで、ちょいと記憶が
曖昧だったりします。なので、復習も兼ねて振り返ってみます。
とりあえず、HTMLテンプレートを４つに分けることから始めました。
その４つとは、以下の４つです。
・ヘッダー
・本文
・サイドバー
・フッター
さらに、それぞれを構成する内容について見てみます。
【ヘッダー】
・サイトタイトル
・サブタイトル
・サイト説明文
・バナー
があります。ヘッダー部分からは外れてしまいますが、
H1タグやグローバルメニュー、リンクも大きく分けて、
ヘッダー部分を構成する要素です。
【本文】
・パンくずリスト
・本文
パンくずリストは最初、ヘッダーに属していたんですが、
色々ありまして、本文ブロックに所属してもらうことになりました。
ま、違和感はあるんですが、この際、そんなことは置いておいて。
で、本文には、
・記事タイトル
・記事本文
がありますよと。こんな内容でした。
これらを記事の数だけ繰り返すんですね。
【サイドバー】
・左サイドバー
・右サイドバー
大きく分けて左右に１つずつサイドバーがあります。
で、各サイドバーには、
・メニュータイトル
・メニュー本文
これらを１つのブロックとして、複数のブロックが配置されます。
具体的には、カテゴリだったり、最新の記事だったり、リンク集
だったりするわけです。
スタイルシート的にはもう少し細かい指定が必要なので、
HTMLのDIVタグの数はもう少し増えます。
そういえば、ここで出したHTMLソースにはちょいと
抜けているところがありました。いやいや、本当にすいません。
後で、きちっとしたものを出しますんで勘弁して下さい。
【フッター】
・サイト名、サイトURL
・連絡先（e-mailアドレス）
・テンプレート作者サイトへのリンク
・イラスト提供者サイトへのリンク
ですね。
こんな感じです。
で、テンプレート上で書き換える部分というのは、記事本文以外は
結構文字だけって事も多いわけです。
本文に至っても使うタグというのは、そんなに多いものではなくて、
ここの記事（HTMLパーツからHTMLタグへ 【メイン部分編２】）で
挙げたタグくらいでいいと思うんですよね。
・H1～H6タグ
・pタグ
・ul,liタグ
・ol,liタグ
・hrタグ
・blockquoteタグ
・strongタグ
・emタグ
・uタグ
・sタグ
それほど、こだわったピカピカの本文なんて、そうそう
書くもんじゃ無いでしょうからこれだけあれば十分でしょう。
とりあえず、まとめておきました。
ちょいと抜けている過去の記事を修正してこようかと思ったりします。
ではでは。
Norimaki。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
ワタクシ、辛口でしょうか？
ども、サンデーアマグラマーNorimakiです。
このブログももう少しで読者登録をしてくれている方が
700人を迎えます。ありがたいことです。
さて、そんな読者登録ですが、読者登録をされたことのある方は
ご存知かと思いますが、読者登録の際はメッセージを送ることに
なってるんですよね。
読者登録を頂いた方には、個別にお返事を書けなくて申し訳ありません。
で、その読者登録の際に「辛口ですね」とか「冷めた物言いですね」とか
書かれたメッセージを頂くことがあったりします。
特にツールに関して書いた記事にそんなご意見を頂きます。
悪いイメージをもって言っているのではないことは、
メッセージの内容から分かります。
で、振り返って、胸に手を当てて考えてみたんですが、
アタクシ、そんなに辛口ですか？
そんなつもりは全然無いんですけどね。
ただ単に煽るのが嫌いなだけでして。
このツールすげぇよ。やべぇよ。買わない理由がわかんねぇよ。
と、記事を読んでる人の思考を止めてしまうような、
煽った感じの物の書き方が嫌いなだけです。
説明をしたのに、読者さんが買わない。ということは、
そのツールの魅力を読者さんに伝えきってないのかも
知れませんし、読者さんに個別の買わない理由が
あるのかもしれません。
記事を書いている人は、読者さんじゃないんですから、
買わないとしても、はなから、理由なんて分かるはずも
無いと思うわけですよ。
結局、判断するのは読者さんですから。
だから、買った場合は自己責任。って言えるわけで。
煽っておいて、自己責任ってのもなんだかなぁ。と
思ったりするわけですよ。
もちろん、購入してくれた場合は誠心誠意サポートしまっせ。
というような、購入者さんのレベルを底上げできるような人であれば、
煽って買ってもらうというのも無いことは無いでしょうが。
（．．．と逃げ道を作っておく．．．僕の逃げ道ですよ）
なんて、思ったりするわけです。
ということで、今回もテーマから外れてますが、
次回こそはテーマに沿った記事が書ければと。
思います。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
このブログももう少しで読者登録をしてくれている方が
700人を迎えます。ありがたいことです。
さて、そんな読者登録ですが、読者登録をされたことのある方は
ご存知かと思いますが、読者登録の際はメッセージを送ることに
なってるんですよね。
読者登録を頂いた方には、個別にお返事を書けなくて申し訳ありません。
で、その読者登録の際に「辛口ですね」とか「冷めた物言いですね」とか
書かれたメッセージを頂くことがあったりします。
特にツールに関して書いた記事にそんなご意見を頂きます。
悪いイメージをもって言っているのではないことは、
メッセージの内容から分かります。
で、振り返って、胸に手を当てて考えてみたんですが、
アタクシ、そんなに辛口ですか？
そんなつもりは全然無いんですけどね。
ただ単に煽るのが嫌いなだけでして。
このツールすげぇよ。やべぇよ。買わない理由がわかんねぇよ。
と、記事を読んでる人の思考を止めてしまうような、
煽った感じの物の書き方が嫌いなだけです。
説明をしたのに、読者さんが買わない。ということは、
そのツールの魅力を読者さんに伝えきってないのかも
知れませんし、読者さんに個別の買わない理由が
あるのかもしれません。
記事を書いている人は、読者さんじゃないんですから、
買わないとしても、はなから、理由なんて分かるはずも
無いと思うわけですよ。
結局、判断するのは読者さんですから。
だから、買った場合は自己責任。って言えるわけで。
煽っておいて、自己責任ってのもなんだかなぁ。と
思ったりするわけですよ。
もちろん、購入してくれた場合は誠心誠意サポートしまっせ。
というような、購入者さんのレベルを底上げできるような人であれば、
煽って買ってもらうというのも無いことは無いでしょうが。
（．．．と逃げ道を作っておく．．．僕の逃げ道ですよ）
なんて、思ったりするわけです。
ということで、今回もテーマから外れてますが、
次回こそはテーマに沿った記事が書ければと。
思います。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
ドリームキーワードアフィリエイト（ドリキー）について
ども、サンデーアマグラマーNorimakiです。
何だかんだ言って、まだテーマに戻れていません。
すいません。
先日ご紹介した、ドリームキーワードアフィリエイトという
ツールですが、色々なメルマガ・ブログで紹介されていますね。
ま、当然といえば当然ですね（意味深）
さて、そんなドリームキーワードアフィリエイトですが、
ドリキーを紹介しているメルマガを読んでいると、
面白いことに気が付きます。
多くの人が「こんなサイトができます」と言って、ご自身で
ドリームキーワードアフィリエイトを使用して作ったサイトを
公開してらっしゃいます。
大体のサイトが「やっぱりね」というサイトだったんですが、
その中で、僕が「なるほどねぇ」と唸ったサイトを作られた方が
１人だけいらっしゃいました。
また、「なるほど」と思わされる使い方を説明してくれた方も
１人いました。
これらを見ていると、ドリームキーワードアフィリエイトを
使うのもアリかなと思ってきたわけです。
やはり、ツールを生かすも殺すも使い手次第だなと。
そう思わされた一件です。
もちろん、ドリキーはデータを引っ張ってきているだけなので、
「スパムだ何だ」とは言えなくもないです。
検索エンジン的に云々という話も当然出てくるでしょう。
ただ、そこをどう捕らえるかってことになってきます。
目的のためにドリキーを使うも良し、自分のやり方に
合わないので使用しないのも良し。ってことです。
（あ、．．．ブラックNorimakiが．．．）
そういう僕もABPゴースト２を使ってますからね。
似たようなものです。
結局、使うかどうかは、その人の判断によるんですが、
うまく使えば武器になる。ただ、うまく使わないとゴミにもなる。
そんなツールですね。
使う人を選ぶツールだと思います。
正直に言うと、うまく使う人に使われるツールは幸せだと思います。
僕が無料でツールを配布しているのは、ツールをうまく使って
くれる人のフィードバックが欲しいからということがあります。
そのようなフィードバックがツールをより良い物にしていくからです。
ツール開発者（作者）でさえ思いつかなかった使い方を発見してくれる
ツールユーザーさんはツール作者にとっては、とてもありがたい
存在なんです。
あと、気になるのは楽天ウェブサービスの件ですが、
僕の中で、１つの仮説が出来上がっています。
外れる可能性は大かと思いますが。
(下記追記参照下さい。見事に外れました)
発売前ですし、単なる仮説ですので、今言うことはできませんが、
恐らく購入者と非購入者の差別化。それも、非購入者はその事実に
気づかないで、そのうちツールの存在を忘れてしまう。
という感じになるんだろうなと。仮説が正しいならそうなります。
外側から見た場合は。ですけど。内側から見た場合は、
また別の側面があります。
もう一つ付け加えて言うならば、ABPゴースト２と
ドリームキーワードアフィリエイトの使用目的は違うということです。
この前僕は、ドリキーを買うならABPゴースト２の方が良い。
と書きましたが、あれは間違いでした。訂正します。
両方持ってて良いツールなのかなと。
今はそう思います。
長くなってしまったのでこの辺で。
ではでは。
Norimaki。
【追記】
PS.ドリキーってWebAPI使ってないみたいですね。
登録するのはアフィリエイトIDですし。ちょっと早合点。
なので、仮説はもろくも崩れ去りました（悲）。
．．．．勉強になりました。
が、それならそれで、別の問題も出てくるんですが、
ま、それはそれで気持ち悪いんですけども。
そこら辺は楽天さんに聞くのが一番ですね。
答えてくれるかどうかは分かりませんけど。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
何だかんだ言って、まだテーマに戻れていません。
すいません。
先日ご紹介した、ドリームキーワードアフィリエイトという
ツールですが、色々なメルマガ・ブログで紹介されていますね。
ま、当然といえば当然ですね（意味深）
さて、そんなドリームキーワードアフィリエイトですが、
ドリキーを紹介しているメルマガを読んでいると、
面白いことに気が付きます。
多くの人が「こんなサイトができます」と言って、ご自身で
ドリームキーワードアフィリエイトを使用して作ったサイトを
公開してらっしゃいます。
大体のサイトが「やっぱりね」というサイトだったんですが、
その中で、僕が「なるほどねぇ」と唸ったサイトを作られた方が
１人だけいらっしゃいました。
また、「なるほど」と思わされる使い方を説明してくれた方も
１人いました。
これらを見ていると、ドリームキーワードアフィリエイトを
使うのもアリかなと思ってきたわけです。
やはり、ツールを生かすも殺すも使い手次第だなと。
そう思わされた一件です。
もちろん、ドリキーはデータを引っ張ってきているだけなので、
「スパムだ何だ」とは言えなくもないです。
検索エンジン的に云々という話も当然出てくるでしょう。
ただ、そこをどう捕らえるかってことになってきます。
目的のためにドリキーを使うも良し、自分のやり方に
合わないので使用しないのも良し。ってことです。
（あ、．．．ブラックNorimakiが．．．）
そういう僕もABPゴースト２を使ってますからね。
似たようなものです。
結局、使うかどうかは、その人の判断によるんですが、
うまく使えば武器になる。ただ、うまく使わないとゴミにもなる。
そんなツールですね。
使う人を選ぶツールだと思います。
正直に言うと、うまく使う人に使われるツールは幸せだと思います。
僕が無料でツールを配布しているのは、ツールをうまく使って
くれる人のフィードバックが欲しいからということがあります。
そのようなフィードバックがツールをより良い物にしていくからです。
ツール開発者（作者）でさえ思いつかなかった使い方を発見してくれる
ツールユーザーさんはツール作者にとっては、とてもありがたい
存在なんです。
あと、気になるのは楽天ウェブサービスの件ですが、
僕の中で、１つの仮説が出来上がっています。
外れる可能性は大かと思いますが。
(下記追記参照下さい。見事に外れました)
発売前ですし、単なる仮説ですので、今言うことはできませんが、
恐らく購入者と非購入者の差別化。それも、非購入者はその事実に
気づかないで、そのうちツールの存在を忘れてしまう。
という感じになるんだろうなと。仮説が正しいならそうなります。
外側から見た場合は。ですけど。内側から見た場合は、
また別の側面があります。
もう一つ付け加えて言うならば、ABPゴースト２と
ドリームキーワードアフィリエイトの使用目的は違うということです。
この前僕は、ドリキーを買うならABPゴースト２の方が良い。
と書きましたが、あれは間違いでした。訂正します。
両方持ってて良いツールなのかなと。
今はそう思います。
長くなってしまったのでこの辺で。
ではでは。
Norimaki。
【追記】
PS.ドリキーってWebAPI使ってないみたいですね。
登録するのはアフィリエイトIDですし。ちょっと早合点。
なので、仮説はもろくも崩れ去りました（悲）。
．．．．勉強になりました。
が、それならそれで、別の問題も出てくるんですが、
ま、それはそれで気持ち悪いんですけども。
そこら辺は楽天さんに聞くのが一番ですね。
答えてくれるかどうかは分かりませんけど。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ