アドセンス色設定 ブログ入門講座 中級編

今回は Google AdSense の色の設定を解説します。
サイドカラムの色に合わせ、違和感をなく表示させることができます。

人気blogランキング現在16位!
鬼ブログランキング/起業・経営14位!

鬼ブログランキング/ブログカスタマイズ1位!!
 

まず、Google AdSense のログイン画面からログインします。

ログインしましたら、上のタブの広告設定をクリックし、設定画面に移動します。
下図は中段あたりのカラーパレット設定部です。

Google AdSense カラーパレット

デフォルト(初期設定)の Built-in Mother Earth になっていますが、
カラーパレットの管理をクリックします。

Google AdSense 色の選択

ここで、サンプルを見ながら、枠線等のカラーコードを変更します。
上部のカラーパレットでポインターをもっていき、クリックしても変更できますが、ここではスタイルシート( CSS )をからカラーを抜きとりたいと思います。

Blog の設定/管理画面デザインの設定スタンダードCUSTOMポップアップウィンドウ

※ここで初めての方は、テキストボックスが空白になっていますので、テーマの読み込みでプルダウンメニューから選択してください。
※※テーマはデザインの設定で使用しているデザインの上にポインターをおくとブラウザの左下に表示されますので、確認してください。

このスタイルシート( CSS )のソースの中の # がついているものがカラーコードです。
ソース自体は、デザインにより多少記述の方法が違います。

元画像が下図のような場合

Google Adsense 色変更前

サイドカラムとボディの背景色は同じなので、body の background:#f2f9f2 のカラーコードをコピーし、枠線と背景にペースト(貼り付け)します。

タイトルはサンプルの『リンク付タイトル』となっているとこですので、
link{color:#788f77 からコピペ(コピー&ペースト)、テキストは body のcolor:#546c58 からコピペ。URL は記事下の livedoor Ads に合わせて、青色 #0000FF に設定してみました。

サンプルで確認して、OKと思えば、その下にパレットの保存がありますので、お好きなパレット名をつけて保存します。
注) アルファベットでないと保存できません。

保存できたら、上部の広告レイアウト用コードのタブをクリックし、前回と同じように各設定をしていきますが、今回はカラーパレットに新しく Custom で先ほど、保存したパレット名を選択し、一番下のお客様の AdSense コードをクリックしてやり、コピーします。

以下は前回と同じですので、そちらをご参照ください。
Google アドセンスに挑戦!

そして色を変更し、設定を完了したものが下図となります。

Google AdSense 色変更後

こうして、デザインに違和感なく表示させることもできますし、逆に目立つように設定することもできます。

今回で一番、難しいと思われるのは、スタイルシート( CSS )から、どこが何色なのかを見つけ出すことだと思います。
これはブッチャケ、分からない時は、# のついたカラーコードを順番に当てはめサンプルを確認しながらやれば、何とかなります(^^;)。

実際、私も今でも分からない時は、そうしています(^^;)。

このスタイルシート( CSS )は、実はブログの要(かなめ)ですので勉強されるとよりオリジナルなブログにカスタマイズできます。

『スタイルシート』で検索するとたくさんのサイトで説明されていますので、そちらを参考してみてください。

では、頑張って挑戦してみてください!!
次回は、本命、個別記事に Google AdSense を貼るです。
記事の内容により、広告もドンドン変わっていきますので、おもしろいですよ(^^)。


人気blogランキング現在16位!
鬼ブログランキング/起業・経営14位!

鬼ブログランキング/ブログカスタマイズ1位!!

↑ 実はまだ登録数がすくないので1位なんです。。。(笑)
今、登録すれば、上位表示間違いなし!! (爆)

このブログをご覧の皆様の絶大なるご協力、よろしくお願いいたします!!


サイトマップはコチラ ⇒ ◆コンテンツ一覧◆
 
   
メルマガ登録 ID: 0000160275
ブログ作成入門講座
 
バックナンバー powered by まぐまぐトップページへ
Posted by ブログ作成入門講座 at 08:10│Comments(8)TrackBack(0) | Edit
この記事へのトラックバックURL
http://trackback.blogsys.jp/livedoor/blomal/20301615
この記事へのコメント
変な形で電話を終わらせてしまい申し訳ないです。
Posted by 徳川 高則 at 2005年05月01日 01:53
将軍様。。。(^^;)
カラムが落ちる現象、直らないですね。。。
いっそ、デザインを変更してみてはどうでしょうか? oKi
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年05月01日 13:10
理由はわかりませんがとりあえず治りました。
メールや電話までさせて頂いて誠にかたじけない。
恐縮にござる。

え〜、これからもよろしくお頼み申す。
Posted by 徳川 高則 at 2005年05月01日 22:07
徳川さん、こんばんは。
今、シュウさんと Kota さんの3人で、僕の地元の居酒屋で飲んでいます。(^^)

> え〜、これからもよろしくお頼み申す。

こちらこそ、よろしくお願いします♪
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年05月01日 23:17
okiさんこんばんは・・!
なんかブログのTOPに新しいのが増えてて、わからずに登録しちゃいました・・
なんだろう・・笑

本題に戻って・・
読むだけで必死なrebonです・・・汗
上記のことわかったようでわかってんのか?
とりあえず、アドセンス張ってみます。

見ながら頑張ります。。
ほんとに凄いなぁ、このブログ・・・ボソ
ありがとうございます。。
Posted by rebon at 2005年05月31日 00:27
rebonさん、おはようございます。

> なんかブログのTOPに新しいのが増えてて、わからずに登録しちゃいました・・

あ、すみません。僕もまだよく機能を理解していないです。。。(^^;)
単純には、同じ時にこのブログを閲覧している人の数が表示されます。
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年06月01日 06:53
こんにちは。OKIさん。
実はアドセンスをトップに設置するところまではよかったのですが、
アドセンスの色を設定するのにバックに色と同じ用にしようとしてもどうしてもWEBカラーコードがわかりません。
もしよかったら教えて下さい。お願いします。
Posted by ゆきりん at 2005年09月11日 01:46
ゆきりんさん、コメント、ありがとうございます。
す、すみません。。返事が遅くなりました。。。(汗)

フリーウェアで、便利なソフトがあります。

FE - Color Palette
http://www.fieldeast.com/soft/fecp.html

これで、画面色をクリックすると、PC画面上なら、どこの色も
カラーコードが分かる優れものです。

是非、お試し下さい♪
Posted by ブログ入門講座〜今日からブロガー at 2005年12月30日 17:46
 
 
AX