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

Yukihy Life

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

はてなブログのシェア数付きコピペコードで、記事上にもぴったりのスマート版を追加です

Web制作
スポンサーリンク

現在編集中です。お待ち下さいm(_ _)m

6/7追記1:Pocketの高さが合わないのを修正しました。コピペコード2(2)を修正しています。

7/7追記2:重大な不具合を修正しました。詳しくはこちらをご覧ください

【お知らせ】当ブログで配布していたSNSボタンに関して重大なミスがありますので修正をお願いします - Yukihy Life

7/8追記3:cssを最適化し、サイズ感を調整。あと数字が表示されるまでにグルグルするのをhtmlに入れました。

 

注:この記事は元記事の補完的役割をしています。

 

前回更新した、はてなブログのSNSボタンをコピペだけでシェア数付きにするカスタマイズ。シェア数がでないという不具合が発生していたのですが、それを修正しました。

 こちらが元記事

www.yukihy.com

今回は修正の告知も兼ねて、記事上にも合うスマート版のコピペコードをつくってみました。

 

 

完成図はこんな感じです。

完成した様子はこちら

f:id:ftmaccho:20150607133128j:plain

 

前回のよりもしつこさがなくなっているので、記事上なんかにもスルっとおさまってくれるのではないかと思います。スマホ版にしてもちゃんと合いますし。

 

また、デフォルトのシェアボタンを記事上にすると、かなり時間がたった後にニョキニョキっと遅れて表示されます。これでは記事本文を読んでてもイライラしますし、広告の誤クリックも誘発します。

このカスタマイズでは、ボタン自体はcssで表示しているので(シェア数は遅れるものの)パッとボタンが出てきて、そういったイライラも解消されるといったメリットがあります。

 

カスタマイズ

PC

カスタマイズですが、PC画面は、元記事の「コピペコード2」と「コピペコード4」の代わりに、下の「コピペコード2(2)」と「コピペコード4(2)」を入れてください。

コピペコード2(2)

 貼る位置も同じです。

ちなみに、前回のコピペコード2を貼ってある人は、18行目以下はすでに書き込まれているため、1~17行目のみで大丈夫です。

コピペコード4(2)

 こちらを、ボタンを入れたい場所にコピペしてください。(記事上か記事下でお願いします)

 

スマホ

スマホ版です。(レスポンシブの人は不要)

元記事では、コピペコード1・5・6の三つが必要とのことでした。

この中の、元記事コピペコード5の2~55行目を、コピペコード2(2)に入れ替えてください

 

で、あとはコピペコード6の代わりに、コピペコード4(2)を入れれば大丈夫です。こちらも入れるのは記事上か記事下でお願いします。

 

最後に

以上で完成です。過去のものにちょっと変えただけですが、コピペコードにした方が良いと思ったので、書いてみました。ぜひ活用してみてください。

あと、「こんな風にしたいんだけどコピペコードくれ」というのがありましたら、Twitterなどで言っていただければ作ります!

 

ブログカスタマイズまとめ記事

www.yukihy.com