会員勧誘などを行うサイトによくある画面端にずっと表示される「お申込みはこちら」というボタン。これを日本語では「追従ボタン」と言い、英語では「Sticky bottom（スティッキーボタン）」と言います。
結構設置するの大変なんだろうなぁ・・・なんて勝手に想像してましたが、結構簡単に表示できましたので備忘録を兼ねて紹介しておこうと思います。
ちなみに当サイトにも設置してます。→に表示されているホームボタン（家マーク）がそれです。クリックするとサイトのトップページへ遷移するようになっています（試していただいてもいいですけど戻ってきてくださいね！）。
※スクリプトを使って「ページ先頭からからどの位移動したら・・・」なんて条件を持つものではなく、CSSだけで常にずっと表示される方法ですのであしからず。
画面端へずっと表示される「homeに戻る」などの追従ボタンを設置する方法
ボタンの準備
ボタンから自作すると大変なので、ボタンコンテンツを作成できる無料サービスを利用しましょう。
今回はCMANを利用させていただきました。
作成したらメディアへアップロードしておきましょう
※表示サイズを変えておく必要があるかも知れませんのでサイトに合わせて適宜加工してください。
ボタンの表示
テーマに直接記述・・なんてことはしません。一番簡単なのはテキストウィジェットを作ってコードを追記する方法です。
テーマに搭載されているサイドバーウィジェットやフッターウィジェットなど常に表示されるウィジェットエリアへテキストウィジェットを追加します。
<div class="ha-sticky-buttom"><a href="クリックしたら遷移されるURL"><img src="メディアにアップロードしたボタンのURL" alt="案外簡単！画面端へずっと表示される「homeに戻る」などの追従ボタンを設置する方法|Knowledge Base" width="50" height="auto" class="aligncenter size-full/></a></div>※画像が大きくても幅50pxになるように指定しています
このままだとウィジェットを挿入した場所にボタンが表示されるだけなので、CSSで位置の指定をします。
/* 右にホームボタン */
.ha-sticky-buttom{
position:fixed;
top:150px;
right:0px;
z-index:999;
}
.ha-sticky-buttom:hover {
opacity: 0.7;
}追加するCSSはたったこれだけです。位置を固定して画面の上から150px、右にピッタリの場所、他のコンテンツよりも手前に表示するというコードです。
さらにマウスオーバーしたときに少し薄い色で表示してくださいというコードを追加しています。
これで設置は終了です（簡単すぎます・・・）。
ただこのままだとスマホ表示の場合にもボタンが表示されてしまうので、
@media screen and (max-width: 768px){
.ha-sticky-buttom { display: none;}
}というコードを追記して、画面幅が768px以下の場合は非表示にしてくださいとすればOKです。
なんだかあっけなく設置できました。
