セ グ パ パ 塾
103
Ｄ（Ｃ）¥◎ＪＩＳ関係¥◎腰痛関係
¥◎セールスレター関係
¥◎index.html.folder
¥img
「／
public_html／
www.youtsuu1.com/（index.html)
Img
」画像ファイル
セ グ パ パ 塾
104
５
セ グ パ パ 塾
105
●作成したファイルや画像を保存します。
●どこでも保存すればいいというものでは ありません。
ちゃんと整理しておかないと後で探し出せ なくなります。（検索機能の活用も必要）
●画像関係は「 img] フォルダーの中に入れる。
PC への保存の仕方
セ グ パ パ 塾
106
ファイルの保存名（注意！）
ＦＦＦＴＰでサーバーにアップする「フォルダー」や「ファイル」名は
●英文（漢字を使わない） ○ index.html img 1234
●小文字 ○ .jpg img 1234
X .JPG ＩＭＧ １２３４
●スペースは使えない index .html
●使えるのは「．」半角小文字のドットのみと覚えておいて下さい。
Ｘ 「- 」ハイフン、 「_ 」アンダーバー、
「；」カンマ 、 「＠」アットマーク
セ グ パ パ 塾
107
フォルダーの階層
階層の理解は とても大事です。
１階、２階、３階。
今、自分（メインファイル）が どこにいて、
相手（画像ファイル）が どこにいるかということを
認識することです。
フォルダーとファイル！
セ グ パ パ 塾
108
サーバーの
ディレクトリー(ファイル）
ホームページ URL
ルート
ディレクトリー
public_html hhttp://www.youtsuu1.com
(Index.html) public_html/
http://www.youtsuu1.com /index.html
http://www.youtsuu1.com /(index.html)
1つ下の階層 (img)
public_html/
http://www.youtsuu1.com /index.html/img
http://www.youtsuu1.com (/index.html)/img
２つ下の階層 (gif)
public_html/
http://www.youtsuu1.com /index.html/img/oo1.gif
http://www.youtsuu1.com (/index.html) /img/oo1.gif
セ グ パ パ 塾
109
「コンピューター」
↓
「Ｄ（Ｃ）ドライブ」
↓
「◎ＪＩＳ関係」
↓
「◎腰痛関係」
↓
「◎セールスレター関係」
↓
「◎index.html.folder」
↓
「ｉｍｇ」
＊フォルダーが先に表示
↓
その後、個別ファイル が更新日時の古いもの から表示されている。
セ グ パ パ 塾
110
＊「 Inndex.html.folder 」での保存方法
＊普通はフォルダー「img」が先に表示される。
＊「◎index.html.folder」のフォルダーにはセールスレター本文の
「index.html関係」がたくさん保存されている。
更新日時をクリック
↓
古い順と新しい順がクリック毎に入れ代わる
セ グ パ パ 塾
111
「 Index.html 関係」個別ファイルの保存
◎「index.html」だけは、書いても書かなくても良い。
・http://www.youtsuu1.com/index.html http://www.youtsuu1.com/
◎ 「Index.html関係」は、日付を入れて保存。
→ 「Index.081130.html」（インフォトップをメインとする）
「Index.081201.html」
→ 「Index.cart.081130.html」
「Index.japan.081130.html」
◎ ⇒ 「Index.html」⇒FFFTPにてＵＰするのは
これに決めておく。
「Index.cart.html」 「Index.jajan.html」
●こうしておくと古い分が保存できており、後から利用できる。
セ グ パ パ 塾
112
「 img 」フォルダーの中のファイルの保存
●階層：
「コンピューター」
↓
「Ｄ（Ｃ）ドライブ」
↓
「◎ＪＩＳ関係」
↓
「◎腰痛関係」
↓
「◎セールスレター関係」
↓
「◎index.html.folder」
↓
「ｉｍｇ」 「audio」
「Img」は、だんだんと枚数が増えるので
「分類管理」が大事！→「ローマ字・小文字」
●
head.catch.naorimasen.jpg
head.catch.naoruwakeganai.jpg
●
subhead.nhk.gif
●
gazou．sennmonka.gif
写真→●JPEG 画像→●ＧＩＦ
セ グ パ パ 塾
113
６
セ グ パ パ 塾
114
● htm または html→html で統一しよう。
–HyperText Markup Language
● bak ：バックアップファイル。 → 不要。
● zip ： ZIP 形式で圧縮されたファイル。
● lzh ： LHA 形式で圧縮されたファイル。
● exe ：エグゼ：EXE（実行）フォーマット。
拡張子：文字関係
拡張子：文字関係
セ グ パ パ 塾
115
拡張子：画像関係
● gif
– Graphics Interchange Format。CompuServe社が定めた、
– 256色まで扱える静止・アニメ画像ファイル。
● jpg または jpeg
– JPEG形式で圧縮された静止画像ファイル。
● bmp:Windows ビットマップ。
– Windowsの標準的な静止画像ファイル。
● wmv:Windows Media Video 。
– マイクロソフトが開発した動画ファイル。
セ グ パ パ 塾
116
拡張子は標準では 表示していない。
～～～～～～～～～
マイコンピューター
↓ ツール
↓
フォルダーオプション
↓ 表示
●レを付ける→「すべてのファイル とフォルダーを表示する」
●レを外す→「登録されている 拡張子は表示しない」
セ グ パ パ 塾
117
インターネット画面からのソースの表示
セ グ パ パ 塾
118
FFFTP を使わず、ウエブページを見る！
ＰＣの「ファイル」を 既に開いている
①インターネット画面に ドラッグするだけ！
②そのままダブルクリック
ドラッグ
セ グ パ パ 塾
119
７
(一部、中級・上級者向け）
セ グ パ パ 塾
120
著作権
●肖像権（タレント・芸能人の写真・テレビの 画面のキャプチャーした画像など）
●ホームページに記載してある文章
●社団法人日本音楽著作権協会 JASRAC が 管理している各種の音楽・楽曲ソフト・データ
＊無断借用はダメ。本人か関係会社の了解を 得たり、使用料を払えばよい時もある。
＊私的利用は認められる。（商業用がダメ）
セ グ パ パ 塾
121
＊中・上級者向け
スペーサー（スペース画像）の有効利用
・初級者には、耳慣れず、理解しにくいと思います。
・スペーサーというのは、元々は、行間や表（テーブル）のセル内や表と表の 間の余白調整・スペースを開ける時に使うものです。
・スペーサーは、下図のような四角の画像（spacer.gif、縦横1ピクセル）で、
色は透明であり、自由にサイズを調整できます。
・目的の場所にスペーサーを挿入し、後はその必要な サイズに合わせます。
（ここでは分かり易いように、スペーサーに 色を付けてあります。
spacer.gif
最後の
<BR>を 忘れ ないで。
セ グ パ パ 塾
122
⇒ SPACER の利用 （一部ＳＥＯ対策）
・行間は、改行タグを『 <br><br> 』を使うが、
幅が決まっており、微調整できない。
・行間を空ける時は、改行タグを『 <br><br> 』を
2 個以上連続で使用するのは文法上好ましくない。
（⇒ＳＥＯ対策）
・ HTML の論理構造では段落タグ <p> を用いるのが普通。
・スタイルシートやスペーサー GIF で代用する。
・画像には必ず「代替テキスト」（ alt=“ ○○ ”> ）を入れる ようにし、そこにキーワードを入れておくとよい。
「代替テキスト」（例： alt=“腰痛”>）
（⇒ＳＥＯ対策）
セ グ パ パ 塾
123
文字強調（論理強調タグ <strong> の 利用） （⇒ＳＥＯ対策）
強調：① <b>タグ（太字「Ｂ」）
② <em>タグ
③<ｓｔｒｏｎｇ>タグ→「論理強調」
③<strong>論理強調タグ：
・文章構造において、「意味上の論理的な強調」。
・検索エンジンは<strong>タグを重視（相対的）
①<b>タグ（太字「Ｂ」
・本来、「bold」の意味であり、見た目上で文字を太字にする。
② <em>タグ
・①と③の中間の強さ
・文字は斜体
・あまり使わなくてもよい
セ グ パ パ 塾
124
文字強調（論理強調タグ <strong>
の利用） （⇒一部ＳＥＯ対策）
強調：
① <b>タグ（太字「Ｂ」）
② <em>タグ
③<ｓｔｒｏｎｇ>タグ→「論理強調」
お勧め（ＳＥＯ対策）：
③<ｓｔｒｏｎｇ>タグの使用
・ツールバーアイコンからは 太文字「Ｂ」（<b>タグ）のみ。
・<strong>タグはメニューバーから
[書式]→[論理強調]→[ストロング]
セ グ パ パ 塾
125
③ < ｓｔｒｏｎｇ > タグ「論理強調」の注意事項
● <strong> タグの過度の使用禁止！ → キーワードの
重要性が下がる＋スパムと見なされる。
●普通は ① <b> タグ（太字「Ｂ」）を使用し、表現 上だけでなく、話の筋道上、論理的に強調し たい場合だけ、③ < ｓｔｒｏｎｇ > タグ「論理強調」
を限定的に使用する。
●① <b> タグと③ <strong> タグの両方が使われている ことはごく自然。
片方しか使われていないのは不自然。
セ グ パ パ 塾
126
「段落」は検索エンジンが好む！
（⇒一部ＳＥＯ対策）
●段落は一つのテーマについて書かれた数行の文章のこと
●文章には「段落の指定」（paragraph )
→ <P> </P>タグは自動的に付くとが多い。
ソースでチェックするとわかる！
●HTML内の文章は出来る限り段落タグで囲んでおきましょう。
<p>数行の文章を段落タグで囲みましょう。</p>
●<p>段落間に1行分のスペースが空きます</p>
→単語に付けるとか、改行に使うとかはダメ！
●段落は「見出し」の次に重要！
●検索エンジン（巡回ロボット）が好む 検索エンジンは段落<P>タグを目安に 巡回する。
セ グ パ パ 塾
127
付録：参考資料
● http://www.dspt.net/ HTML タグボート
● http://seopro.jp/grc/ SEO ツールラボ
（
Google/Yahoo/MSN 検索順位チェックツールGRC ）● http://www.dspt.net/tools/css_generator/
ＣＧＳ GENR Ａ TOR
（思い通りのスタイルを実現する ちょっとコアなオンラインCSSジェネレーター♪ ）● http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ＨＴＭＬ文法チェック ⇒ＳＥＯ対策
やってみましょう。点数が低いのに驚きます！
でも、わけがわからないと思います（笑）。
セ グ パ パ 塾
128
検索エンジンの分類と登録方法
⇒ＳＥＯ対策
( http://search.web-sun.com/kind/kind.html ）
●├検索エンジン分類と登録方法に付いて
│├ディレクトリー型検索エンジンとは？
→ Yahoo! （ ビジネスエクスプレス は有料審査）、
dmoz、 All About Japan
│├ロボット型検索エンジンとは？⇒「一発太郎」にて登録
→google、goo、excite,infoseek,LYCOS,フレッ シュアイ
│├メタサーチ（メタ検索）エンジンとは？
│├広告型検索サービスとは？
│├ディレクトリー型検索エンジン登録方法
│├ロボット型検索エンジン登録方法
│├検索エンジン登録の確認方法
│└バックリンクの確認方法
セ グ パ パ 塾
129
覚えておくとよいタグ
セ グ パ パ 塾
130
マーキー（注意）表示速度ですが、設定しないほうが無難でしょう。ややこしいですの でほっておきましょう（＾。＾；）
マーキー（Marquee) 文字が動く！
「挿入」
↓
「その他」
↓
「マーキー」
左の画面で設定
（速度は触らない方が 良さそうです）
セ グ パ パ 塾
131