スポンサーサイト

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

記事タイトルの背景に画像を挿し込む方法 アメブロカスタマイズ

先月、ブログのヘッダー画像を新しくしたので、エントリータイトル背景も画像に変えてみることにしました。
今まではCSSで色を指定していてそれも悪くありませんでしたが、ヘッダーの「古代図書館風」の印象を強めるためにも、記事タイトルにも関連した画像を挿むことにしました。


記事タイトルの背景に画像を挿し込む方法 アメブロカスタマイズ

今日はこの部分のお話。



記事タイトルの背景色を変更


さて、CSSで記事タイトルの背景に画像を挿むのですが、それに該当するCSS部分は「.entry h3.title」です。
画像ではなく、背景色を付けたいのでしたらこういうCSSになります。


.entry h3.title{
background-color: #ffffff; /* 背景色 */
}


CSS中の「#ffffff」は白のことです。
指定したい色がありましたら、「色 タグ」や「Webセーフカラー」などで検索すればいっぱい出てきます。



記事タイトルの背景画像を変更


今度は背景画像を挿むCSSです。
画像のURLを知る方法はご存知ですか?
知らない方は、「日々勉強!アメブロカスタマイズ」さんの
リンク1リンク2画像のURLを知る方法。というエントリーが勉強になります。


.entry h3.title{
background-image:url(背景画像のURL);
}


上記のCSSは単に画像を挿むだけのもので、いわゆる“最低限のCSS”ってやつです。


文字サイズや余白も変更したいという人は、下のCSSをご利用下さい。
ただし多少の知識が必要です。


.entry h3.title{
color: #000000; /* 文字色 */
font-size: 15px; /* 文字サイズ */
font-weight: bold; /* 太文字にする */
padding: 0px 0px 0px 15px; /* 枠の中の余白 */
width: 480px;/* 横幅 */
height: 78px;/* 高さ */
background-image: url(背景画像のURL);
background-color: #ffffff; /* 画像が表示されない時の背景色 */
background-repeat: no-repeat; /* 画像のリピート設定 */
margin: 0px 0px 0px 0px;/* 画像外側の余白 */
}



変更したい箇所を抽出しよう!


あれもこれも変更するのはよくないので、
まず最初に「何を変更したいのか」をよく考えましょう。
もし「文字色、太文字、背景画像」だけ変更したいというのでしたら、先ほどのCSSからその部分を取り出してこう書きます。


.entry h3.title{
color: #000000; /* 文字色 */
font-weight: bold; /* 太文字にする */
background-image: url(背景画像のURL);
}



用意されたテンプレートをコピペするのは楽ですが、自分が変えたいと思っている箇所以外も変更されることがあります。
必要ではないところを削ろうとする気持ちがあれば、CSSを見る目が養われて、いつかは自分で書けるようになるはずです。





アメブロをカスタマイズ 魅せるブログデザインを作ろう!
amazon.co.jp
有名なアメブロカスタマイズ教本です。

スポンサーサイト

アメブロにGoogle Adsenseを設置する方法 ~アドセンス広告を掲載して、収入を得よう

Amebaサービスを提供しているサイバーエージェント社は、広告料などで収益を上げています。
そのかわりにAmebaサービスを無料で提供しています。
だから、僕らが使っているアメーバブログにはデフォルトでグーグルアドセンスなど広告が表示されます。
他のブログサービスと異なり、グーグルアドセンスで収益をあげることは出来ませんでした。


しかし、2010年からユーザー側でもグーグルアドセンスが1つだけ設置できるようになりました。
これについてサイバーエージェント側は「アドセンス設置してもいいですよ」と言っている訳ではないので、設置は自己責任でお願いします。


それを踏まえて話を進めます。


アメブロにGoogle Adsenseを設置する方法 画像

Google Adsenseに登録


細かい話をし出すと長くなりますので、流れだけ順を追って説明します。


まずはGoogleのアカウントを持っているのが前提になります。
持っていない方はGoogleのホームページで登録してきてから続きをお読み下さい。
リンク1リンク2Googleホーム


まず、グーグルアドセンスのホームページに行きます。
リンク1リンク2Google AdSense


アカウントを登録を申請します。
申請が下りるまでには審査があり、すぐに登録とはいきません。


審査に通ると、Adsenseの管理画面に行くことができます。
管理画面から
→[広告の設定]
→[新しい広告ユニット]
と進みます。


