アジョブジ星通信

進捗が出た頃に更新されるブログ。

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

f:id:azyobuzin:20130522142203p:plain

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

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

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

スクリプト

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

仕組み

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

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

苦労

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