アフィリエイターが 覚 えておくべき HTML 辞 典
著 作 権 について このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です このレポートの 著 作 権 はやまひろに 属 します 著 作 権 者 の 許 可 なく このレポートの 全 部 又 は 一 部 を いかなる 手 段 においても 複 製 転 載 流 用 転 売 等 することを 禁 じます このレポートに 書 かれた 情 報 は 作 成 時 点 での 著 者 の 見 解 等 です 著 者 は 事 前 許 可 を 得 ずに 誤 りの 訂 正 情 報 の 最 新 化 見 解 の 変 更 等 を 行 う 権 利 を 有 します このレポートの 作 成 には 万 全 を 期 しておりますが 万 一 誤 り 不 正 確 な 情 報 等 がありましても 著 者 パートナー 等 の 業 務 提 携 者 は 一 切 の 責 任 を 負 わないことをご 了 承 願 います このレポートを 利 用 することにより 生 じたいかなる 結 果 につきましても 著 者 パートナー 等 の 業 務 提 携 者 は 一 切 の 責 任 を 負 わないことをご 了 承 願 います 推 奨 環 境 このレポートに 記 載 されている URL はクリックできます できない 場 合 は 最 新 の AdobeReader を 下 記 のページより ダウンロードしてください ( 無 料 ) http://www.adobe.co.jp/products/acrobat/readstep2.html
内 容 改 行 タグ <br />... 5 段 落 タグ <p>... 6 文 字 装 飾 タグ <font> <b> <strong>... 8 <font>タグ... 8 <b> <strong>タグ... 10 リンクタグ <a >... 11 イメージ( 画 像 )タグ <img>... 12
ウェブデザイナーほどの 知 識 はアフィリエイターに 必 要 ありませんが ある 程 度 の HTML を 覚 えておけば サイト 作 成 に 幅 が 広 がります と 言 っても 難 しく 考 える 必 要 はありません 最 低 限 の HTML 言 語 さえ 覚 えておけば 大 丈 夫 です 簡 単 に 説 明 すると HTML はサイトの 原 型 を 構 成 するもので CSS はデザイン 的 な 役 割 をするものです HTML でもデザイン 的 な 事 はできますが 最 近 では CSS を 使 うのが 主 流 になっていますが CSS までを 覚 えるのはなかなか 大 変 ですので 本 レポートでは HTML のみを 解 説 します 逆 に 言 うと HTML がわかっていれば ある 程 度 なんでも 対 応 できます (このレポートでは HTML 表 記 を 便 宜 上 タグ と 表 記 します) それでは アフィリエイターが 覚 えておくべき 最 低 限 の HTML 言 語 を 覚 えていきましょう これからお 教 えするタグは コピー&ペースト せずに 全 て 自 分 で 手 入 力 して 覚 えて 下 さい そのほうがしっかり 身 に 付 きます
改 行 タグ <br /> 基 本 中 の 基 本 である HTML として 文 章 の 改 行 に 使 用 する<br />があります (ちなみに<br>でも 大 丈 夫 です) HTML の 場 合 ワープロのように 改 行 しても 実 際 にサイトに 表 示 される 文 章 は 改 行 されません ですから サイトでこのように 表 示 したい 場 合 こんにちは 昨 日 は 親 戚 の 家 に 行 って 来 ました 久 々にいとこに 会 えて とても 楽 しい 一 日 でした HTML では 以 下 のように<br />を 記 述 します こんにちは <br /> 昨 日 は 親 戚 の 家 に 行 って 来 ました <br /> 久 々にいとこに 会 えて とても 楽 しい 一 日 でした <br /> <br />を 入 れ 忘 れると 文 章 がひたすら 横 に 伸 びていきますので 注 意 して 下 さい 無 料 ブログなどでは 改 行 すると 自 動 で<br />が 入 るようになっていますので あまり 意 識 しないと 思 いますが HTML で 直 接 記 述 する 場 合 は 改 行 =<br />と 覚 えておいて 下 さい
段 落 タグ <p> <P>~</P>で 囲 まれた 部 分 がひとつの 段 落 であることを 表 します 一 般 的 なブラウザでは<P>~</P>の 前 後 に 1 行 分 改 行 されます 下 記 のように 表 示 したい 場 合 こんにちは 昨 日 は 親 戚 の 家 に 行 って 来 ました 久 々にいとこに 会 えて とても 楽 しい 一 日 でした いとこは 私 が 知 っている 姿 ではなくなっており なんというか 魔 神 ブウのように 進 化 を 遂 げていました HTML では このように 記 述 します <p>こんにちは </p> <p> 昨 日 は 親 戚 の 家 に 行 って 来 ました <br /> 久 々にいとこに 会 えて とても 楽 しい 一 日 でした </p> <p>いとこは 私 が 知 っている 姿 ではなくなっており<br /> なんというか 魔 神 ブウのように 進 化 を 遂 げていました </p> <br /><br />と 2 回 改 行 タグを 入 れても 見 た 目 は 同 様 に 表 示 されますが 段 落 タグ<p>を 使 ったほうが HTML 構 文 としては 正 しいです
<p>タグには align= という 記 述 を 追 加 することができます これは <p>タグで 括 った 文 字 の 位 置 を 指 定 するタグです <p align= left >あいうえお</p> と 記 述 すると あいうえお <p align= center >あいうえお</p> と 記 述 すると あいうえお <p align= right >あいうえお</p> と 記 述 すると あいうえお このように 左 右 中 央 に 位 置 を 指 定 する 事 ができます
文 字 装 飾 タグ <font> <b> <strong> 装 飾 とは 文 字 の 大 きさ 色 太 字 などを 変 更 する 事 です 文 字 を 赤 色 にしたり 大 きくしたりすれば 自 然 とその 文 章 が 強 調 され 読 者 の 意 識 に 入 りやすくなります <font>タグ <font>タグを 使 えば 文 字 の 色 や 大 きさを 指 定 できます サイト 上 でこのように 表 示 したい 場 合 あいうえおかきくけこ HTML では このように 記 述 します <font color= red >あいうえおかきくけこ</font> この 例 では <font color="red">になっていますが これを <font color="blue">にすれば 青 色 になります より 細 かい 色 にしたい 場 合 は カラーコードを 参 考 にするとよいでしょう 上 記 のような 直 接 的 に 色 の 名 前 で 指 定 するほか 16 進 数 でも 入 力 できます 例 <font color= #ff0033 > 参 考 サイト: http://www.finitojapan.com/cltable.html
では 次 に 文 字 を 大 きくして 色 を 替 えてみましょう このように 表 示 したい 場 合 あいうえおかきくけこ HTML ではこう 書 きます <font color="red" size="5">あいうえおかきくけこ</font> このように size="1~7" のように 数 字 で 大 きさを 指 定 します 数 字 が 大 きいほうが 文 字 も 大 きくなります(1~7 まで) そして ご 覧 頂 いたとおり 同 じ 属 性 のタグは 組 み 合 わせる 事 も 可 能 です その 場 合 は タグの 間 に 半 角 スペースを 入 れます <font color="green" size="2">あいうえおかきくけこ</font> 半 角 スペースを 入 れる
<b> <strong>タグ では 次 に 太 字 にするタグです 文 字 を 太 字 にするには2 種 類 のタグがあります <b> と <strong> です このように 表 示 したい 場 合 あいうえお HTML ではこのように 書 きます <b>あいうえお</b> または <strong>あいうえお</strong> <b>は ただ 太 くするだけですが <strong>は この 文 章 は 重 要 だ という 意 味 も 含 んだ 太 字 です ですから <strong>をあまり 多 用 すると SEO 的 にペナルティを 受 ける 場 合 がありますので 注 意 しましょう
リンクタグ <a > ホームページで 他 のサイトへリンクを 貼 る 事 はとても 多 いです もちろん アフィリエイトでもリンクを 貼 らなければ 収 益 になりませんので 1 番 重 要 な HTML になります <a>から 始 めるタグはリンクを 表 現 します <a href= http://pcsidejob.com >やまひろのブログ</a> このように 記 述 した 場 合 やまひろのブログ の 文 字 部 分 がリンクになり この 部 分 をクリックすると http://pcsidejob.com へジャンプします リンクが 貼 られると サイト 上 ではこのように 青 文 字 アンダーライン 付 きで 表 示 されます(お 使 いのテンプレートによって 異 なる 場 合 があります) やまひろのブログ 上 記 の 記 述 だと 今 見 ているページが そのままリンク 先 のサイトに なってしまいます 自 分 のサイトは 残 しつつ リンク 先 のサイトを 別 に 表 示 したい 場 合 は 下 記 のように 記 述 して 下 さい <a href= http://.com target= _blank >あいうえお</a> これで 新 規 ページ または 新 規 タブでサイトが 開 きます
イメージ( 画 像 )タグ <img> 写 真 やイラストなど 画 像 を 表 示 させるための HTML が<img>タグです 画 像 を 表 示 させるだけでなく 画 像 のサイズや 表 示 場 所 の 調 整 ができます サイト 上 で 画 像 を 表 示 したい 場 合 は このように 書 きます ( 最 後 は 必 ず 半 角 スペースとスラッシュを 入 れます) <img src=.jpg( 画 像 の URL) width= 600 height= 200 /> このように 画 像 ファイル 名 ( 拡 張 子 まで)を 入 力 します Width= は 横 幅 で height= は 縦 幅 になります 横 幅 と 縦 幅 は 入 力 しなくても 画 像 は 表 示 されますが その 場 合 は 画 像 の 実 寸 が 表 示 されますので 注 意 して 下 さい <img>タグは 他 にも alt と title というタグも 追 記 できます <img src=.jpg alt= 画 像 を 表 す 文 章 title= タイトル /> alt に 文 章 を 入 れておけば 何 かしらの 理 由 で 画 像 が 表 示 されない 場 合 画 像 の 代 わりに その 文 章 が 表 示 されます title に 画 像 のタイトルを 入 れておけば 画 像 の 上 にカーソルが 重 なった 時 に そのタイトルが 表 示 されます いわゆる ユーザビリティ が 良 くなりますし 画 像 にもキーワードを 取 り 入 れることによって SEO 的 にも 効 果 が 期 待 できます
<img>は 画 像 の 位 置 も 調 整 できます その 場 合 は align= を 使 います <img src=.jpg align= center /> このように 記 述 すると 画 像 は 真 ん 中 に 表 示 されます align= left は 左 寄 せ align= right は 右 寄 せです アフィリエイトで 使 用 する HTML タグはこれだけ 覚 えておけば 充 分 ですが もっとこうしたい というのがあれば そのつど 検 索 して 調 べてみましょう
アフィリエイト 入 門 準 備 編 完 著 者 :やまひろ ブログ:http://pcsidejob.com/ E-mail:yamasanaf@gmail.com