読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

はてなブログスマホ画面の下に固定ボタンをつけるカスタマイズ

Web制作
スポンサーリンク

追記:「シェアボタンを並べる」の、TwitterボタンをURLを修正しました。まきお(id:makio1186)さん、ありがとうございます。

 

はてなブログでカスタマイズ要員となりかけているゆきひーです。もちろん作る過程で学べますし、いろんな方から反応をいただいてるのでとても嬉しいです^^

 

今回はスマホ版の下に固定ボタンというものを作ってみました。

レスポンシブ設定にしている人は対応していませんのでご了承ください。

コピペコード

ここでは、とりあえず簡単さを重視して数個のコピペコードを用意してみます。よりカスタマイズしたい方のためのやり方は後日追記をしようと思っています。

 

共通

共通部分として、アイコンを一部「Font Awesome」から使いますので、

を下の画像にあるように「headに要素を追加」に入れてください。

f:id:ftmaccho:20150530165822j:plain

すでに僕のシェアボタンを利用されている方は、入っています。

 以下、選択部分です。

 

選択

シェアボタンを並べる

完成図はこんな感じです。シェアしてくれ!と言わんばかり。

f:id:ftmaccho:20150821145634p:plain

記事のシェアボタンがスマホ版の下に固定されるようになります。これ設置すると記事上・記事下のシェアボタンは不要になるかもしれません。

これをするには下のコードを、

記事下の部分にコピペするとできます。

f:id:ftmaccho:20150821151437p:plain

 

 あとで読む+TOPへもどる

 あとで読む系の「はてブ」「Pocket」とTOPに戻るボタンです。意外とありがちで便利なパターンじゃないかと思います。こんな感じです。

f:id:ftmaccho:20150821154447p:plain

これは、下のコードを

記事下にコピペしてください。 

欠点としては、ページトップボタンも記事ページにしか表示されなくなることです。コピペする場所をフッターに変えると、シェアボタンなどの方が機能しなくなってしまいます。

 

あとで読む+Feedly+TOPへ戻る

シェアもして、購読もしろ!とのよくばりパターンです。こんな感じ。

f:id:ftmaccho:20150821155742p:plain

くどいか?と思ったのですが意外とバランスも良い感じになりました。コードは

で設置する場所は記事下です。

で、このままだとFeedlyが僕のURLへの購読ボタンのままになっています。ご自身のに変えたい方は10行目の「http://www.yukihy.com」をご自身のブログのURLに変えてください。(全員変えてくださいねw)

 

高さを変えたい

固定ボタンの高さは、各自で変えれた方が良いと思うので説明をしておきます。

例えば「シェアボタンを並べる」ですと、45行目と46行目に

  • height: 40px;
  • line-height: 40px;

という部分があると思います(他のも同じところがあります)。この上の数字を変えていただくと高さが変わります。下の数字は文字の高さなのですが、上と同じにしていただくとバランスよくいくと思います。

40px以下になるとタップしづらいサイズになるとどこかのサイトでみたことがあるので、標準ではその高さにしています(あんまり大きいと邪魔になりますが…)。

 

Pocketボタンのアイコンが反映されない方

僕のシェアボタンを以前使っていただいていた方は、Pocketボタンのアイコンが反映されない可能性があります。原因は「Font Awesome」を新しいバージョンにしていないからなので、上に書いてある「共通」のコードを入れていただければと思います。

www.yukihy.com

 

最後に

以上で終了です。

固定ボタンは正直読む側からするとうっとうしいので、結構悩みました。かなりシンプルさを重視しましたが、あれもこれもと欲張ると肝心の記事が読んでもらえなくなる可能性があることはご承知ください。

もともとはらくからちゃさんからのパスでした笑

lacucaracha.hatenablog.com

質問・設置代行・ブログカスタム依頼などありましたら、お問い合わせからお気軽にどうぞ!
 

 

その他のカスタマイズ

www.yukihy.com