メルマガ登録
インフォトップランキング
ブログ生中継

ブログバナーの画像を変更する その2:アフィリエイト入門

magchecker.jpg 【最配布可】 『まぐちぇっかあ』

〜 まぐまぐの代理登録を使わないで
メルマガの読者を増やす方法 〜


もし、あなたが、

「リスト取りのためのプレゼントはあるのに、
まぐまぐの代理登録費用は高すぎて・・・。」

と一度でも考えたことがあるなら、

まぐまぐの代理登録を使わずに、
まぐまぐ以外のメール配信システムも使わずに、
ほったらかしで、
メルマガの読者を増やす方法があるのですが・・・。


つづきを読む

ブログバナーの画像を変更する その2

インターネットにはたくさんの素敵な無料素材があります。



もちろん、お手持ちの画像で
あなたのブログのコンセプトや雰囲気に合ったものがあれば、
それを使えば、まさしくあなただけのブログになるのですが、
もしなかったら、たとえば、こういったところからもらって来ることもできます。

「素材の庭園」
 → http://potepote.heya.jp/

「Egg*Station」
 → http://www.crystalcolor.net/station/

「EyesPic フリー画像素材」
 → http://eyes-art.com/pic/

「+++ Acorn +++」
 → http://www.aconus.com/~akirin/index.html



その他、無料素材のリンク集

 → http://sozai.b-tama.com/



※それぞれのサイトの利用規約をよく確認したうえでご使用ください。
 加工を禁じたりしているところもありますので。



さて、こちらのサイトで↓
http://eyes-art.com/pic/

このような画像を見つけましたので、
これをバナーに貼り付けてみたいと思います。

http://vol02.eyes-art.com/0695.html

http://vol01.eyes-art.com/0799.html

http://vol01.eyes-art.com/0787.html

(もちろん、他にいい画像があれば、そちらを使ってください。)






これからご紹介する方法は、
2つ以上の画像をバナーに使いたいときに、
このような画像を作って、

seesaa408.jpg



それをバナーに貼り付けるという方法です。



白色のバックに画像を複数貼り付ける方法です。



それぞれの写真を、以前作った「マイドキュメント」の中の、
「アフィリエイト入門」というフォルダに保存しておいてください。



保存の仕方は、



写真の上で右クリックして
[名前を付けて画像を保存]クリック、

seesaa327zc1.jpg



[マイドキュメント]をクリックして
[アフィリエイト入門]というフォルダをクリック、

seesaa327zc2.jpg



[保存]をクリック、

seesaa327zc3.jpg



です。






さて、カスタマイズはシンプルなテンプレートの方がやりやすいので、
引き続き「ライトグレー(左サイドバー)」の方で、解説していきます。



まず、バナーのサイズを知る必要があります。



バナーのサイズを調べてみましょう。






引き続きこちらの画面で、
[Ctrl]キーを押しながら[F]のキーを押します。

seesaa327zc4.jpg






検索窓に #container と入力、
もしくはこれを↑コピーして貼り付け、
[次へ]をクリックします。

seesaa327zd.jpg






#container タグが見つかりました。

seesaa327ze.jpg






この中に、

width:778px;

という記述があります。
( px はピクセル)

seesaa327zf.jpg






この 778px がこのブログの横幅です。






ということは、バナーの横幅でもあるということですね。

seesaa327zg.jpg






これで、バナーの横幅が分かりました。



次は高さです。






検索窓に #banner と入力、
もしくはこれ↑をコピーして貼り付け、
[次へ]をクリックします。

seesaa327zh.jpg






見つかりましたけど、隠れているので、
下矢印でスクロールさせます。

seesaa327zi.jpg






#banner タグです。

seesaa327zj.jpg






この中に

height:246px;

という記述があります。

seesaa327zk.jpg





この 246px がバナーの高さになります。



つまり、778×246px が、バナーのサイズということになります。



このようにして、#container の width と、
#banner の height を調べれば、
バナーのサイズが分かるということですね。



それでは、778×246px のバナーを作ってみます。



