イヤでもこれだけは使おう! HTML文 - 初心者でも毎月5万円稼ぐブログアフィリエイト


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

イヤでもこれだけは使おう! HTML文

イヤでもこれだけは使おう! HTML文法

アフィリエイトをする上で必要最小限の
HTMLを記載しておきます。

たとえHTMLがきらいでも
これだけは使えるよう練習してみてね。
ブログで使うと結構便利なんですよ。
と言うか、ユーザビリティを考えると
訪問者にやさしいページ作り
欠かせないものばかりです。

よく使うHTML文【目次】
・テキストリンクのHTML
・ブログに画像を表示するHTML
・ブログにリンク付き画像を記載するHTML
・前のページへ戻る HTML
・お気に入りに追加 HTML
コピペして使ってみて!



【このページだけのルール】
赤文字は自分で挿入すること。
ピンク文字は変更してもいいよ。
・2行になっていても、実は1行です。
 改行は入れないでね。




テキストリンクのHTML

<a href="リンク先のURL" target="_blank">リンク先の名前</a>

・自分で挿入する(色)2カ所。
・変更しても良いところ(ピンク色)

_blank」とは
リンク文字をクリックした時に、新しいページで開くか
同じページ(今のページとも言う)で開くかを指定するところです。

「新しいページで開く」⇒ _blank
「同じページで開く」 ⇒ _self
を挿入してください。


通常、ブログで記事を書くときは必要ありませんが、
サイドバーやテンプレートを操作する時には
覚えていた方が便利です。




画像を表示するHTML

<img src="画像URL" width="" height="" alt="画像テキスト" style="border:0" />

・自分で挿入する(色)4カ所。
・変更しても良いところ(ピンク色)

赤文字の部分はブログの
ファイルアップローダーで画像をアップした後
そのデータを見ながら埋めていけば簡単ですよ。

style="border:0"の「0」は枠を表示しない。
「1」を入れると画像に枠が表示されます。




リンク付き画像を記載するHTML

<a href="リンクURL" target="_blank"><img src="画像URL" width="" height="" alt="画像テキスト" style="border:0" /></a>


・自分で挿入する(色)5カ所。
・変更しても良いところ(ピンク色)

赤文字の部分はブログの
ファイルアップローダーで画像をアップした後
そのデータを見ながら埋めていけば簡単ですよ。

_blank」とは
リンク画像をクリックした時に、新しいページで開くか
同じページ(今のページとも言う)で開くかを指定するところです。

「新しいページで開く」⇒ _blank
「同じページで開く」 ⇒ _self
を挿入してください。

style="border:0"の「0」は枠を表示しない。
「1」を入れると画像に枠が表示されます。


覚えておけばブログのサイドバーとかテンプレートに便利ですよ。


<例題>
ブログランキングなどバナーで
どうしても「同じページ」で開いてしまう、
ユーザビリティから見れば「新しいページ」で開く方が良いと思います。


では、やってみます。


このブログの右上に貼ってあります。
人気ブログランキングへ

一度押してみてください。
新しいページで開きますよね、(笑)
(知っていても押してくれてありがとう。)


HTMLを見ると、
<a href="http://blog.with2.net/link.php?1044029"><img src="http://image.with2.net/・・・省略
となっています。


そこで、↓これをある場所へ挿入します。
「 target="_blank"」
(注)"target"の前に半角スペースがあります。(見えません!)


挿入するある場所とは?
<a href="http://blog.with2.net/link.php?1044029"><img src="http://image.with2.net/・・・省略
」印のところです。


入れてみますとこうなります。
<a href="http://blog.with2.net/link.php?1044029" target="_blank"><img src="http://image.with2.net/・・・省略


これで「新しいページ」で開くようになります。



でにあるHTMLに target="_blank"を挿入するだけです。
場所はリンクURLの後ろ「"」の後、「>」の前。
target="_blank"を貼り付けたら、
頭の「t」の前に半角スペースを入れる、です。


