HTMLパーツからHTMLタグへ 【フッター編】
ども、サンデーアマグラマーNorimakiです。
長らく続いたヘッダー編も終わり、やっとフッター編です。
例の如くおさらいをしておきましょう。
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
でもって、HTMLテンプレートを４つのパーツに分けています。
・ヘッダー
・フッター
・メイン部分
・サイドバー
この４つですね。で、今回はフッター編。
フッターは次の要素に分けられます。
・サイト名（著作権表示）
・連絡先（メールアドレスなど）
・テンプレート作者のサイトへのリンク
・画像作者のサイトへのリンク
とりあえずこんな感じです。
で、ヘッダー編でもやりましたが、このフッター部分（の範囲）を
指定してあげる必要があります。おなじみ div タグです。
<div id="footer">～</div>
これが前準備です。フッター部分の内容はこのタグの中に
書き込んでいくことになります。
あとは、その中にそれぞれの要素を突っ込んであげれば
いいわけです。
ヘッダー部分のときの各種リンクでは li タグを使用しましたが、
ここでは、 li タグは使用しません。
理由は単純に気分の問題です。
上に上げた４つの要素というのは、リストのように
関連し合っているものではないんじゃないかなと、
そう思うんで、 li タグは使用しません。
span タグで良いだろうと。
<div id="footer">
<span class="SiteName">
<a href="URL">サイト名</a>
</span>
<span class="eMail">
<a href="URL">連絡先</a>
</span>
<span class="TempCreator">
<a href="URL">テンプレート作者のサイトへのリンク</a>
</span>
<span class="IllustCreator">
<a href="URL">画像作者のサイトへのリンク</a>
</span>
</div>
こんな感じじゃないかなと思います。
必要に応じて修正します。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
長らく続いたヘッダー編も終わり、やっとフッター編です。
例の如くおさらいをしておきましょう。
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
でもって、HTMLテンプレートを４つのパーツに分けています。
・ヘッダー
・フッター
・メイン部分
・サイドバー
この４つですね。で、今回はフッター編。
フッターは次の要素に分けられます。
・サイト名（著作権表示）
・連絡先（メールアドレスなど）
・テンプレート作者のサイトへのリンク
・画像作者のサイトへのリンク
とりあえずこんな感じです。
で、ヘッダー編でもやりましたが、このフッター部分（の範囲）を
指定してあげる必要があります。おなじみ div タグです。
<div id="footer">～</div>
これが前準備です。フッター部分の内容はこのタグの中に
書き込んでいくことになります。
あとは、その中にそれぞれの要素を突っ込んであげれば
いいわけです。
ヘッダー部分のときの各種リンクでは li タグを使用しましたが、
ここでは、 li タグは使用しません。
理由は単純に気分の問題です。
上に上げた４つの要素というのは、リストのように
関連し合っているものではないんじゃないかなと、
そう思うんで、 li タグは使用しません。
span タグで良いだろうと。
<div id="footer">
<span class="SiteName">
<a href="URL">サイト名</a>
</span>
<span class="eMail">
<a href="URL">連絡先</a>
</span>
<span class="TempCreator">
<a href="URL">テンプレート作者のサイトへのリンク</a>
</span>
<span class="IllustCreator">
<a href="URL">画像作者のサイトへのリンク</a>
</span>
</div>
こんな感じじゃないかなと思います。
必要に応じて修正します。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
自動ツール系について
ども、サンデーアマグラマーNorimakiです。
今回はちょっと世の中にある自動系ツールについて思うところを。
ツールというのは、作業効率を上げるという点で言えば、
有効に活用できれば便利なものですよね。
そんなこともあって、アフィエイト用のツールが販売されて
いるのでしょう。色々ツールが販売されていて、僕も、
色々見てきていますが、使えるもの・それほどでないものが
結構ありました。
で、自動系ツールですが、こんなものがありますね。
・フリーメール取得
・ブログ記事投稿
・ウェブAPIから記事データを取得
・自動ブログ開設
・サイト生成系
実際のところ、メールアドレスなんていうものは、バリュードメインで１つ
ドメインをとって、CatchALL機能を使えば、無尽蔵に作成できますので、
フリーメール取得ツールは、不要といえば不要なんですよね。
知らない人が多いようですが。
ドメインメールで「default」と設定するとOKなんですけど。
「自動ブログ開設」なんていうのも、需要としてはあるでしょうね。
いくつか商品も販売されている（た？）と記憶していますし、
某塾ではクローズドでツールを販売していますし、特典として
そのようなツールを配布されているアフィリエイターの方も
いらっしゃいます。
僕も以前、その手のツールを自分用に作って使っていました。
今はブログの量産というものから離れているので、ホコリを
かぶっていますけれども。
使っていた当時はやはり便利だなとは思いました。
この手のツールに関しては、賛否両論あるのは承知していますが、
必要悪なのかなと。思ったりもします。ゆくゆくは、淘汰される
可能性がある手法かとは思いますが、現時点では有効な面もあって
使われているのでしょう。
量産とまでは行かなくても、ちょっとブログを作りたいと思った時に
ちゃっちゃとブログを作れるのはありがたいとは思います。
ま、MTなどでやんなさいよという声もありますけどね。
ということで、何を言いたかったかというと、今度、自動化の
ツールでも作ってみようかなと。思っているわけです。
スクリプトを組んで動かすものを。それを「ミニブラウザ」に
組み込もうかなと。ま、予定ですけどね。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
今回はちょっと世の中にある自動系ツールについて思うところを。
ツールというのは、作業効率を上げるという点で言えば、
有効に活用できれば便利なものですよね。
そんなこともあって、アフィエイト用のツールが販売されて
いるのでしょう。色々ツールが販売されていて、僕も、
色々見てきていますが、使えるもの・それほどでないものが
結構ありました。
で、自動系ツールですが、こんなものがありますね。
・フリーメール取得
・ブログ記事投稿
・ウェブAPIから記事データを取得
・自動ブログ開設
・サイト生成系
実際のところ、メールアドレスなんていうものは、バリュードメインで１つ
ドメインをとって、CatchALL機能を使えば、無尽蔵に作成できますので、
フリーメール取得ツールは、不要といえば不要なんですよね。
知らない人が多いようですが。
ドメインメールで「default」と設定するとOKなんですけど。
「自動ブログ開設」なんていうのも、需要としてはあるでしょうね。
いくつか商品も販売されている（た？）と記憶していますし、
某塾ではクローズドでツールを販売していますし、特典として
そのようなツールを配布されているアフィリエイターの方も
いらっしゃいます。
僕も以前、その手のツールを自分用に作って使っていました。
今はブログの量産というものから離れているので、ホコリを
かぶっていますけれども。
使っていた当時はやはり便利だなとは思いました。
この手のツールに関しては、賛否両論あるのは承知していますが、
必要悪なのかなと。思ったりもします。ゆくゆくは、淘汰される
可能性がある手法かとは思いますが、現時点では有効な面もあって
使われているのでしょう。
量産とまでは行かなくても、ちょっとブログを作りたいと思った時に
ちゃっちゃとブログを作れるのはありがたいとは思います。
ま、MTなどでやんなさいよという声もありますけどね。
ということで、何を言いたかったかというと、今度、自動化の
ツールでも作ってみようかなと。思っているわけです。
スクリプトを組んで動かすものを。それを「ミニブラウザ」に
組み込もうかなと。ま、予定ですけどね。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
HTMLパーツからHTMLタグへ 【ヘッダー編６】
ども、サンデーアマグラマーNorimakiです。
ヘッダー編もパート６になりまして、たぶん今回でヘッダー編は
最終回です。
まずは、おさらいです。
今は、HTMLテンプレートを４つに分けて、そのうちのヘッダー部分に
ついてお話をしています。
そのヘッダー部分を以下の要素に分けてお話してきました。
・ヘッダー画像
・サイトタイトル
・サブタイトル
・サイトの説明文
・アフィリエイトバナー
・H1タグ
・ナビゲーション（パンくずリスト・グローバルメニュー
のようなもの）
・各種リンク
残すは「各種リンク」のみとなりました。
■ 各種リンク
各種リンクといいましたが、実は取り立てて特別なことをする
わけではなく、前回のナビゲーションとほぼ同じだったりします。
単純にクラス名を異にするだけで終わってしまったりします。
こんな感じです。クラス名は'Links'としましょう。
<div class="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>
こんな感じです。デザインはスタイルシートで設定します。
ということで、今回はこの辺で。
次回からフッターに入っていきます。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
ヘッダー編もパート６になりまして、たぶん今回でヘッダー編は
最終回です。
まずは、おさらいです。
今は、HTMLテンプレートを４つに分けて、そのうちのヘッダー部分に
ついてお話をしています。
そのヘッダー部分を以下の要素に分けてお話してきました。
・ヘッダー画像
・サイトタイトル
・サブタイトル
・サイトの説明文
・アフィリエイトバナー
・H1タグ
・ナビゲーション（パンくずリスト・グローバルメニュー
のようなもの）
・各種リンク
残すは「各種リンク」のみとなりました。
■ 各種リンク
各種リンクといいましたが、実は取り立てて特別なことをする
わけではなく、前回のナビゲーションとほぼ同じだったりします。
単純にクラス名を異にするだけで終わってしまったりします。
こんな感じです。クラス名は'Links'としましょう。
<div class="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>
こんな感じです。デザインはスタイルシートで設定します。
ということで、今回はこの辺で。
次回からフッターに入っていきます。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
HTMLパーツからHTMLタグへ 【ヘッダー編５】
ども、サンデーアマグラマーNorimakiです。
とうとう、ヘッダー編もパート５になってしまいました。
ちゃっちゃと説明できれば良いんですが、中々上手く説明できずに
こんなにかかってしまっています。
さて、前回の続きになるわけですが、どこまで行っていたかというと、
・ヘッダー画像
・サイトタイトル
・サブタイトル
・サイトの説明文
・アフィリエイトバナー
・H1タグ
・ナビゲーション（パンくずリスト・グローバルメニュー
のようなもの）
・各種リンク
このナビゲーションまで行っていました。
次は、各種リンクからなのですが、ちょいと前回の補足があります。
ナビゲーションについてなのですが、次のようなHTMLをご紹介しました。
<div class="クラス名（PanKuzuまたはGlobalNavi）">
<ul>
<li class="PL または GL"><a href="URL">リスト</a></li>
<li class="PL または GL"><a href="URL">リスト</a></li>
<li class="PS または GS"><a href="URL">リスト</a></li>
</ul>
</div>
基本的にはこれで良いんですが、後々ツールでこのテンプレートを使って
サイトを構築しようと考えていまして、この現在のページをあらわす
ナビゲーションを自動的に設定したいなと思っているわけです。
そこで、ツールを使用する場合には、次のように変更します。
まだまだ先の話ではありますが、とりあえず。
<div class="クラス名（PanKuzuまたはGlobalNavi）">
<ul id="PL3">
<li class="PL1"><a href="URL">リスト</a></li>
<li class="PL2"><a href="URL">リスト</a></li>
<li class="PL3"><a href="URL">リスト</a></li>
</ul>
</div>
何をやっているかというと、ツール側で上記HTMLの赤文字の部分を
ページに応じて自動的に設定します。
あとは、スタイルシートで
#PL1 .PL1{ 設定内容 }
#PL2 .PL2{ 設定内容 }
#PL3 .PL3{ 設定内容 }
みたいな感じで、現在のページであることを設定するとOKです。
よくわからないかもしれませんが、とりあえず、そんな方法が
あったなと、この先ツールの話が出てきたときに覚えておいて
いただければと思います。
えー、各種リンクまで行きたかったのですが、長くなってしまったので
今回はこの辺にしておきます。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
とうとう、ヘッダー編もパート５になってしまいました。
ちゃっちゃと説明できれば良いんですが、中々上手く説明できずに
こんなにかかってしまっています。
さて、前回の続きになるわけですが、どこまで行っていたかというと、
・ヘッダー画像
・サイトタイトル
・サブタイトル
・サイトの説明文
・アフィリエイトバナー
・H1タグ
・ナビゲーション（パンくずリスト・グローバルメニュー
のようなもの）
・各種リンク
このナビゲーションまで行っていました。
次は、各種リンクからなのですが、ちょいと前回の補足があります。
ナビゲーションについてなのですが、次のようなHTMLをご紹介しました。
<div class="クラス名（PanKuzuまたはGlobalNavi）">
<ul>
<li class="PL または GL"><a href="URL">リスト</a></li>
<li class="PL または GL"><a href="URL">リスト</a></li>
<li class="PS または GS"><a href="URL">リスト</a></li>
</ul>
</div>
基本的にはこれで良いんですが、後々ツールでこのテンプレートを使って
サイトを構築しようと考えていまして、この現在のページをあらわす
ナビゲーションを自動的に設定したいなと思っているわけです。
そこで、ツールを使用する場合には、次のように変更します。
まだまだ先の話ではありますが、とりあえず。
<div class="クラス名（PanKuzuまたはGlobalNavi）">
<ul id="PL3">
<li class="PL1"><a href="URL">リスト</a></li>
<li class="PL2"><a href="URL">リスト</a></li>
<li class="PL3"><a href="URL">リスト</a></li>
</ul>
</div>
何をやっているかというと、ツール側で上記HTMLの赤文字の部分を
ページに応じて自動的に設定します。
あとは、スタイルシートで
#PL1 .PL1{ 設定内容 }
#PL2 .PL2{ 設定内容 }
#PL3 .PL3{ 設定内容 }
みたいな感じで、現在のページであることを設定するとOKです。
よくわからないかもしれませんが、とりあえず、そんな方法が
あったなと、この先ツールの話が出てきたときに覚えておいて
いただければと思います。
えー、各種リンクまで行きたかったのですが、長くなってしまったので
今回はこの辺にしておきます。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
HTMLパーツからHTMLタグへ 【ヘッダー編４】
ども、サンデーアマグラマーNorimakiです。
一応MTのラスボスも倒したことですので、ちょっと前から始めていた
HTMLテンプレートのHTMLタグのお話を続けようと思います。
まずは、おさらいから。
今回はHTMLテンプレートを４つのパーツに分けています。
・ヘッダー
・フッター
・メイン部分
・サイドバー
この４つです。そして、今やっているのは、ヘッダーの部分。
そして、ヘッダーは次の要素に分けられます。
・ヘッダー画像
・サイトタイトル
・サブタイトル
・サイトの説明文
・アフィリエイトバナー
・H1タグ
・ナビゲーション（パンくずリスト・グローバルメニュー
のようなもの）
・各種リンク
でもってこの前、アフィリエイトバナーまで、書いたところです。
次は、H1タグからです。
■ H1タグ
一昔前は、H1タグをbodyタグ直下に持ってくるのが良し。
とされていたそうですが、今は違うそうです。bodyタグ直下が
悪い（ペナルティを受ける）ということではないそうですが、
もっと良いSEOのやり方があるそうです。
これは賢威情報です。
賢威（テンプレート商材）のバージョン5の発売日が6月15日に正式
決定したということで、気になる方は6月15日発売の賢威をご覧下さい。
賢威
今回は従来のやり方に沿って、H1タグはbodyタグ直下に置くことに
します。
ちなみに、H1タグは１ページに１つしか置かないので、クラスの
設定等は不要と思います。それに、そんなに目立つように表示する
必要もないので。
■ ナビゲーション
これはパンくずリストや、グローバルナビゲーションなんですが、
基本的にはリストタグを使用して表示します。
<ul>
<li><a href="URL">リスト</a></li>
</ul>
みたいな感じですね。で、これにスタイルを適用するんですが、
パンくずリストはクラス名を'PanKuzu'、グローバルナビゲーションは
'GlobalNavi'という感じでつけましょうか。
で、各リストについてもスタイルを設定しておいた方が良い場合が
あると思うので、それぞれ'PL'、'GL'としておきましょう。
さらに、現在表示されているページをあらわすために、'PS','GS'という
クラスも用意しておきましょう(パンくずには必要かどうか微妙ですけど)。
クラス名が２文字の理由は、リストがたくさん出てくる可能性を
考えたからです。たくさんといっても、10個くらいが限度かも
しれませんが、出来るだけ容量を少なくしようという考えです。
で、それらを考慮したうえで。HTMLを書くとすると、
<div class="クラス名（PanKuzuまたはGlobalNavi）">
<ul>
<li class="PL または GL"><a href="URL">リスト</a></li>
<li class="PL または GL"><a href="URL">リスト</a></li>
<li class="PS または GS"><a href="URL">リスト</a></li>
</ul>
</div>
こんな感じじゃないかなぁと。思います。あとで必要に応じて修正します。
これは３つのリンクがあって、３番目のリンクが現在のページだという
ことをあらわしています。
パンくずリストなどは、各リンクの間に ＞ みたいな区切り文字が
入りますね。
長くなってしまったので、今回はこの辺で。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
一応MTのラスボスも倒したことですので、ちょっと前から始めていた
HTMLテンプレートのHTMLタグのお話を続けようと思います。
まずは、おさらいから。
今回はHTMLテンプレートを４つのパーツに分けています。
・ヘッダー
・フッター
・メイン部分
・サイドバー
この４つです。そして、今やっているのは、ヘッダーの部分。
そして、ヘッダーは次の要素に分けられます。
・ヘッダー画像
・サイトタイトル
・サブタイトル
・サイトの説明文
・アフィリエイトバナー
・H1タグ
・ナビゲーション（パンくずリスト・グローバルメニュー
のようなもの）
・各種リンク
でもってこの前、アフィリエイトバナーまで、書いたところです。
次は、H1タグからです。
■ H1タグ
一昔前は、H1タグをbodyタグ直下に持ってくるのが良し。
とされていたそうですが、今は違うそうです。bodyタグ直下が
悪い（ペナルティを受ける）ということではないそうですが、
もっと良いSEOのやり方があるそうです。
これは賢威情報です。
賢威（テンプレート商材）のバージョン5の発売日が6月15日に正式
決定したということで、気になる方は6月15日発売の賢威をご覧下さい。
賢威
今回は従来のやり方に沿って、H1タグはbodyタグ直下に置くことに
します。
ちなみに、H1タグは１ページに１つしか置かないので、クラスの
設定等は不要と思います。それに、そんなに目立つように表示する
必要もないので。
■ ナビゲーション
これはパンくずリストや、グローバルナビゲーションなんですが、
基本的にはリストタグを使用して表示します。
<ul>
<li><a href="URL">リスト</a></li>
</ul>
みたいな感じですね。で、これにスタイルを適用するんですが、
パンくずリストはクラス名を'PanKuzu'、グローバルナビゲーションは
'GlobalNavi'という感じでつけましょうか。
で、各リストについてもスタイルを設定しておいた方が良い場合が
あると思うので、それぞれ'PL'、'GL'としておきましょう。
さらに、現在表示されているページをあらわすために、'PS','GS'という
クラスも用意しておきましょう(パンくずには必要かどうか微妙ですけど)。
クラス名が２文字の理由は、リストがたくさん出てくる可能性を
考えたからです。たくさんといっても、10個くらいが限度かも
しれませんが、出来るだけ容量を少なくしようという考えです。
で、それらを考慮したうえで。HTMLを書くとすると、
<div class="クラス名（PanKuzuまたはGlobalNavi）">
<ul>
<li class="PL または GL"><a href="URL">リスト</a></li>
<li class="PL または GL"><a href="URL">リスト</a></li>
<li class="PS または GS"><a href="URL">リスト</a></li>
</ul>
</div>
こんな感じじゃないかなぁと。思います。あとで必要に応じて修正します。
これは３つのリンクがあって、３番目のリンクが現在のページだという
ことをあらわしています。
パンくずリストなどは、各リンクの間に ＞ みたいな区切り文字が
入りますね。
長くなってしまったので、今回はこの辺で。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