これにはいろんなやり方があって、
そのうちのひとつをご紹介しますので、
ご参考になさってください。



まず、Windows に付属しているペイントというソフトを起動します。
(Macの方ごめんなさい)



[スタート]→[すべてのプログラム]→[アクセサリ]→[ペイント]
の順にクリックします。

seesaa328.jpg






ペイントが起動します。

seesaa329.jpg






[変形]メニューの[キャンバスの色とサイズ]をクリックします。

seesaa330.jpg






ここにバナーサイズを入力します。






幅に778を入力し、高さに246を入力します。
もちろん、単位はピクセルです。

seesaa331.jpg






入力したら[OK]をクリックします。

seesaa332.jpg






横長のキャンバスになりましたので、
ペイントの枠を横に引っ張って伸ばしてください。

seesaa333.jpg






こんな感じです。

seesaa334.jpg






次に、以前作った「マイドキュメント」の
「アフィリエイト入門」フォルダを開きます。






先ほど保存した3つの画像があります。

seesaa335.jpg





このうちのひとつをダブルクリックします。

seesaa336.jpg






イルファンビューが起動して、
画像が開きます。

seesaa337.jpg






[Ctrl]キーを押しながら[R]のキーを押すと、
「リサイズ/リサンプルの設定」画面になりますので、
高さの欄に 160 を入力して[OK]をクリックします。

( 160 は、私なりに「いいかな」と思った数値です。
いろいろ試してみてください。)

seesaa338.jpg






小さくなりました。

seesaa339.jpg






[編集]メニューの[選択範囲をコピー]をクリックします。

seesaa400.jpg






ペイントの[編集]メニューの[貼り付け]をクリックします。

seesaa401.jpg






左上に画像が貼り付けられました。

seesaa402.jpg






さて、この画像を「いい感じの位置」に移動させなければいけません。



ドラッグ&ドロップでやります。



ちょっと技がいります。笑






画像の上にマウスポインタを持っていくと、
このように形が変わります。

seesaa403.jpg






この状態で、クリックしたまま、マウスを動かすと、
好きな場所へ持っていくことができます。

seesaa404.jpg






このへんに持っていきます。

seesaa405.jpg






上下と右の余白がいい感じになるようにしましょう。






ちなみに、画像を動かすことができるのは、
このように画像が破線で囲われているときだけです。

seesaa406.jpg






画像以外のところをクリックしてしまい、このようになってしまうと、
画像の位置が確定されるので、もう動かすことはできません。

seesaa407.jpg






もし、画像の位置が確定された後で動かしたいときは、
[選択]ボタンが押されている状態で、

seesaa407b.jpg






動かしたい画像を囲めば、

seesaa407b2.jpg






また動かすことができるようになります。

seesaa407c.jpg






1枚目の位置が決まったら、次の画像です。



同じ要領で、2枚目、3枚目も、いい感じの位置に貼り付けます。






こんな感じです。

seesaa408.jpg






ちなみに、後になってやっぱりこれは消したいと思ったときは、
[選択]ボタンが押されている状態で、

seesaa408b.jpg






消したい画像を囲み、

seesaa408c.jpg






[Delete]キー(デリートキー)を押せば消すことができます。

seesaa408d.jpg






今回は消さずにこのまま保存したいと思います。



[ファイル]メニューの[名前を付けて保存]をクリックし、

seesaa409.jpg






[マイドキュメント]の[アフィリエイト入門]フォルダを開いて、

seesaa410.jpg






保存する「ファイル名」を、英数で入力し、
[ファイルの種類]で JPEG を選んで、
[保存]をクリックします。

seesaa411.jpg






これでバナー画像が完成しました。



次は、ブログへのアップロードです。






メンテナンスページの[ファイルマネージャ]をクリックします。

(ファイルマネージャは[記事投稿]の中にあります。)

seesaa412.jpg






[参照]をクリックして、

seesaa413.jpg






[マイドキュメント]の[アフィリエイト入門]フォルダを開き、

seesaa414.jpg






先ほど保存したバナー画像を選んで、[開く]をクリックします。

