サイトタイトル

更新情報

  • 2009年2月1日
    この最新情報の欄には、サイトの更新情報を書き込んでください。
  • 2009年1月20日
    今回から「商品1のページ」「商品2のページ」「商品3のページ」のページを追加した他、サイドメニューにGoogle検索ボックスを付けました。
    検索ボックスのソース内のドメインはお客様のサイトのドメインに書き換えてください。
    (※Google検索でサイト検索ができるようになるには、サイトがGoogleにインデックスされる必要があります)
  • ※RSSのリンクについて
    右下の「当サイトの更新情報をRSSで配信しています」の中のRSSへのリンクには、ダミーで「rss10.xml」というファイル名を割り当てていますが、本番アップ時にはRSS配信を行う際の「RSSフィード」の絶対URL(http://~)に変更してください。
    また、<head></head>にはRSSのタグを挿入するようにしてください。

    「RSS(RSSフィード)」とは、サイトの更新情報をまとめたファイルです。
    RSSをお客様に購読してもらうことで、サイトの更新情報をお客様に通知できるようになります。
    もしRSSフィードを配信しない場合には、RSSのリンクに関する部分は削除して下さい。

当サイトの更新情報はRSSフィードでも配信しています。

ネットビジネス

  1. オンラインカジノで1億円!! 一攫千金を儲ける方法

    自宅に居ながらにして、一瞬で1億円稼ぐことはできるでしょうか?
    それを可能とした事実が.....

  2. 現金自動回収機ミリオンゲッター2009年改正版

    たった一度、貴方のPCへ設置するだけで・・・あとは寝て待って下さい。
    2008年版の質問などをまとめ1から作り直しました。新生ミリオンゲッターです。

  3. 980円ランチ代をペイパル(Paypal)で永遠ともらう方法

    このごろ良く目につく、980円ペイパルとは?簡単にいうと980円のワンコイン情報商材でペイパル(Paypal)での支払いになります。

  4. ゼンキュウレンで時給2万円稼ぐ方法

    このビジネスは広告反響ビジネスというものです。
    1,2,3と順を追って説明させていただきます。.....

  1. 物販で月5万円稼ぐアフィリエイターズ・バイブル
  2. 物販で月5万円稼ぐアフィリエイターズ・バイブル
  3. 物販で月5万円稼ぐアフィリエイターズ・バイブル
  4. 物販で月5万円稼ぐアフィリエイターズ・バイブル

賢威テンプレートを使ったサイト制作では、見出し(h2やh3タグ)+<div class="contents"></div>の組み合わせでページを作ります。

このエリアが一つの「コンテンツブロック」だとします。
「コンテンツブロック」の作り方としては、最初に<h2></h2><h3></h3>などの「見出しタグ」を持ってきます。
そして次に<div class="contents"></div>を挿入します。

<div class="contents"></div>の中には、<p></p>などで囲った文章や、<img>(画像)などを入れていきます。

賢威のHTMLソースでは、すべてのページのコンテンツエリアが、このルールに従って作られています。


<p></p>は「文章の段落」を表すタグで、このタグで囲むと、下の行から少しマージン(空き)をとることができます。検索エンジンと人間、双方が読みやすい文章になりますので、段落はこまめに<p></p>で囲みましょう。

<div class="contents2"></div>という設定もありますが、これは10px分、さらに内側にインデントする設定です。<h3>タグを使った後に使うのがお勧めです。

「画像タグ」を使った一例です。

XHTMLの注意点の画像

上の画像を入れたHTMLソースは下記の通りです。
<p><img src="images/alert.gif" width="500" height="300" alt="XHTMLの注意点の画像" /></p>

<img>タグ内の「src」の中には画像ファイル名を、「alt」の中には画像を説明した文章を入れます。
「width」「height」の中には、それぞれ画像の幅と高さを入れます。

また、画像の周りにテキストを回り込ませない場合は、上記ソースのように<p>タグで囲むようにして下さい。

「引用タグ」を使った一例です。

<blockquote></blockquote>は「文章を他のサイトから引用した時」に使うタグです。
他人の記事を紹介することの多いブログでよく見かけるタグです。

他のサイトから文章を引用した際は、"ネチケット"として、<blockquote>タグを使って引用した文章を囲むようにしましょう。

引用元:京都のSEOコンサルタント松尾のブログ(一例)

引用した際は上記のように「引用元ページへのリンク」も掲載しておきましょう。

「定義タグ」を使った一例です。

定義タグとは何ですか?
「AAAはBBBである」というように、物事を定義する際に使うタグです。
<dl></dl><dt></dt><dd></dd>の3種のタグで構成されます。
下記の例のように、簡単な商品説明や、リンク集のページにも使うことができます。
賢威テンプレートとは何ですか?

「賢威テンプレート」は、SEO教材「賢威」に付属しているホームページテンプレートの愛称です。
2007年1月から販売開始され、数多くのユーザーが使用しています。

巷のホームページテンプレートには無い「賢威独自の仕組み」を使い、SEOに強いサイト制作をバックアップします。

定義タグの中に画像を入れる方法
ダミー画像 このエリアのように、左に回り込ませる画像タグの中にclass="fl-l"という設定を入れてください。
「fl-l」は「float:left」のことです。

「定義タグ」を使ってエリアを左右に並べてみる

エリアを左右に配置する際の注意点
エリアを左右に配置するには、左右のブロックを囲った大きな<div>タグで囲み、その<div>タグの中に「class="clearfix"」という設定を入れます。
「clearfix」はブラウザごとの「float」の解釈が異なるバグを回避する方法です。
「clearfix」を使った際の注意点
「clearfix」は色々な場面で使えますが、この方法を使用すると、DreamWeaverでプレビューした際の表示が崩れることがございます。
賢威は「HTMLエディタで編集→ブラウザで表示確認」という流れでの制作スタイルを編集しておりますので、あらかじめご了承の程、宜しくお願いいたします。
写真を中に入れることも可能です
ダミー画像 画像を左に回り込ませた例です。
左に回り込ませる画像タグの中にclass="fl-l"という設定を入れます。

<p class="fl-c">で囲めば、回り込みを解除することができます。
ちなみに、「fl-l」は「float:left」のこと、「fl-c」は「clear:both」のことです。

写真を中に入れることも可能です
ダミー画像 画像を右に回り込ませた例です。
右に回り込ませる画像タグの中にclass="fl-r"という設定を入れます。

<p class="fl-c">で囲めば、回り込みを解除することができます。
ちなみに、「fl-r」は「float:right」のこと、「fl-c」は「clear:both」のことです。

チェックリストには「リストタグ」を使いましょう。
<ul class="checklist"></ul>を使えば、下記のようなリストが簡単に作れます。

チェックリストの効果を解説!

  • 商品の魅力を項目に分けてまとめることで、情報の整理につながる。
  • チェックリストは訪問者の目に付きやすいため、商品の宣伝を的確かつ効果的にできる。
  • チェックリストの画像には、黒・の4種類の色をご用意。
  • チェックリストの色を変えたい時は、デザイン用CSS内のチェックリストの箇所を編集する。
  • チェックリストの画像には、ご自身のオリジナル画像を使うことも可能。

ノートのような線を引く

<p class="noteline"></p>、もしくは<div class="noteline"></div>で囲むと、囲んだ文章の下にノートのような線を引くことができます。線の色を変えれば、優しい印象のサイトになりますので、お洒落なサイトを作りたいときに使えるテクニックです。
線の色を変えたい場合は「advanced.css」の中の「.noteline」という設定を編集してください。

この方法を使うにあたっては一つ注意点があります。
この方法は「<p></p>タグをブロック要素からインライン要素に変更する」という特殊な方法を使っていますので、<p></p>で囲むととられるはずの、下のブロックからのマージン(空行)がとられません。
もし下のブロックからマージンを空けたいときは、<div class="contents"></div>で括り終えてから、もう一度<div class="contents"></div>で括るようにして下さい。

角丸ボックスを作り、中に文章を書く方法

主要なブラウザすべてで見えるような角丸を作るには、このソースのように、<div>タグを幾重に重ねることになります。

また、角丸部分には画像を割り当てています。

Firefoxの場合は「-moz-border-radius」というCSSを使えば簡単なのですが、他のブラウザでは再現できません。
W3Cが2010年勧告予定の「CSS3」では、角丸を簡単に表現できる「border-radius」という設定が追加されるようです。

その他の便利なタグをご紹介します。

この帯は<h3>タグです。
文字を部分的に装飾したい場合には、下記のように<span>タグを使いましょう。

1、「文字色」を変える

  • <span class="black"></span>で囲むと、文字色を黒く変更することができます。
  • <span class="red"></span>で囲むと、文字色を赤く変更することができます。
  • <span class="blue"></span>で囲むと、文字色を青く変更することができます。
  • <span class="green"></span>で囲むと、文字色を緑に変更することができます。
  • <span class="yellow"></span>で囲むと、文字色を黄色く変更することができます。
  • <span class="navy"></span>で囲むと、文字色を紺色に変更することができます。
  • <span class="gray"></span>で囲むと、文字色を灰色に変更することができます。
  • <span class="orange"></span>で囲むと、文字色をオレンジに変更することができます。
  • <span class="pink"></span>で囲むと、文字色をピンクに変更することができます。
  • <span class="purple"></span>で囲むと、文字色を紫に変更することができます。
  • <span class="olive"></span>で囲むと、文字色を黄土色に変更することができます。
  • <span class="lime">で囲むと、文字色を黄緑に変更することができます。
  • <span class="aqua"></span>で囲むと、文字色を水色に変更することができます。

2、「文字の大きさ」を変える

  • <span class="b"></span>で囲むと、文字を太字にすることができます。
  • <span class="big"></span>で囲むと、文字を「120%」の大きさにすることができます。
  • <span class="big2"></span>で囲むと、文字を「150%」の大きさにすることができます。
  • <span class="big3"></span>で囲むと、文字を「180%」の大きさにすることができます。
  • <span class="small"></span>で囲むと、文字を「80%」の大きさにすることができます。

3、フォントサイズを細かく指定する

  • <span class="f12pt"></span>で囲むと、フォントサイズを「12pt」にすることができます。
  • <span class="f12em"></span>で囲むと、フォントサイズを「1.2em」にすることができます。

4、下線や取消線を引く

  • <span class="underline"></span>で囲むと、文字に下線を引くことができます。
  • <span class="del"></span>で囲むと、文字に取り消し線を引くことができます。

5、文字列を「蛍光ペンのようなボックス」で囲む

  • <span class="box-yellow"></span>で囲むと、文字を黄色いボックスで囲むことができます。
  • <span class="box-aqua"></span>で囲むと、文字に水色のボックスで囲むことができます。
  • <span class="box-gray"></span>で囲むと、文字に水色のボックスで囲むことができます。
  • <span class="box-red"></span>で囲むと、文字に赤色のボックスで囲むことができます。

6、文字列の前にアイコンを付ける(文章が左寄せの際に使用できます)

<p class="caution1"></p>で囲むと、先頭にこの画像が付いた状態で表示されます。

<p class="caution2"></p>で囲むと、先頭にこの画像が付いた状態で表示されます。

<p class="caution3"></p>で囲むと、先頭にこの画像が付いた状態で表示されます。

<p class="caution4"></p>で囲むと、先頭にこの画像が付いた状態で表示されます。

<p class="caution7"></p>で囲むと、先頭にこの画像が付いた状態で表示されます。

<p class="caution8"></p>で囲むと、先頭にこの画像が付いた状態で表示されます。


<p class="caution5"></p>で囲むと、先頭にこの画像が付いた状態で表示されます。

<p class="caution6"></p>で囲むと、先頭にこの画像が付いた状態で表示されます。


<p class="wakaba"></p>で囲むと、先頭に初心者マークががついた状態で表示されます。

<p class="mail"></p>で囲むと、先頭にメールの画像がついた状態で表示されます。

<p class="pdf"></p>で囲むと、先頭にPDFをイメージした画像がついた状態で表示されます。

<p class="zip"></p>で囲むと、先頭にZIPをイメージした画像がついた状態で表示されます。

<p class="rss"></p>で囲むと、先頭にRSSをイメージした画像がついた状態で表示されます。


一行なら文章の終わりにも使えます。<span class="pdf-back"></span>

一行なら文章の終わりにも使えます。<span class="zip-back"></span>

<p class="link-next"></p>や、<p class="link-back"></p>で囲むと、
矢印付きのリンク文字が挿入できます。

<p class="link-next"></p>で囲むと、右寄せの矢印付き文字リンクを作ることができます。


<p class="link-back"></p>で囲むと、左寄せの矢印付き文字リンクを作ることができます。

上記のリンク文字を画像を左右に回り込ませたエリアに使う場合は、
<div class="link-next"></div>と囲みます。

ダミー画像 画像を左に回り込ませた例です。
左に回り込ませる画像タグの中にclass="left"という設定を入れることでも、左に回り込ませることが可能です。
「fl-l」に比べて、下のマージンが少し広くとられます。

ダミー画像 画像を右に回り込ませた例です。
右に回り込ませる画像タグの中にclass="right"という設定を入れることでも、右に回り込ませることが可能です。
「fl-r」に比べて、下のマージンが少し広くとられます。

<h2>には、他に3つのパターンをご用意しております。

<h2>の別のパターンです。<h2 class="p2"></h2>

<h2>の別のパターンです。<h2 class="p3"></h2>

<h2>の別のパターンです。<h2 class="p4"></h2>