雑誌・新聞型ブログリンクサイト向上blogコム
バナーの貼り方-ブログ用・サイト掲載用のリンクバナーの貼り方の説明・解説-
ブログやホームページのリンク用のバナーの貼り方、バナーのタグの意味と簡単な構成、リンク枠の縁取りの消し方などについて、パソコン初心者・インターネットビギナーの方の為に解り易く簡単に説明・解説します。
 向上blogコムとはブログリンク登録する登録内容の変更サイトマップ利用規約よくある質問Q&A管理人室バナーの貼り方
リンク参加ブログ募集中
メニュー

スポンサードリンク
本サイトPR
向上blogコムはブログ初心者向けの趣味・資格・生活ブログポータルサイト!「趣味の習い事日記」「スポーツの練習日記」「資格取得・検定試験勉強日記」「ペット日記」など様々な趣味資格体験日記を紹介。
北は北海道札幌から仙台 新潟 宇都宮 東京都内 神奈川横浜 川崎 千葉 埼玉 静岡 神戸 京都 奈良 北九州 宮崎 福岡 鹿児島 沖縄県那覇まで全国47都道府県・市区町村、さらにアジア ヨーロッパ アメリカなど、様々な地域の趣味・資格ブログが満載!日記を読んで、新しい生活を始めよう!

初心者向けの雑誌・新聞型ブログリンク集 向上blogコム

バナーの貼り方・タグの解説・簡単な説明
『日記・ブログを読んで新しい生活を始めよう!』
向上blogコムはブログ初心者向けの趣味・資格・生活ブログのポータルサイト!(Web日記・ブログ専用のリンク集&ブログ新聞サイト!)
「趣味の習い事教室日記」「スポーツの練習日記」「資格取得・検定試験勉強日記」「お仕事日記」など、日本はもちろん世界中の様々な生活日記・趣味資格体験日記を紹介しています。
それぞれの分野で活躍する専門家たちの仕事日記・体験記やユーモア溢れる徒然日記などお薦めの日記が満載!素敵な日記を見つけて新しい趣味や資格・習い事を始めよう! 向上blogコムTopページ

バナーの貼り方

バナー:


タグ: <a href="http://kojo-com.main.jp/"><img src="○○○○" border="0"></a>