seesaa415.jpg






必要に応じてタグを追加し[アップロードする]をクリックします。

seesaa416.jpg






アップロードされたら、[元画]をクリックします。

seesaa417.jpg






このようなメッセージが表示されたら、
[アクセスを許可する]をクリックします。

seesaa418.jpg






[スタート]→[すべてのプログラム]→[アクセサリ]→[メモ帳]
の順にクリックして、メモ帳を開きます。

seesaa419.jpg






メモ帳の上で右クリックして[貼り付け]をクリックします。

seesaa420.jpg






このようになった場合は、

seesaa421.jpg






[書式]メニューの[右端で折り返す]をクリックすると、

seesaa422.jpg






見やすくなります。

seesaa423.jpg






http から .JPG までを選択し(反転させ)、

( 選択するのは、 img src="この中" です。)

seesaa424.jpg






その上で右クリックして[コピー]をクリックします。

seesaa425.jpg






コピーしたらメモ帳は閉じていいです。

保存も必要ありません。






[デザイン]の[デザイン一覧]をクリックして、

seesaa426.jpg






[ライトグレー(左サイドバー)]をクリックします。

(若草が適用されている場合は、ライトグレーを適用しておいてください。)
 

seesaa427.jpg






[Ctrl]キーを押しながら[F]のキーを押し、
検索窓に #banner と入力して、
[次へ]をクリックします。

seesaa327zh.jpg






見つかりましたけど、隠れているので、
下矢印でスクロールさせます。

seesaa327zi.jpg






#banner タグです。

seesaa327zj.jpg






この中に

