株式会社ドリル Home > アメブロカスタマイズ > サイドバーのカスタマイズ > 【アメブロカスタマイズ】サイドバーに2ヶ所以上にバナーを設置したい – フリースペースが1つじゃ足りない人の為に

【アメブロカスタマイズ】サイドバーに2ヶ所以上にバナーを設置したい – フリースペースが1つじゃ足りない人の為に

たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》

2013 01 08 1911

こんにちは、ドリル 鈴木です。
今回は、コメントで頂いた質問について、アンサー記事になります。

 

サイドバーに使える項目で「フリースペース」があり、ここにはHTMLを記載してバナー等を設置する事ができます。
しかし、残念な事に「フリースペース」は1ヶ所しかありません。
そこで今回は、フリースペースを使い、2ヶ所以上にバナーを設置する方法をご紹介します。

 

JavaScriptを使用した、若干難易度の高いカスタマイズになっています。
それでは、スタートです。

アメブロxワードプレス連動ツール アメプレス
アメブロビズ3 集客の為のアメブロビジネステンプレート Ameblo Biz3

 

カスタマイズを始める前に

今回のカスタマイズはコメントで頂いた質問についての、アンサー記事になります。
ご質問頂いた内容は、以下の通りです。

 

「サイドメニューの最下部にバナーを設置したいのですが、既に上部でフリースペースを使っているため、最下部に表示できません。
プロフィールや最近の記事などをまたいで二カ所以上にフリースペースを使用することは可能でしょうか?
何か参考になるものがあれば教えてください!
よろしくお願いします。」

 

若林様ありがとうございました。
そこで、フリースペースを使い、2ヶ所以上にバナーを設置する方法について説明します。

 

今回のカスタマイズは「フリースペース」と「フリープラグイン」を利用して行います。
バナーはサンプルとして「バナーA」「バナーB」「バナーC」の3つを用意します。

2013 04 14 1001

2013 04 14 1002

2013 04 14 1003

 

バナーをフリースペースに設置する

バナーを用意したら、「CSSの編集」からアップロードを行い、準備を行います。
これに関しては「【アメブロカスタマイズ】読者登録ボタンのデザインを変えてみよう – 読者登録ボタンを目立たせて読者を増やそう」を参考にして下さい。

 

バナー画像をアップロードしたら、フリースペースに設置します。
ここで注意点があります。
普通に「フリースペース」にバナーを設置する場合、「img」タグだけを記述してしまうと思います。
しかし、今回は以下の様に記載して下さい。

<div class="skinMenu bannerA"><img src="この画像のパス" alt="" /></div>
<div class="skinMenu bannerB"><img src="この画像のパス" alt="" /></div>
<div class="skinMenu bannerC"><img src="この画像のパス" alt="" /></div>

また、ここでは見やすい様に改行が入っています。
しかし、実際に「フリースペース」に記述する場合は、必ず改行を削除する様にして下さい。

 

設置後の画面は以下の様になります。
今回はわかりやすい様に「フリースペース」をサイドバーの一番上に持って来ています。
また、今回のカスタマイズではバナーAはそのまま、バナーBは「プロフィール」の下、バナーCは「最近のコメント」の下に設置する様にします。
「フリースペース」記述時点では何もありません。

2013 04 14 1215

2013 04 14 1227

2013 04 14 1228

 

フリープラグインを記述しバナーの位置を変更する

次にフリープラグインの記述を行います。
これによって、バナーの位置を変更します。

 

「フリープラグイン」のページを開き、以下のスクリプトを記述して下さい。
フリープラグインの記述方法については「【アメブロカスタマイズ】サイドバーの読者登録ボタンを上に移動させよう – 読者登録ボタンをもっと目立つ位置に」が参考になります。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
jQuery(function($) {
  $('.bannerB').after($('.profileMenu'));
});
jQuery(function($) {
  $('.bannerC').after($('.recentCommentMenu'));
});
// ]]></script>

ここでの注意点としては、「フリースペース」に記述した各バナーのclassを設置したい箇所のclassの指定にあります。

 

サイドバーに指定できる項目のclass名は以下の様になります。

 

  • このブログの読者:readerMenu
  • プロフィール:profileMenu
  • 最新の記事:recentEntriesMenu
  • テーマ:themeMenu
  • カレンダー:calendarMenu
  • 月別:archiveMenu
  • お気に入りブログ:favoriteMenu
  • ランキング:rankingMenu
  • ブックマーク:bookmarkMenu
  • 最近のコメント:recentCommentMenu

 

また、「after」と記載しているため、選んだ項目の「後」に表示される事になります。
ここを「before」 と変えると項目の「前」に表示させる事もできます。

 

「フリープラグイン」の記述が完了したら保存して、ページを見てみましょう。
以下の様に1ヶ所に表示されていたバナーが別々の箇所に表示されているのが確認出来ます。

2013 04 14 1224

2013 04 14 1225

2013 04 14 1226

 

まとめ

以上で、今回のカスタマイズは終了です。
このカスタマイズを応用すれば、何ヶ所にでもバナーやコンテンツを設置する事が出来る事がわかると思います。

 

どうしてもうまく行かないという場合は、「フリースペース」と「フリープラグイン」が有効になっていない可能性があります。
「サイドバーの設置設定」を確認して下さい。

 

また、今回のカスタマイズでは2ヶ所以上バナーを設置する場合ですが、2ヶ所だけであれば「フリープラグイン」にHTMLを記述する事で、バナーを設置する事も可能です。
ここは気づかない事が多いのですが、「フリープラグイン」にはHTMLも記述できるんです。
これならとても簡単ですね。

 

JavaScriptを利用するため、若干難易度が高いのですが、一度理解できれば応用も利くカスタマイズなので、ぜひ習得して下さい。
また、わかりにくい箇所などあれば 、ぜひ気軽にコメントで質問して下さい。

 

以上、鈴木でした。

 

 









Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
[`buzzurl` not found]

【アメブロカスタマイズ】サイドバーに2ヶ所以上にバナーを設置したい – フリースペースが1つじゃ足りない人の為に” への4件のコメント

  1. このページを見ながらバナーの位置調整にチャレンジしています。

    バナーをフリースペースに設置するの記述の欄で



    が二つ続いて閉じタグがないのですが・・・???

    • > LeQuiraxさん
      コメントありがとうございます。
      こちらはHTMLの記述ミスでした。ご指摘ありがとうございます。
      バナーのHTMLはそれぞれのimgタグをdivタグで囲んでもらえれば問題ありません。
      その後のJavaScriptも特に変更はありません。
      どうぞ、よろしくお願いします。

  2. このサイトを参考にさせていただいています。

    【バナーをフリースペースに設置する】の
    「以下のように記載してください」の後の画像が表示されません。
    3つくらいあるようですが、×表示になっていて。

    ぜひ参考にさせていただきたいので、表示を見直していただければ幸いです。
    よろしくお願いします!

    • > 長崎人さん
      ご指摘ありがとうございます。
      記事を修正致しました。現在は見れる様になっています。
      ご参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です