2011/04/19

Bloggerのサイドにバナーを貼る方法

Bloggerのサイドにバナーを貼る方法をメモ。たとえばこんなもの↓です。



シンプル3ステップです。

1. 素材の準備
準備するものは次の2つです。
貼りたいバナー(画像)
飛び先に設定したいページのURL(テキスト)


2. Bloggerでのデザイン設定
Bloggerの設定画面から「デザイン」タブ→「ページ要素」をクリックします。次に「ガジェットを追加」をクリック。ポップアップでウィンドウが出てきたら、次のように入力します。

タイトルに「バナー」(何でも構いません)、リンクに飛び先ページのURL、イメージに貼りたいバナー。


例)
タイトル:バナー
リンク :http://sites.google.com/site/quake20110311jp/bokin
イメージ:こちらのページからもらってきます

保存」をクリック。


3. 確認
ブログの表示」できちんと貼れているかを確認します。場所を変更したい場合は、「ページ要素」画面に戻ってドラッグ&ドロップで場所を変更します。

無事貼れていればこのまま終了!


・・・以上です。


追記20131117

この投稿を書いた当時といまとではBloggerの画面デザインが少し変わってしまっていまして、その点についてご要望をいただいたので、今2013年11月現在のやり方を追記しておきます。

「2. Bloggerでのデザイン設定の部分」です。

Bloggerの設定画面から「レイアウト」を選択。


つづいて画面レイアウトの設定画面が出てきたら「ガジェットを追加」を選択します。


すると、どんなガジェット(パーツのことです)を追加するかを選ぶ画面が出るので、その中から「イメージ」というのを選択します(イメージの文字がクリックできるようになっています)。


すると新しいウィンドウ(タブ)が開くので、タイトル(パーツのタイトル)やリンク(画像をクリックしたときのリンク先)を入力し、イメージを選択して問題がなければ「保存」をクリックします。


最後にもうひと手間必要です。保存内容に問題がなければもとの「レイアウト」のページに戻るかと思いますので、そこで「配置を保存」をクリックします。ここまでくれば無事完了!です。

あとは「ブログを表示」などで実際のページを開くと挿入した画像が表示されていることが確認できるので見てみてください。

ご参考までにー。

8 件のコメント:

riko さんのコメント...

初めまして。
こちらの記事のお陰で、どうしてもやりたかったこと{リンク広告を貼る}ことができて、本当に感謝しています!!(どう検索しても出なかったので!)

今回コメントさせていただいたのは”ウェブサイトにGoogle翻訳を追加”についてです。”スニペットをコピーしてウェブページに貼り付けます”とのことですが、このコピーをガジェットのどの項目に入れればいいのでしょうか? HTML/JavaScriptだと画像が出ないし、画像のとこやリンクのとこだとURLを入れなくてはいけないし・・・(ソースなどのコピーまではわかるんですが、それをどこに貼ったらいいかが分からないんです。)

どうしたら広告リンクのように簡単に貼れるか教えていただけないでしょうか? よろしくお願いします!!

匿名 さんのコメント...

感謝のコメントしてブログまで明かして、内容と違うからか知りませんけどシカトならまだしも消すとかちょっと酷くないですか?
受け付けていないならそう記載してほしいです。
ご迷惑おかけして申し訳ございませんでした。

ゴトウハヤト さんのコメント...

匿名さま

コメントいただきありがとうございます。

> 感謝のコメントしてブログまで明かして、内容と違うからか知りませんけどシカトならまだしも消すとかちょっと酷くないですか?
せっかくいただいたコメントを消してしまいまして、申し訳ありません。。。せっかくいただいた感謝のお言葉をどういう経緯で僕自身消してしまったのか、今にわかに思い出すことができません。。
こちらこそ申し訳ございませんでした。

ゴトウハヤト さんのコメント...

rikoさん

・・・順番が逆になってしまいましたが、コメントが消えてしまっていた件、判明しました。なぜだか自動でスパム判定されてしまっていたようです。。申し訳ありませんでした。。

「ウェブサイトにGoogle翻訳を追加」の件ですが、もう解決されてますでしょうか? もしまだであれば、ちょっと調べてみたのでよろしければご参考にしてくださいー。

Google翻訳ウィジェットをBloggerに追加する方法
http://gh640.blogspot.com/2012/02/googleblogger.html

柴洋 さんのコメント...

初めまして。
日本一周を終えたので、今その記録をブログにまとめています。
ブログ作りは初心者なので、こういったテクニックはとても助かります。ありがとう御座いました。

ゴトウハヤト さんのコメント...

初めまして。
気づくのが遅くなってしまい申し訳ありません!

この夏自転車で日本一周されてきたんですね。素敵ですねー!!
旅の記録、楽しませていただきます。

コメント、ご丁寧にありがとうございます。
またわからないことなどございましたらお気軽にお聞きくださいー。

AI さんのコメント...

こんにちは。

拝見させて頂きましたが、どうしてもデザインタブ→ページ要素の流れがよく分かりません。

設定画面上には「デザイン」が見当たらなくて、困っています。
どうかもう少し詳細に教えて頂けませんでしょうか。
よろしくお願い致します。

ゴトウハヤト さんのコメント...

AI さん

コメントいただきありがとうございます。
反応が遅くなり申し訳ありません。

> どうしてもデザインタブ→ページ要素の流れがよく分かりません。

そうですね。こちら現在はBloggerの管理画面の構成やデザインが変わってしまっておりましたので、、今では情報が間違っている状態になっていました。紛らわしかったですね。スミマセン。。

今の状態ですと、「デザイン」のかわりに「レイアウト」を選んでいただきその後進めていただくのがよいかと思います。

上の投稿にもその旨追記しましたのでよろしければご参考になさってみてください。

やってみたけどどうもうまくいかないぞという場合はまたコメントいただければと思いますー