はてなブログのサイドバーにオリジナルバナーを貼る方法

広告

 

せっかくブログのPVが伸びてきたのにアドセンスやアフィリエイトだけじゃもったいない。

 

普通の企業様から「是非弊社の広告をあなた様のブログに〜」なんてオファーがくるなんて夢のまた夢ですが、独立したばかりの友人の助けにはなれるかもしれません。

 

ということで先ほどから当ブログのサイドバーにオリジナルのバナー広告を掲載しはじめました。

 

でバナー広告と簡単なHTML、CSSを書いていて「お?もしかしたら需要あるかも?」とおもったのでバナーの作り方、はてなブログへのバナーの貼り方を紹介しておきます。

 

スポンサーリンク

バナーの作り方

今回はマウスオーバーすると広告の色が変わるオーソドックスなタイプのバナーの作り方をご紹介。

ノーマル画像

まずはPhotoshopを使ってノーマル時に表示されるバナーをつくります。

f:id:dagasoregae:20160315162505j:plain

サイズは300px X 250px にしました。アドセンス広告でいうところのレクタングル中というやつと同じサイズです。

ロゴ素材だけ提供してもらって後は、Photoshopでテキスト足したり背景に写真を透かしたり、facebookページっぽくしたりと手を加えただけです。レイヤーが使えるドローソフトなら簡単にできます。

 

できたら名前をつけてjpeg形式で保存。

マウスオーバー画像

次にマウスオーバー時の画像を作成します。
クリックできることがわかるように色を濃くしたり薄くしたりするんですが、今回は薄くすることに。

やり方は簡単です。

f:id:dagasoregae:20160315163403j:plain

さきほどの画像の上に塗りつぶしたレイヤーを作成し、不透明度をいじるだけ。

 

できたら名前をつけて保存。

 

これでバナーの作成は完了です。

はてなフォトライフにアップロード

2枚の画像が完了したらはてなフォトライフに画像をアップロードします。

はてなblog右上にある9個のマスのアイコンをクリックし「はてなフォトライフ」を選択。
f:id:dagasoregae:20160315164009j:plain

 

右上のメニューの「アップロード」、フレーム内の「アップロード」の順にクリックし、さきほど保存した二つの画像をアップロードします。

アップロードが完了したら画像をそれぞれ開き、画像の上で右クリックして「画像アドレスをコピー」を選択しメモ帳などに貼り付けておきましょう。

 

f:id:dagasoregae:20160315164554j:plain

 

2枚とも画像アドレスを貼り付けたらアップロードは終了です。

HTMLの編集

画像のアップロードが完了したらサイドバーのHTMLタグを編集します。
はてなブログダッシュボードの「デザイン」→「カスタマイズ」→「サイドバー」の順にクリックし一番下の「+モジュールを追加」を選択します。

 

f:id:dagasoregae:20160315165024j:plain

モジュール追加ウィンドウが開いたらHTMLを選択します。

f:id:dagasoregae:20160315165235j:plain

 

こちらの<p>…</p>と書いてあるエリアに

<center><p>↓バナーのテストだよ↓</p></center>
<div id="banner_test">
<a href="http://www.google.co.jp"> </a>
</div>

こちらのコードを貼り付けます。

 

<p>〜</p>で囲まれている文字はサイドバーに表示されるものなので好きな文字をいれてください。

 

<a href=”〜〜〜”>の 〜〜〜の部分は飛ばしたいURLに書き換えてください。

 

※<div id=”〜〜〜”>の〜〜〜部分も書き換えても構いません。後ほど使いますのでわかりやすいアルファベットにしておくことをおすすめします。

 

変更したらモジュールをドラッグしてサイドバーの表示したい位置にドロップしてください。

 

変更を保存してHTMLの編集は終了。

CSSの編集

つづいてCSSを編集します。

「デザイン」→「カスタマイズ」→「{}デザインCSS」を選択し、エディタに以下のコードをコピペしてください。

/*banner_testのバナー広告*/
#banner_test{margin:0 auto;
background: url("メモ帳にコピペしたノーマル画像のURL") no-repeat;
}
#banner_test a{
background: url("メモ帳にコピペしたノーマル画像のURL") no-repeat;
display:block;
width:300px;
height:250px;
text-indent: -9999px;
}
#banner_test a:hover{
background: url("メモ帳にコピペしたマウスオーバー画像のURL") no-repeat;
}

urlの部分はそれぞれ対応したurlに置き換えてください。

HMLのところで<div id=”〜〜〜”>の〜〜〜を書き換えた場合は、同じようにbanner_testの部分3カ所を書き換えてください。

完了したら保存して終了。

おわりに

簡単にちょっと手を加えたオリジナルのバナー広告をはてなブログに貼る方法は以上です。

 

どこにも出さないよりは間違いなく効果はあるので、PVが少なくても紹介したいお店や企業、友人のブログなどがある場合は文字のリンクではなくオリジナルのバナーをつくって自分のブログに載せてあげると喜ばれるかもしれませんよ?

 

今回の記事で登場したバナー広告はわたしのブログにも度々登場する整理収納ネタを提供してくれる友人のfacebookページを紹介するために作成、掲載しました。
今後独立してやっていく上で「いいね!」をもらえると励みになると思うので、家やオフィスの整理収納に興味がある方で、Facebookやっておられる方は是非「いいね!」してあげてください。

本当はfacebookよりもHPやブログの方がいいんですが、まだどちらも準備中らしいです。
ただ、Facebook宛にメッセージを送れば仕事の依頼や問い合わせは受け付けているようですのでお気軽にどうぞとのことです。

よろしくお願いします!

webデザイン知識を身につけておけば、ブログだけではなくwebデザイナーとして稼げるようになるので、HTMLやCSS、PHP、javascriptの知識は身につけておいて損はありません。

短期間でwebデザイナーに必要なスキルを身につけられるTechAcademyはおすすめです。

ちなみに私のブログに広告掲載したい方がいらっしゃいましたらtwitterからお気軽にご連絡ください!
バナー制作もやっています。

twitter.com

スポンサーリンク