(HTML文に target="_blank"の指定が無い場合は、「同じページ」で開きます。
target="_self"を挿入したのと同じ結果になります。)




前のページへ戻る HTML

【テキスト型】

ここではインターネットブラウザの戻るボタンと同じ動きをする
テキスト文「1つ前に戻る」のHTML文です。
サンプル ⇒ 1つ前に戻る


HTMLはこうなります。
<a href="javascript:history.back();" style="text- decoration : none;" target="_self">1つ前に戻る</a>


ピンク文字は変更しても良いところ
「1つ前に戻る」は自由に変えてください。
「BACK」とか「戻る」とか・・・ですね。



【画像型】

インターネットブラウザの戻るボタンと同じ動きをする
画像型サンプル ⇒ 1つ前に戻る

HTMLはこうなります。
<a href="javascript:history.back();" style="text- decoration : none;" target="_self"><img src="画像のURL" width="" height="" alt="1つ前に戻る" style="border:0" /></a>


・自分で挿入する(色)3カ所。
ブログのファイルアップローダーで画像をアップした後
そのデータを見ながら埋めていけば簡単ですよ。

・変更しても良いところ(ピンク色)
「1つ前に戻る」は自由に変えてください。
「BACK」とか「戻る」とか・・・ですね。


フィリ伝次郎がこのページで使っているものと同じです。
ブログ記事を書く度に挿入するのは大変なので、
テンプレートに組み込んでいます。
記事の下に自動で表示されます。

これも訪問者にやさしい考え方です。
どこから来ていても、いつでも元の場所へ戻れる安心感と
わざわざ上の方までカーソルを持って行かなくてもよいこと。




お気に入りに追加 HTML

Internet Explorer用

【ボタン型】
・サンプル > 



・HTMLはこうなります。
<div style="text-align:center;"><INPUT type="button" value="お気に入りに追加" onClick="javascript:window.external.AddFavorite('あなたのURL','ブログ名')" style="border-style:solid; border-width:2px; border-color:#009900; background:#d0ffd0; font-size:10pt; color:#000000"></div>


・自分で挿入する(色)2カ所。
・変更しても良いところ(ピンク色)
タイトル表記 「お気に入りに追加」⇒ ブックマークなど
ボタンの枠の太さ 「border-width:2px;」⇒ 2
ボタンの枠の色  「border-color:#009900;」⇒ #009900
ボタンの背景の色 「background:#d0ffd0;」⇒ #d0ffd0
ボタンの文字の大きさ 「font-size: 10pt;」⇒ 10
ボタンの文字の色 「color:#000000」⇒ #000000



【テキスト型】
・サンプル > お気に入りに追加


・HTMLはこうなります。
<a href="#" onClick="javascript:window.external.AddFavorite('あなたのURL','ブログ名');return false"><font style="font-size: 15px" color="#666666">お気に入りに追加</font></a>


・自分で挿入する(色)2カ所。
・変更しても良いところ(ピンク色)
文字の大きさ 「style="font-size: 15px"」⇒ 15
文字の色   「 color="#666666"」⇒ #666666



アフィリエイター&ブロガーの方の
最小限、知っておきたいHTML文法でした。



関連記事
⇒ サイト作成・記事一覧
関連記事



記事は参考になりましたか?
↓興味のある内容でしたか?↓
人気Blogランキング



1つ前に戻る


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。
アフィリ伝次郎にメールする? あなたの応援に感謝します! ブックマーク 解析タグ
人気ブログランキングへ インフォブログランキング
ブログパーツ

  • SEO
  • loading
  • アフィリエイトのお道具箱
  • SEOブログパーツ
SEO
コメント
非公開コメント

人気ブログランキングへ インフォブログランキング

トラックバック

http://affilitools.blog133.fc2.com/tb.php/13-68d995d1


★ お役に立てましたか?あなたのご支援があれば、明日もハリキって情報をたれ流しまス!!★
人気ブログランキングへ FC2ブログランキング blogram投票ボタン インフォブログランキング

QLOOKアクセス解析 フォセオラミン
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。