ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors

   投稿日: 2014/11/10    投稿者:webコラム

皆さん、こんにちは。

 

今回は記事にオリジナルの読者ボタンを設置する方法をご紹介します。

 

楽しい記事を読んだとしても、いちいち画面をスクロールさせて読者ボタンを探すまでの手間はかけたくないですよね？

例えば記事の一番下に読者ボタンを置くことで、自分の記事を読んでもらった人に気軽に登録してもらえるようになるかも！

さらにボタンにする画像がオリジナルなら一層押したくなること間違いなし！

 

今回はフリースペース、フリープラグイン、CSSと変更する場所が異なってくるのでよく注意しましょう。

 

・画像のアップロード

 

まずはボタンにしたい画像を用意してアップロードします。

使いたい画像を用意したら[管理トップ]の左メニューにある[デザインの変更]から[CSSの編集]を開き、ページトップにある[ブログデザインヘッダ・背景画像の追加]で画像をアップロードします。追加できた画像の「この画像のパス」はあとで使うのでコピーしておくか、このページを覚えておきましょう。

 

私は自分で作ったこの画像を例に説明していきますね。

 

 

・フリースペースの編集　読者ボタンを作る

 

次にフリースペースを編集していきます。[管理トップ]の[設定・管理]から[フリースペース編集]を開きます。

そこに以下の文章をコピーして貼り付けます。

 

 

<div class="reader_btn"><a href="http://blog.ameba.jp/reader.do?bnm=あなたのブログのID"><img src="画像のURL" border="0" /></a></div>

 

赤字で下線の引かれた部分は各々の環境に合わせて記述してください。

 

追加後に保存をすると、この時点ではフリースペースにオリジナル画像の読者ボタンができるはずです。

今度はそれを記事の上に持ってきましょう。

 

・フリープラグインの編集　ボタンの位置を移す

 

記事上にボタンを設置するにはフリープラグインを編集します。

[管理トップ]の先ほどと同じく[設定・管理]にある[プラグインの追加]を開いて[フリープラグイン]のタグを選択します。

そこにまずフリープラグインの先頭に以下の文をコピーして貼り付けます。

 

 

<script src="http://www.google.com/jsapi"></script>

<script>google.load('jquery','1')</script>

 

 

続いて以下の文をどこでもいいのでコピーして追加します。

 

 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

jQuery(function($) {

  $('.globalLinkArea').after($('.reader_btn'));

});

</script>

 

 

追加後、保存して画面を確認しましょう。

記事の上下にボタンが現れましたか？

しかしこのままではこのボタンだけ左寄りになっているので中央寄せしたいと思います。

 

・CSSの編集　ボタンの位置の調整

 

最後に中央揃えにします。

[CSSの編集]を開き、 「(4) その他、拡張」のところに以下の文をコピーして貼り付けます。

 

 

.reader_btn {

text-align: center;

}

 

 

追加し終えたら表示を確認してみましょう。

先ほどの左寄りになっていたボタンが真ん中に寄っていたら成功です。

 

まとめ

 

上手くできましたでしょうか？

思わず押したくなるようなボタンを用意して読者を増やしていきましょう！