追記：「シェアボタンを並べる」の、TwitterボタンをURLを修正しました。まきお(id:makio1186)さん、ありがとうございます。
はてなブログでカスタマイズ要員となりかけているゆきひーです。もちろん作る過程で学べますし、いろんな方から反応をいただいてるのでとても嬉しいです^^
今回はスマホ版の下に固定ボタンというものを作ってみました。
レスポンシブ設定にしている人は対応していませんのでご了承ください。
コピペコード
ここでは、とりあえず簡単さを重視して数個のコピペコードを用意してみます。よりカスタマイズしたい方のためのやり方は後日追記をしようと思っています。
共通
共通部分として、アイコンを一部「Font Awesome」から使いますので、
を下の画像にあるように「headに要素を追加」に入れてください。
すでに僕のシェアボタンを利用されている方は、入っています。
以下、選択部分です。
選択
シェアボタンを並べる
完成図はこんな感じです。シェアしてくれ！と言わんばかり。
記事のシェアボタンがスマホ版の下に固定されるようになります。これ設置すると記事上・記事下のシェアボタンは不要になるかもしれません。
これをするには下のコードを、
記事下の部分にコピペするとできます。
あとで読む+TOPへもどる
あとで読む系の「はてブ」「Pocket」とTOPに戻るボタンです。意外とありがちで便利なパターンじゃないかと思います。こんな感じです。
これは、下のコードを
記事下にコピペしてください。
欠点としては、ページトップボタンも記事ページにしか表示されなくなることです。コピペする場所をフッターに変えると、シェアボタンなどの方が機能しなくなってしまいます。
あとで読む+Feedly+TOPへ戻る
シェアもして、購読もしろ！とのよくばりパターンです。こんな感じ。
くどいか？と思ったのですが意外とバランスも良い感じになりました。コードは
で設置する場所は記事下です。
で、このままだとFeedlyが僕のURLへの購読ボタンのままになっています。ご自身のに変えたい方は10行目の「http://www.yukihy.com」をご自身のブログのURLに変えてください。(全員変えてくださいねw)
高さを変えたい
固定ボタンの高さは、各自で変えれた方が良いと思うので説明をしておきます。
例えば「シェアボタンを並べる」ですと、45行目と46行目に
- height: 40px;
- line-height: 40px;
という部分があると思います(他のも同じところがあります)。この上の数字を変えていただくと高さが変わります。下の数字は文字の高さなのですが、上と同じにしていただくとバランスよくいくと思います。
40px以下になるとタップしづらいサイズになるとどこかのサイトでみたことがあるので、標準ではその高さにしています(あんまり大きいと邪魔になりますが…)。
Pocketボタンのアイコンが反映されない方
僕のシェアボタンを以前使っていただいていた方は、Pocketボタンのアイコンが反映されない可能性があります。原因は「Font Awesome」を新しいバージョンにしていないからなので、上に書いてある「共通」のコードを入れていただければと思います。
最後に
以上で終了です。
固定ボタンは正直読む側からするとうっとうしいので、結構悩みました。かなりシンプルさを重視しましたが、あれもこれもと欲張ると肝心の記事が読んでもらえなくなる可能性があることはご承知ください。
もともとはらくからちゃさんからのパスでした笑
