Ｇｏｏｇｌｅアドセンスの背景画像を作ってみよう

★ 今回は、『Ｇｏｏｇｌｅアドセンスの背景画像を作ってみよう』です。

ちなみに、今回の作業はＦｉｒｅＦｏｘかＯｐｅｒａでやった方が良いです。
Ｗｉｎｄｏｗｓ２０００＋ＩＥ６ＳＰ１で試そうとしてＥｄｇｅ.ｊｓのＳｃｒｉｐｔがうまく動作せずに引っかかりました。

今回の背景画像の作成には前回紹介した縁取りを特殊加工して画像に変化つけるＪａｖａＳｃｒｉｐｔ　edge.jsを使います。

もし、こちらの記事を読んでいなかったら、「edge.js」をダウンロードして展開しておいてください。

つぎに、以下のファイルを右クリックから「edge.js」を展開したフォルダーに保存してください。
ＢＯＤＹのＢＧＣＯＬＯＲの色コードを変えると背景色が変わります。
edgev.html


次に、Ｇｏｏｇｌｅアドセンスの背景画像にしたい色を作成しましょう。

下に適当に色が作れるように組んでおきました。
色の名前「blue」とか「green」とか「red」とか入れていただくか、
１６進で＃から「#0000ff」といった感じで入力して『色を適用』をクリックしてください。
四角い部分の色が変わります。

『色の適用』が出来たら、どんな方法でもいいのでキャプチャーして、「edge.js」を展開したフォルダーに英数小文字の名前（ＰＮＧ形式の方が良い）で保存しておいてください。




次に以下のサイトに行ってみてください。
オンラインで登録無しで画像が加工できるサービスです。

PIXENATE



左上の『Choose your image to edit.』をクリックするとすぐ下に自分のＰＣから画像が一時的にアップロードできる用になりますので、先ほど保存したこのブログのキャプチャー画像をアップロードしましょう。

自分で作った色にマウスを当ててドラッグすると範囲を選択できます。

次に『ｃｒｏｐ』を押して色だけ切り取りましょう。

切り取ったら、『ｒｅｓｉｚｅ』を押して、自分のブログやサイトに貼り付けるＧｏｏｇｌｅアドセンスのサイズよりひとまわり大きいサイズにします。

出来たら色の上で右クリックして『color01.jpg』として先ほどの「edge.js」を展開したフォルダーに保存してください。
「Save to Disk」から保存しようとすると出来上がった画像はＪＰＧなのにＰＮＧ形式で保存しようとして変な状態になります。

先ほど保存した『edgev.html』をダブルクリックしてみてください。
下のようになっていると思います。（下のはわかりやすく３種類にしましたが実際のファイル（上のコード）は１種類です）




そうしたら、このファイルをもう一度キャプチャします。

やることは判ると思いますが、Ｇｏｏｇｌｅアドセンスの背景画像にしたい物を切り取って保存しましょう。

保存したら、自分のブログやホームページに背景画像をアップロード。

そのあとに、以下のような形にします。
中に入れるアドセンスの背景色を作成した画像の色にすれば出来上がりです。

<table style="border:0px;"><tr><td style="background:url(保存した背景画像のＵＲＬ);background-repeat: no-repeat;background-position: center;"><center>ここにアドセンスのコードを入れる</center></td></tr></table>

要するに、縁取りの変化のある背景画像を使ってその上に同じ色のアドセンスを乗せてしまうことによって、アドセンスの縁取りを変化させたように見せかける技ですね。

今回は、「edge.js」を使っていろいろ弄ってみる方法でしたが、次回はまた別の方法を紹介します。
人気ブログランキング

ブログ内関連タグ : アドセンス ブログ カスタマイズ