Twitterはこちら仕事依頼はこちら

記事終わりにボタンを表示させてクリック率をあげる【記事別に変更可能】

記事終わりにボタンを出してクリック率をあげる

記事を読んでもらったあと、あなたはユーザーにどんな行動を取ってもらいたいですか?

  • 関連記事に誘導
  • キラーページに誘導
  • 商品を買ってもらう
  • アフィリエイトのリンクを踏んでもらう

人それぞれ違うと思いますがリンクを踏んでもらいたいのは共通してるかと思います。

今回、このようなカスタマイズ依頼がありました。

アプリのダウンロードボタンを画面右下に表示し、追従させたい

ということで作りました。

この記事がデモページになってます。

画面をスクロールして下の方に行くとボタンが表示されるようになっています。

このカスタマイズの仕様
  • 位置:自由に変更可能
  • 表示タイミング:自由に変更可能
  • 表示するもの:記事ごとに変更可能

このページはAmazonアソシエイトのリンクを…

このページはキラーページへのリンクを…

など自由に変更可能です。

コピペでできるようになってるのでHTML、CSSなど分からなくてもOKです。

この記事はWordPressユーザーを対象に書いています。

記事終わりにボタンを固定表示させる方法

手順は以下の通りです。

手順
  • STEP1
    CSSコピペ
    style.cssにコードをコピペします。
  • STEP2
    JavaScriptコピペ
    javascriptをコピペします。
  • STEP3
    HTMLコピペ
    記事にHTMLをコピペします。

STEP1:CSSをコピペ

下記コードをコピペしてください。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

/************************************
** 何でも追従機能
************************************/
/* PC(タブレット) */
.fixed-wrap{
  position:fixed;
  z-index:100;
  max-width:180px; /* 最大横幅 */
  display:none;
  bottom:20px; /* 配置場所(画面下からの距離) */
  right:90px; /* 配置場所(画面右からの距離) */
}
.fixed-wrap img{
  width:100%;
  height:auto;
}
/* スマホ */
@media screen and (max-width: 559px) {
  .fixed-wrap{
    max-width:130px; /* 最大横幅 */
    bottom:40px; /* 配置場所(画面下からの距離) */
    left:15px; /* 配置場所(画面左からの距離) */
    right:unset;
  }
}

位置大きさは各自変更してください。

コメントに書いたので何となく意味はわかると思います。最大横幅と書いてあるところが横幅の設定、配置場所と書いてあるところが位置情報の設定になります。

位置や大きさを変えたい場合は数値を変更してください。17行目より上がPCとタブレットで下がスマホの値になっています。

STEP2:JavaScriptをコピペ

常時表示させたい人は必要ないので飛ばしてください。

WordPressのテーマによってコピペする場所が異なります。

子テーマにjavascript.jsとかscripts.jsとかあれば、そこに貼り付けてください。



JINはJavaScriptのファイルが子テーマにないのでHTMLタグ設定の【bodyタグの終わり】に貼り付けてください。

コードを貼り付けるときは<script></script>と自分で入力して間に入れてください。

<script>
ここにコピペ
</script>



SANGOはJavaScriptのファイルが子テーマにないので下記ページを参考にしてください。

公式 カスタマイズでJavaScriptを利用する方法

//スクロールで固定ボタン表示
$(window).scroll(function(){
if ($(window).width() <= 767) {//ブラウザ画面が767pxより小さい時
  if(window.pageYOffset > $(document).height()-$(window).height()-3000){
    $('.fixed-wrap').fadeIn(300);
    }else{
    $('.fixed-wrap').fadeOut(300);

  }
} else {//ブラウザ画面が767pxより大きい時
  if(window.pageYOffset > $(document).height()-$(window).height()-2500){
    $('.fixed-wrap').fadeIn(300);
    }else{
    $('.fixed-wrap').fadeOut(300);

  }
}
});

WordPressのテーマによって上手く動かない場合があります。その場合はご連絡ください。

JINを利用している方は下記コードも併せて入力してください。

$(function() {
    $('#sidebar').after($('.fixed-wrap'));
});
重要(全環境)

表示するタイミングを各自変更する必要があります。
変更する場所はコードの3000、2500と書いてあるところです。
この数値はサイトの下からの距離になります。
3000がPC、タブレット。
2500がスマホの数値になっています。

フッターのサイズに合わせて数値を変更してください。

STEP3:HTMLをコピペ

あとは記事にHTMLを入力するだけです。

<div class="fixed-wrap">
ここに表示させたいものを入力
</div>

これだけ!

これを記事の一番下に入れればOK!

AddQuicktagに登録しておけばいつでも使えます。

全てのパターンを想定していないので「表示が崩れた!」「位置がおかしい!」「大きさおかしい!」などあれば、ご連絡ください。

コメント

  1. ぽんひろさん

    初めまして。
    面白いカスタマイズですね。

    HTMLやCSSが詳しくないので「すごいな!」と思いながら興味深く拝見させていただきました。

    ちなみに参考までに教えていただきたいのですが、ぽんひろさんの使われているイノシシのイラストはどうやって作っているのですか?

    私のサイトでもこのカスタマイズを取り入れたいのですが、せっかくならオリジナリティのあるイラストを作成したいと思っています。

    参考までに教えていただければ幸いです。

    • >タマオさん

      ありがとうございます!
      イラストは自作しているわけではなくフリー素材です。

      こちらのサイトです!
      https://stampo.fun/

      • ぽんひろさん

        回答ありがとうございます。
        サイト参考にさせていただきます。

  2. 初めまして。
    こちらの記事を参考に、ボタンを導入することができました。
    とても助かりました。ありがとうございます。

    そこで一つご相談なのですが、一つの記事でこの手のボタンを複数違う位置に表示させるにはどのようにすればよろしいでしょうか…?

    例えば、記事の中盤ぐらいでは真ん中に〇〇のボタンを、記事の終盤では左に△△のボタンを表示させる、といった感じです。

    ご教授いただけると幸いです。よろしくお願いします。

  3. 解決しました。お騒がせしてすいません。

    • >おはようポテトさん

      返信遅くなりまして申し訳ございません。
      解決されたようで良かったです!

ページトップへ