しいたげられたしいたけ

空気を読まない。他人に空気を読むことを要求しない

「クリック募金」リンクバナーのサイドバーへの貼り付けは、うちではこうやっています

前回エントリーのコメント欄に、mayu (id:mayu115mayu105)さんからご質問をいただきました。

はじめまして。
ちょっと伺いたのですがクリック募金を貼りつけするのはどうしたらよいのでしょうか?お時間のあるとき教えてください。 

その後いただいたコメントを拝読すると mayu さんはFC2ブログへの貼り付けをお考えのようですが、私はFC2のことはわかりません。参考になるかどうかわかりませんが、「はてなブログ」ではこんなふうにやっているということを図解してみます。

スポンサーリンク

 

ご覧の通り、弊ブログでは「dff.jp(クリックで救える命がある)」と「ウェブベルマーク」へのリンクを貼っています。

dff.jp は、こちらにリンクバナーが公開されています。

www.dff.jp

今貼っているのはコレですから…

f:id:watto:20160717210152p:plain

取得するHTMLタグはコレになります。

<a href="http://www.dff.jp" target="_blank"><img src="http://bnr.dff.jp/pix/dffbanner200909_02_171x70.gif" alt="クリックで救える命がある。" width="171" height="70" border="0"></a> 

ウェブベルマークは、「お問い合わせ」フォームから質問してみました。

もらった回答によると、下記サイトにバナーが公開されているので…

brandfolder.com

ダウンロードしてトップへのリンクを貼ってくれとのことでした。

それで、下のバナーを自分の「はてなフォトライフ」に保存し…

http://f.st-hatena.com/images/fotolife/w/watto/20150402/20150402011900.jpg?1427905153

 dff のリンクバナーを真似て、こんなHTMLタグを作りました。img src は、dff は直リンですが、ウェブベルマークは「はてなフォトライフ」へのリンクであることにご留意ください。

<a href="https://www.webbellmark.jp/" target="_blank"><img src="http://f.st-hatena.com/images/fotolife/w/watto/20150402/20150402011900.jpg?1427905153" alt="ウェブベルマーク" width="168" height="168" border="0"></a>

ここから先は「はてなブログ」のサイドバーへのHTMLタグの貼り付け方になります。ですから mayu さんの直接のご参考にはならないと思います。

「はてなブログ」でサイドバーを編集可能にするためには、有料の「はてなブログpro」に申し込む必要があります。 

そうすると、ブログメニューの「デザイン」-「カスタマイズ」から、サイドバーへのブログパーツの追加が可能になります。

追記:

澄風荘 (id:syofuso)さんに確認いただいたところ、proでなくても編集可能とのことでした。

f:id:watto:20160717212333p:plain

「サイドバー」をクリックし…

f:id:watto:20160717213524p:plain

「+モジュールを追加」をクリックします。

すると、次のような画面が表示されるので…

f:id:watto:20160717213430p:plain

「タイトル」には「クリック募金」と入力しました。

HTMLは、今の弊ブログの場合、次のようなタグを貼りつけました。

<p>
<a href="http://www.dff.jp" target="_blank"><img src="http://bnr.dff.jp/pix/dffbanner200909_02_171x70.gif" alt="クリックで救える命がある。" width="171" height="70" border="0"></a>
<hr width="170">
<a href="https://www.webbellmark.jp/" target="_blank"><img src="http://f.st-hatena.com/images/fotolife/w/watto/20150402/20150402011900.jpg?1427905153" alt="ウェブベルマーク" width="168" height="168" border="0"></a>
</p>

中ほどの 「<hr width="170">」というのは、幅170ピクセルの水平線という意味で、リンクバナーの区切り線のつもりで挿入しています。

とりあえず、ご参考まで。