記事上 Pocket ボタン スマートフォン対応版

はてなブログがついに記事上編集に対応しました！なのでこのコードはお役御免です！

記事上に Pocket ボタンを表示させる方法 - アジョブジ星通信 の続き

前回、ヘッダーかフッターにコードを突っ込んで実装しましたが、これではスマートフォン版で表示されないじゃん！ということで改良してみました。

スクリプト

上のを記事下に、下のをヘッダーまたはフッターに放り込むと、 PC・スマートフォン両対応になります。

仕組み

ヘッダー・フッター用は前回から変わらず、 entry-header クラスの中に Pocket ボタンを放り込むようになっています。

で、記事下用のほうは、ヘッダー・フッター用のが読み込まれてないとき（つまりスマートフォン版）だけ発動して、 entry-header クラス（スマートフォンでも同じ）のなかに Pocket ボタンを放り込みます。デザイン面を考えて、 PC 版とスマートフォン版では margin-top が違います。

苦労

スマートフォン版だと jQuery のロードが body の最後のほうなので、このスクリプトが実行されるときにはロードされてないという状態になります。 defer 属性も試しましたがうまくいかなかったので、 window.onload まで待機して実行するようにしました。なのでボタンが表示されるまで時間がかかります…。