アドセンス、アフィリエイトにちょっと使えるネタ帳 トップページ >> スポンサー広告アドセンス >> Googleアドセンスの背景画像を作ってみよう

スポンサーリンク

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

スポンサーリンク


ブログ内関連タグ :

| page top↑
スポンサーリンク

今回は、『Googleアドセンスの背景画像を作ってみよう』です。

ちなみに、今回の作業はFireFoxかOperaでやった方が良いです。
Windows2000+IE6SP1で試そうとしてEdge.jsのScriptがうまく動作せずに引っかかりました。

今回の背景画像の作成には前回紹介した縁取りを特殊加工して画像に変化つけるJavaScript edge.jsを使います。

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

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


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

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




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

色のキャプチャー


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

PIXENATE

Pixenate

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

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

次に『crop』を押して色だけ切り取りましょう。

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

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

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

画像エフェクトサンプル


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

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

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

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



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

今回は、「edge.js」を使っていろいろ弄ってみる方法でしたが、次回はまた別の方法を紹介します。
スポンサーリンク


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

トラックバック(0) | コメント(0) | page top↑

コメント
コメントの投稿














管理者にだけ表示を許可する

トラックバック
トラックバックURL
→http://fromaffili.blog22.fc2.com/tb.php/95-efecd9c5
この記事にトラックバックする(FC2ブログユーザー)
トラックバックを頂いた記事内で、該当記事へのリンクの無いものは受けつけませんので、よろしくお願いいたします。
RSS拾って紹介しました的なコメントやトラックバックも削除しますのでよろしく(^^;
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。