ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors
電話番号: 03-3986-2773
電話番号: 03-3986-2773
ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズＴＯＰ » ブログ » webコラム» アメブロカスタマイズ・記事の上にオリジナル読者ボタンを設置する方法
投稿日: 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の編集]を開き、 「(4) その他、拡張」のところに以下の文をコピーして貼り付けます。
.reader_btn {
text-align: center;
}
追加し終えたら表示を確認してみましょう。
先ほどの左寄りになっていたボタンが真ん中に寄っていたら成功です。
上手くできましたでしょうか？
思わず押したくなるようなボタンを用意して読者を増やしていきましょう！
我社のマスコット『弁慶』です。
名前の由来：忠実な番犬
主な仕事：マスコットキャラとして認知度UP↑
不得意：電話
しゃべりが苦手なので、コンタクトはこちらから
我社のキャラクター「長フチ様」がユーザーに変わり、聞きづらい疑問を直球で投げかけるQ&A式コンテンツ。強面の顔からは想像も容易いほどのおバカさんが、弊社スタッフと対談します。
Copyright(C)2014 ｜ ホームページ制作・SEO対策を通じて集客向上↑売上UP↑Cyber Accel-Advisors. All Rights Reserved.