background-image:url(http://blog.seesaa.jp/photolibrary/header_img/21/3/3ab7ab85e113394692042a66cfa5e.jpg);

のような記述があります。

seesaa428.jpg






これは、

「このバナーのバックに使う画像が保存されている場所のURLは
(http://○○.○○.○○)ですよ。」

ということです。



ですから、このかっこの中を、
先ほどコピーした URL に書き換えてやればいいわけです。






かっこの中を選択します。

(選択するのは、 background-image:url(この中); です。)

seesaa429.jpg






選択した上で右クリックして[貼り付け]をクリックします。

seesaa430.jpg






かっこの中の URL が書き換わりました。

seesaa431.jpg






「スタイルシートタイトル」を変更し、
[スタイルシートを変更する]をクリックします。

seesaa432.jpg







見てみましょう。

seesaa91.jpg

もしくは、

seesaa11.jpg






画像はいいのですが、文字の色と配置がへんです。

seesaa433.jpg






まず、タイトルと、説明文を入れ替えましょう。






[デザイン]の[コンテンツ]をクリックします。

seesaa434.jpg






「ブログ説明」をタイトルの上に持っていきましょう。






「ブログ説明」の帯の上にマウスポインタを持っていき、
マウスポインタの形が変わったら、
ドラッグ&ドロップで「ブログ説明」のコンテンツを移動させます。

seesaa435.jpg






こんな感じです。

seesaa436.jpg






上に持っていってマウスのボタンを離します。

seesaa437.jpg






「ブログタイトル」と「ブログ説明」が入れ替わったら、
[設定を反映する]をクリックします。

seesaa438.jpg






ここからの変更はファイヤーフォックスのエディットCSSが簡単です。






[スタート]→[すべてのプログラム]→[ Mozilla Firefox ]→[ Mozilla Firefox ]をクリックして、
ファイヤーフォックスを起動します。

seesaa439.jpg






「既定のブラウザに設定しますか?」と聞いてきますが、
引き続きインターネットエクスプローラー使い続ける場合は、[いいえ]をクリックします。

毎回このメッセージが表示されるのが嫌な場合は、
「 Firefox を起動するとき毎回既定のブラウザを確認する」のチェックをはずしておきます。

seesaa440.jpg






[表示]→[サイドバー]→[ EditCSS ]の順にクリックします。

seesaa441.jpg






まず、タイトルの色を変更します。

h1 a

というタグを見つけてください。

h1 a{
color:#ffffff;
text-decoration: none;
font-weight:bolder;
}

とありますので、

color:#ffffff;



color:#000000;

に変更します。



タイトルが黒になりました。



(ちなみにブログ説明の色は、

.description

で指定しています。)



次に、

#banner

というタグを見つけてください。

#banner{
margin:0px;
padding:0px 45px;
text-align:right;
height:246px;
background-image:url(http://あなたのブログのホスト名.up.seesaa.net/image/bana.JPG);
background-position:top;
}

とありますので、

text-align:right;



text-align:left;

に変更してください。



バナーの中の文字が左寄せになりました。






ちなみに、この中に

background-position:top;

というのがありますが、これについて解説しておきます。



これは、バナー画像の表示する位置を指定しています。



今回貼り付けた画像のサイズは 778×246px ですから、
バナー領域と同じ大きさです。

イメージとしてはこんな感じです。



position02.jpg



バナー画像は、左寄せの上寄せで表示させればいいので、
特に指定してやる必要はないのですね。



ところが、バナー領域より小さな画像を貼り付ける場合は、
どの位置に表示させるのかを指定してやる必要があります。

イメージとしてはこんな感じです。



position03.jpg



ですから、もし、
「バナー画像は、左から400ピクセル、上から100ピクセルの位置に表示させる」
のであれば、

background-position:top;

を、

background-position:400px 100px;

のように変更します。



バナー領域より小さな画像を貼り付けたい場合は、
このようにして、画像の貼り付け位置を指定してレイアウトを整えてやるのです。



これはぜひとも覚えておいてくださいね。






では、次に、タイトルをもう少し、下に下げましょうか。



h1

というタグを見つけてください。

先ほどの

h2 a

の前にあります。

h1 {
margin:0px;
padding-top:90px;
padding-bottom:10px;
font-weight:bolder;
font-size:24px;
font-family:Verdana;
}

とありますので、

padding-top:42px;



padding-top:90px;

に変更します。



この調子で、いろいろいじってみてください。



習うより慣れろですから。






今のスタイルシートを保存しておきたい場合は、
フロッピーのアイコンをクリックして、

seesaa442.jpg






「マイドキュメント」の「アフィリエイト入門」フォルダに、
適当な名前を付けて、[保存]しておきましょう。

(保存するファイル名の拡張子は、 .css にしてください。)

seesaa443.jpg






さて、最初はちょっと大変かもしれませんが、
スタイルシートがいじれるということは、
アフィリエイトをやるにあたって、とても大きな武器になります。



もちろん、ぜんぜんさわれなくても、
アフィリエイトはできます。



ただ、
「もうすこしこうしたいんだけどどうすればいいんだろう?」
と困っている人にとって、
これらを習得したあなたはとても役に立つ存在になるんですね。



これが、大きな武器になるという意味です。



ぜひともチャレンジしてください。






===



メルマガ

 → http://archive.mag2.com/0000224526/index.html



===



お役に立てましたらクリックお願いします。

 → 人気ブログランキングへ



===

この記事へのコメント



コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

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

アフィリエイトの基礎知識:知ってるつもりだったけど(14)


○○とは?シリーズ:知ってるつもりだったけど(1)


ソフト&用途別メールアドレス:ツール(3)


ブログの開設:ネットでお店(ブログ)を出そう(6)


ブログのカスタマイズ:ネットでお店(ブログ)を出そう(7)


ブログのSEO対策:ネットでお店(ブログ)を出そう(3)


ブログの記事が書けないときは:ネットでお店(ブログ)を出そう(1)


ブログのカスタマイズパック:ネットでお店(ブログ)を出そう(1)


資金調達(工事中):資金調達(0)


メルマガ読者限定:特典(1)


amaのアフィリエイト特典:特典(1)


ネットビジネス・ワールドマップ:アフィリエイト入門推奨教材(1)


PPCアフィリエイト:私はこうやって稼いでいます(2)


和佐大輔さんの無料オファー:無料なのに凄いもの(1)



×

この広告は180日以上新しい記事の投稿がないブログに表示されております。