ここで広告の大きさなどを決めるのですが、ここで知っておきたいのは「アメブロにアドセンスを設置できるのはサイドバーのみ」ということです。
頑張れば他の場所に設置できるかもしれませんが、アドセンスの規約で「コードはイジラないこと」とありますので、おとなしくサイドバーに設置しましょう。


あなたのブログのサイドバーの横幅はどれくらいですか?
ブログスキンによってサイドバーの横幅は異なってくるので、それを考えて選びましょう。
CSSカスタマイズができる方は、アドセンスに合わせて横幅を調節するのもいいでしょう。


さて、必要事項を入力し終えると最後にアドセンスの設置コードが表示されます。
これをコピーしたら、アメブロに行きましょう。



アメブロにAdSenseを設置する


アメブロの管理画面から
→[ブログを書く]
→[サイドバーの設定]
→[フリープラグイン編集]
と進みます。


あとは編集枠内にコピーしてあるものを貼りつけて保存するだけです。
他にもブログパーツがあるようでしたら、順番を考えて貼りつけましょう。



AdSenseが機能しているか確認する


ブログに行って、アドセンスが機能しているかを確認しましょう。


もし表示されない場合、いくつか理由が考えられます。
1.設置してすぐには機能しない。
2.フリープラグインをONにしていない。


2の場合は、フリープラグインを使っていない人に多いです。
アメブロの管理画面から
→[ブログを書く]
→[サイドバーの設定]
→[サイドバーの配置]
に進むと以下のような画面になります。


フリープラグインがONになっていない 画像

左が[使用しない機能]で右が[使用する機能]です。
フリープラグインを右側の表示したい位置にドラッグ&ドロップで移して、保存を押します。


どうですか?表示されましたか?



最後に一言


アメブロにおいては「AdSenseで稼ごう」とは考えない方が良さそうです。
AdSenseをクリックしてもらう事ばかり考えず、「クリックしてもらえたらラッキー」と考える方が健全です。
Adsenseで入ってきたお金も「道端でお金を拾っちゃった」と同じ程度に考えた方がいいでしょう。
別にお金をもらおうとするのが悪いと言っている訳ではなく、「設置場所がサイドバーのみのアメブロとAdSenseは相性が良くない」というだけです。
どうしてもAdSenseで稼ぎたいというなら、FC2ブログなどをお勧めします。


ごくたまに自分の広告を押してもらうために、サイバーエージェント側が設置している広告をCSSをイジって消そうという人を見かけますが、規約違反になります。
どうしても消したい場合は、アメゴールドを払って消す方法がありますので、そちらをご検討下さい。。


Adsenseでお小遣いが増えるといいですね。


ブログのヘッダー画像を変えました。イメージは古代図書館。アメブロカスタマイズ

さて、アメブロはカスタマイズできる範囲が狭いと言われていますが、あれもこれもするつもりもないので、僕にはちょうどいいのかもしれません。


アメブロでカスタマイズできるのは主にCSSをカスタマイズすること。
画像を用意したら、CSSで「背景として」画像を挿し込み完成。



◆ビフォーアフター


変更前のブログデザインもシンプルで気に入ってはいたのですが、輪郭に乏しい気がしていました。


変更前のデザイン
気になるあの言葉・あのニュース!大辞典-前のブログデザイン

そこで新しいブログデザインにするため、まずは輪郭を強めようと濃い茶色をブログ幅に引きました。
そして、当ブログのタイトルにもある「大辞典」を表現するために図書館をイメージして画像を作ることにしました。


もともとブログにはベージュやブラウンを多用しているので、西洋の古い図書館なら色が合うのではないかと思い、作ってみました。



変更後のデザイン
気になるあの言葉・あのニュース!大辞典-新しく作ったブログデザイン


もし、上記のようなデザインになっていなかったら、パソコンキーボードの[F5]を押すか、ページメニューから[更新]を選んでみてください。


なかなかの出来栄えだと自画自賛させてもらいます!
もっと控えめでも良かったのかもしれませんが…


ちょくちょくブログデザインをいじっているので、これからはブログテーマに「気になるアメブロカスタマイズ!」を追加したいと思います。
CSSが得意なわけではありませんが、僕よりも苦手な人に向けて“ためになる情報”を発信していければと思います。





Ad

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