情報商材アフィエイト

無料ブログで稼ぐ物販アフィリエイトの方法 > スポンサー広告 > css編集でバナーを貼る方法> [ホームページ]ホームページ作成講座 > css編集でバナーを貼る方法

プロフィール

真也~しんや

Author:真也~しんや
プロフィール紹介はこちら

ブログランキング

人気ブログランキングへ

カテゴリ

ソーシャルブックマーク

はてなに追加
MyYahoo!に追加
del.icio.usに追加
livedoorClipに追加

ブックマークプラス by SEO対策

アットルーツ

@roots

月別アーカイブ

2ティアの紹介

最新コメント

スポンサーサイト

--年--月--日(--)

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


人気ブログランキングへ応援お願いします!



真也~しんやにメールしてみる

css編集でバナーを貼る方法

2010年10月15日(金)

みなさんこんばんわ。

進化的アフィリエイター高尾です。

自分が経験してうまくいった方法は落ち着いて説明ができると思います。

今回は「css編集におけるトップバナー画像貼り方」です。

htmlと同様にできると思っていましたが、表記方法が異なるので
苦戦している人もいると思います。

では早速説明に入ります。



人気ブログランキングへ
応援お願いします!

My Yahoo!に追加










まず、アップロードしたいファイルですが、jpg.jpgのどちらでも
かまいません。


どちらも画像ファイルの形式です。

ファイル名をつける時は、直接英数字にしましょう。

次にアップロードする場所ですが、ここがポイントです。

画像などのファイルをアップロードする時は、「img」というフォルダ
に入れてください。

ホームページのパーツなども一緒に入れてある場合がほとんどです。

画像などのファイルを[imgフォルダ」に入れないと、css編集では
うまくいきません。

そういう構成・設定だと思ってください。


imgファイルに収納できれば後は簡単です。


cssファイルを開きます。


このような状態が出てきます。
(タイプによって違いもあることをご了承ください)

#header {
width:800px;
height:160px;
background-image: url(img/top.gif);
position:relative;
background-repeat: no-repeat;
margin: 0px 5px;

これは初期の状態です。

次に、アップロードした画像のURLです。

http://aaa.web.fc2.com/img/pc2-ylw.jpg
だとします。

これをどのように挿入するかというと。

background-image: url(img/top.gif); の部分を変更します。

この時 url という部分はそのままにしておきます

ここにホームページのアドレスを入れるのかと思いますよね。
僕がそうしていました(笑)・・・

続けます!

    正解は  
     ↓
 background-image: url(img/pc2-ylw.jpg);   です。

たったこれだけです。

終わってしまえばあっという間ですが、それまでに大変な道のりが
ある場合もあります。

少し補足を加えます。

先にバナー画像の縦と横幅の大きさを調整してから、
アップロードをしてください。

フリーのソフトやお手持ちのソフトで変更できると思います。

あとは、そのサイズに合わせて

width:800px;
height:160px;

の数字を変更しましょう。


これでバナー画像はしっかり反映されます。

映らなかったら、細かい表示をチェックしましょう。

バナー画像の素材は、ネット上で無料で数多く提供されています。

一度検索で探してみれば、好みのデザインが見つかるかもしれません。


これでcssのバナー画像を編集する方法は分かりましたね。


ご閲覧ありがとうございました。


人気ブログランキングへ
応援お願いします!

My Yahoo!に追加





人気ブログランキングへ応援お願いします!



真也~しんやにメールしてみる

コメント

No title by ノア

はじめまして。
ランキング経由で訪問させていただきました、
ノアと申します。

簡単なHTMLの編集はできても、
CSSまで編集(本当はしたいんだけど)しようとする方ってなかなか少ないと思うんですよね。

こういった記事があるだけでかなり求心力高いと思います。
実際分からずじまいの方は多いと思いますので。

参考&応援ポチです!

2010/10/18(月) 23:17:< %comment_second>
管理者にだけ表示を許可する

トラックバックURL:
この記事にトラックバックする(FC2ブ ログユーザー)

トラックバック

 
結婚情報サポート
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。