こちらがバナーと、バナーを表示する為に必要なタグ(記号や英数字の文字列)です。
この文字列の○○○○部分にバナー画像のURL(バナー画像をブログの画像管理ファイルに保存した際に表示されたURL)を貼り付けるとバナータグが完成します。
(○○○○には「http://〜〜.png」「http://〜〜.jpg」「http://〜〜.gif」などの文字列が入ります。)
完成したバナータグをブログ内の好きなところに貼り付けることでブログ上にバナー画像が表示されます。


う〜ん、いまいちわからない…。
少しバナータグの意味がわからない、もう少し詳しく知りたい方は、下記にバナータグの構成について説明をしていますのでそちらをご参照下さい。
タグの知識があればバナーを貼る為に何が必要なのかなどの大枠がわかりますので、補足としてタグの構成について記載しておきます。
意味が解れば「あ、な〜んだ、そういうことね!」という具合でとても簡単なので是非読んでみてください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



バナーリンクの構成 バナーリンクタグはこの3つのタグで構成されています。

1.リンクタグ <a href=""></a>

2.画像タグ <img src="">

3.ボーダーゼロタグ border="0"



では、バナータグの構成について一つ一つ分解しながら説明していきます。


まずこれがバナーのタグ(文字列)です。
このゴチャゴチャした文字列をブログ内のスペースに貼ることでバナーが表示されます。

<a href="http://kojo-com.main.jp/"><img src="http://kojo-com.main.jp/banner-kojo3000.png" border="0"></a>


一見ゴチャゴチャしていて意味不明な文字列に見えますが、
よーく見ると、バナーは以下の3つのタグで構成されています。

色分けしたのがこちらです↓
<a href="http://kojo-com.main.jp/"><img src="http://kojo-com.main.jp/banner-kojo3000.png" border="0"></a>



ご覧のように、バナータグはこの3つのタグで構成されているのがわかります。

1. <a href="http://kojo-com.main.jp/"></a>

2. <img src="http://kojo-com.main.jp/banner-kojo3000.png">

3. border="0"


では、これからこの3つのタグ(記号や英数字の文字列)について説明していきます。



1.a hrefの説明です。

<a href="http://kojo-com.main.jp/"></a>

これはリンクタグと言います。このタグの""の間にリンク先のURLを入れることでそのサイトへリンクすることができます。
/aの前にリンク先の名前を入れてa hrefで挟むとリンク先の名前でリンクが表示されます。

このように挟みます。
<a href="http://kojo-com.main.jp/">こうじょうコム</a>


そうすると、このように表示されます。

こうじょうコム


これをテキストリンクと言います。
文字(テキスト)でリンクされているので「テキストリンク」。そのままですね。
このテキストリンクの文字の部分(上の例でいうと「こうじょうコム」と表示されている部分)が画像になっているのが
バナーリンクなのです。





2.img srcの説明です。

<img src="">

これは画像タグと言います。""の間に画像のURLを入れることでその画像を表示することができます。

このように""の間に画像のURLを入れます。

<img src="http://kojo-com.main.jp/banner-kojo3000.png">

そうすると、このように表示されます。


この画像とテキストリンクを組み合わせることでバナーリンクを作ります。


・画像の取り込み方
画像にマウスを合わせて右クリックして「名前を付けて画像を保存」でパソコンの画像ファイルに保存します。
パソコンのファイルに保存した画像を、今度はブログの画像管理ファイルに保存します。
※ブログの画像管理方法・画像URLの表示方法については会社によって異なりますので、各会社の方法に従ってください。
※取り込んだ画像を一度ブログの記事に表示させて、その画像を右クリックして「プロパティ」を開くと画像のアドレス(URL)と表示されますので、 それをコピーしてimg src=""のちょんちょんの部分に貼る方法もあります。




3.テキストリンクと画像タグを組み合わせてバナーリンクを完成させる

前項で紹介したテキストリンクと画像タグを組み合わせてバナーリンクを完成させます。

組み合わせるとこのようなタグになります。

<a href="http://kojo-com.main.jp/"><img src="http://kojo-com.main.jp/banner-kojo3000.png"></a>


そうすると、このように表示されます。



あれ、さっきの画像では枠線がなかったのに、バナーリンクにすると枠線が表示されてしまう。
それは、リンクを意味するラインが表示されてしまっているからなんです。

なのでここで登場するのがborder="0"タグです。
では、border="0"タグの説明をしていきます。



3.border="0"の説明です。

border="0"


これはリンクを示す青や紫色の線を消すためのタグです。
ボーダーゼロ、ボーダーがない、線がない…、つまりリンクの枠線が消えるということを意味しています。

border="0"タグをこのように入れます。

<a href="http://kojo-com.main.jp/"><img src="http://kojo-com.main.jp/banner-kojo3000.png" border="0"></a>


「border="0"」とその手前にある「"」の間には半角のスペースを空けてください。半角スペースが正しく空いていないと画像が表示されない場合があります。

そうして表示されたのがこちらです。



※border="0"タグはブログによっては禁止タグに指定されている場合があります。その場合はこのborder="0"タグを入れないでください。



それぞれの役割がわかったところで改めてバナータグを見ると、

<a href="http://kojo-com.main.jp/"><img src="○○○○" border="0"></a>

このように、テキストリンクタグで画像タグを挟んでいるだけなのがわかります。
どうでしょうか、意味がわかるとタグも意外と簡単です。

では、タグの○○○○の部分にブログに取り込んだバナー画像のURLを入れて、タグの全てをブログの貼りたい場所(フリースペースなどが用意してある場合はそちらへ。記事内でも構いません。)に貼ってください。
どうでしょうか、表示されたでしょうか。

説明があまり上手くなくて申し訳ありません…(^^;)。
以上、タグの説明でした。



現在リンク参加ブログ募集中!初心者向けのブログリンク集!!⇒ リンク参加はこちら
トップ リンク登録 サイトマップ よくある質問Q&A 利用規約 管理人室
Copyright © 雑誌・新聞型ブログリンクサイト向上blogコム 2006-2010 All Right Reserved
メールアドレス不要、初めてリンク集に参加される方にお薦めの“初心者向けのブログリンク集”

スポーツ・音楽他 ブログ・カテゴリー一覧
サッカーサッカー観戦フットサル野球野球観戦バスケットボールバレーボールテニスソフトボールマラソン陸上競技水泳トライアスロンゴルフ柔道・剣道・空手他ストリート系ダンスラテンダンスモダン・ジャズダンス社交ダンスチアリーディングタップダンスフラダンスバレエスカッシュスキー・スノーボードラグビーアメリカンフットボールラクロスバドミントンハンドボール卓球弓道・アーチェリーフィギュアスケートプロレス体操・新体操ヨガ・ピラティスエアロビクスウォーキングスポーツクラブアウトドア登山クライミング釣りマリンスポーツヨット・カヌーモータースポーツ格闘技相撲ビリヤードダーツボウリング自転車車・バイク障害者スポーツその他のスポーツスポーツ観戦全般指導・チーム音楽・演奏声楽ピアノエレクトーン管楽器弦楽器打楽器邦楽器・民族楽器作詞・作曲バンド・シンガー劇団・舞台囲碁・将棋鉄道

語学 ブログ・カテゴリー一覧
英語韓国語中国語スペイン語ドイツ語フランス語イタリア語日本語その他の言語

職種・職業別ブログ カテゴリー一覧
作家・ライターアート・デザインファッション芸能活動インストラクタートレーナー・整体公務員医療・看護福祉・介護・保育教育・教師・講師IT関係フード・飲食業通訳・翻訳職人・工芸人獣医・トリマー農業・自然業弁護士・税理士他プログラマー漫画家・イラストレーターファイナンシャルプランナー建築・設計ソムリエカウンセラー大道芸・パフォーマンス経営・自営業美容師・理容師派遣社員起業・転職

資格・スキル ブログ・カテゴリー一覧
運転免許書道・ペン字漢字検定簿記宅建PC・シスアド速読アロマテラピーカラー・色彩フラワーアレンジメントインテリアコーディネート手話・要約筆記ベビーサインその他の資格

子育て ブログ・カテゴリー一覧
マタニティ乳児幼児小学生中学生以上双子未熟児

ペット ブログ・カテゴリー一覧
愛犬チワワパピヨンシーズーヨークシャーテリアダックスフンドポメラニアンプードルマルチーズキャバリアパグフレンチブルドッグボストンテリアミニチュアシュナウザーミニチュアピンシャーペキニーズ豆柴ビーグル小型犬MIX・不詳犬小型犬その他柴犬コーギージャックラッセルテリアアメリカンコッカースパニエル中型犬MIX・不詳犬中型犬その他ゴールデンレトリーバーラブラドールレトリバーシェットランドシープドッグボーダーコリーシェパードシベリアンハスキービズラ大型犬MIX・不詳犬大型犬その他愛猫うさぎフェレットハムスターリスモルモットインコ・文鳥アクアリウム爬虫類・両生類昆虫珍しい動物動物タレント・ペットモデル盲導犬・補助犬

生活・暮らし ブログ・カテゴリー一覧
健康・病気ダイエット・美容自然療法地元紹介海外生活(アジア)オセアニアアメリカ・カナダ南米ヨーロッパアフリカスローライフ恋愛節約・リサイクル懸賞生活旅行・観光地域活動ボランティア前向きに生きる!

-北は北海道札幌から仙台 東京都内 神奈川横浜 千葉 埼玉 静岡 神戸 京都 福岡 沖縄まで全国47都道府県・市区町村の趣味資格ブログを紹介!-
-趣味の習い事や地域の体験教室・スクール・専門学校の入学体験記・資格取得日記・合格体験記・勉強日記・スポーツの練習日記を随時募集中!-