2009年02月19日
Movable Type 4.2
ウイルスバスター2009 無料体験版


10 かんたん相互リンク←随時募集☆

カテゴリ一覧「ブログと画像加工の便利帳」トップページバナーの貼り方





バナーのHTMLタグについて



ウェブログランキング28位(^o^)丿 鬼ブログランキング5位(^o^)丿
バナー  livedoor Blog関連  HP作成支援

バナーのHTMLタグは、基本的に、こんな記述になっています。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<a href="トップページのURL" target="_blank">
<img src="画像のURL"></a><A HREF="トップページのURL">


私はいつも、これをコピーしておいて、
URLの部分だけコピー&ペーストして、使っています。

トップページのURLは、
このブログの場合 http://blog.livedoor.jp/shimomayu0928/ なので、

<a href="http://blog.livedoor.jp/shimomayu0928/" target="_blank">
<img src="画像のURL"></a><A HREF="http://blog.livedoor.jp/shimomayu0928/">


こんなカンジになります。

じゃ、画像のURLって?

 



画像がURLを持つためには、
まず、画像をアップロードする必要があります。

詳しくは、画像をアップロードする方法(livedoor Blog編) を参照ください。

アップロードされたファイルの画像URLを確認するには…

管理画面の「ファイルアップロード」を開くと、
アップロードされた画像の一覧が出てきます。

13_アップロードされたファイル

 

 

で、このファイル名の上で右クリック。

右クリック

 

プロパティを選択します。

プロパティ

 

 

 

 

 

 

この画面で、画像のURLを確認することができます。

画像のURL

 

 

 

 

 

ちなみに、画像ファイル名をWクリックして開くと、
UPされた画像とURLを確認することができます。

バナー画像

 

←こんなカンジ

右クリックが使えないMacでは、
こういうふうに画像を開いてURLを確認するしかないみたい…

すでにUPされた画像の場合は、
画像の上で右クリックしてプロパティを見ると、
画像のURLを確認することができます。

で、このバナーの画像のURLは、

http://livedoor.blogimg.jp/shimomayu0928/imgs/1/4/141f9703.gif?blog_id=1346948


このURLをコピーして、
先ほどの「画像のURL」の部分に貼りつけると

<a href="http://blog.livedoor.jp/shimomayu0928/" target="_blank">
<img src="http://livedoor.blogimg.jp/shimomayu0928/imgs/1/4/141f9703.gif?blog_id=1346948"></a><A HREF="http://blog.livedoor.jp/shimomayu0928/">


このタグをコピーして、
記事投稿画面左下の「HTMLを確認」にチェックを入れて貼りつけると…

こんなカンジです。

でもこれ、画像のまわりに枠線が出てしまっています。

画像のまわりの枠線を消すには…?

<A href="トップページのURL" target=_blank><IMG src="画像のURL" border=0> </A>
<A href="トップページのURL" target=_blank></A>


このように、IMGタグの画像URLの後に「 border=0 」と入力します。

このタグをコピーして、「HTMLタグを確認」にチェックを入れて貼ると…

こんなバナーになります☆
↓↓↓↓↓↓↓↓

  ←クリックして、動作確認してみてください。

バナー作成に関しては、よろしかったら、下記も参照くださいね。

姉妹ブログ 画像加工の便利帳  
       バナーのHTMLタグの構造 
       
シンプルで簡単なバナーを作ってみよう!(2)
       シンプルで簡単なバナーを作ってみよう!(1)

10
相互リンク随時募集!バナーの貼り方について 
 
ブログカスタマイズお役立ち人気ブログ
 
ブログカスタマイズ・アクセスアップ鬼ブログ



トップへ






shimomayu0928 at 15:11│Comments(0)TrackBack(6)livedoor Blog | バナー

トラックバックURL

この記事へのトラックバック

1. バナーのHTMLタグ  [ 画像加工の便利帳 ]   2006年01月13日 13:41
バナーのHTMLタグは、 &lt;a href=&quot;トップページのURL&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;画像のURL&quot;&gt;&lt;/a&gt;&lt;A HREF=&quot;トップページのURL&quot;&gt; …という構成になってます。 トップページのURLは、ご覧の通り。 ...
2. シンプルで簡単なバナーを作ってみよう!(1)  [ 画像加工の便利帳 ]   2006年01月13日 15:50
?今日は、バナーを作ってみましょう。 イラストレータで描いたひよこのイラストを eps保存 たものをフォトショップで開き、 さらにjpegに保存し直したものを使います。 ラスタライズ(ビットマップ化)したこの画像は、 幅   14.38mm 高さ  14.27mm 解...
3. シンプルで簡単なバナーを作ってみよう!(2)  [ 画像加工の便利帳 ]   2006年01月13日 15:50
(5)背景色を塗ります。 ツールパレットの背景色 (右下のブルーに見える四角の方)を クリックして、選択します。 ? (6)好きな色を選択します。 カラーパレットから選択するのが、簡単です。 グラデーション部分を カラーピッカー(スポイトの形...
4. ロゴ・バナーを作る INDEX  [ 画像加工の便利帳 ]   2006年01月13日 15:50
【ロゴ・バナーを作る】 フォトショップでボカシ文字をつくる  New!? イラストレータで影文字をつくる 無料バナー作成ソフト「簡単バナー」 かっこいいバナーが簡単に作れるソフト イラストレータで簡単にかっこいいロゴや画像を作る Photoshopで簡単に...
5. livedoor Blog作成(超初心者)INDEX  [ Blog Beginer's(ブログビギナーズ)−超初心者のための無料ブログ作成講座− ]   2006年04月14日 10:04
画像をアップロードする方法(livedoor Blog編) 画像を使った記事を投稿する(livedoor Blog編) バナーのHTMLタグについて googleアドセンスを個別記事に貼る方法(livedoor Blog編)
6. バナーを貼ってみた  [ パンダのえんがわ ]   2006年06月10日 19:15
久々にPCより更新。 どうしても「反省会だね。」のバナーを貼りたく、色々と検索して思考錯誤したこうなりました。うん、ブログの記事が落下してるね。 これじゃ読みにくいわ。…む蕕 A

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