投稿者:webコラム皆さん、こんにちは。今回は記事にオリジナルの読者ボタンを設置する方法をご紹介します。楽しい記事を読んだとしても、いちいち画面をスクロールさせて読者ボタンを探すまでの手間はかけたくないですよね?例えば記事の一番下に読者ボタンを置くことで、自分の記事を読んでもらった人に気軽に登録してもらえるようになるかも!さらにボタンにする画像がオリジナルなら一層押したくなること間違いなし!今回はフリースペース、フリープラグイン、CSSと変更する場所が異なってくるのでよく注意しましょう。・画像のアップロードまずはボタンにしたい画像を用意してアップロードします。使いたい画像を用意したら[管理トップ]の左メニューにある[デザインの変更]から[CSSの編集]を開き、ページトップにある[ブログデザインヘッダ・背景画像の追加]で画像をアップロードします。追加できた画像の「この画像のパス」はあとで使うのでコピーしておくか、このページを覚えておきましょう。私は自分で作ったこの画像を例に説明していきますね。読者ボタンを作る次にフリースペースを編集していきます。[管理トップ]の[設定・管理]から[フリースペース編集]を開きます。そこに以下の文章をコピーして貼り付けます。/></a></div>赤字で下線の引かれた部分は各々の環境に合わせて記述してください。追加後に保存をすると、この時点ではフリースペースにオリジナル画像の読者ボタンができるはずです。今度はそれを記事の上に持ってきましょう。ボタンの位置を移す記事上にボタンを設置するにはフリープラグインを編集します。[管理トップ]の先ほどと同じく[設定・管理]にある[プラグインの追加]を開いて[フリープラグイン]のタグを選択します。そこにまずフリープラグインの先頭に以下の文をコピーして貼り付けます。src="http://www.google.com/jsapi"></script><script>google.load('jquery','1')</script>続いて以下の文をどこでもいいのでコピーして追加します。{$('.globalLinkArea').after($('.reader_btn'));});</script>追加後、保存して画面を確認しましょう。記事の上下にボタンが現れましたか?しかしこのままではこのボタンだけ左寄りになっているので中央寄せしたいと思います。最後に中央揃えにします。その他、拡張」のところに以下の文をコピーして貼り付けます。center;}追加し終えたら表示を確認してみましょう。先ほどの左寄りになっていたボタンが真ん中に寄っていたら成功です。まとめ上手くできましたでしょうか?思わず押したくなるようなボタンを用意して読者を増やしていきましょう!カテゴリ:webコラムTOPへ我社のマスコット『弁慶』です。不得意:電話しゃべりが苦手なので、コンタクトはこちらから我社のキャラクター「長フチ様」がユーザーに変わり、聞きづらい疑問を直球で投げかけるQ&A式コンテンツ。強面の顔からは想像も容易いほどのおバカさんが、弊社スタッフと対談します。私の後ろに道が出来る。