超簡単!はてな、ツイッター、feedlyのフォローボタンを設置

広告

わ~い!超絶ド素人の私にもできました!

はてなの読者になるボタン、twitterツイッター)のフォローするボタン、feedly(フィードリー)に登録するボタン、一気に3つまとめて記事下に設置できました!

 

feedlyのボタンを設置した後、アクセス数がぐんと伸びた!なんて話も無きにしも非ずですからね、前々からボタンの設置にチャレンジしてみたかったんですよね。

これで、読者が増える事、間違いなし!

間違いなし!

間違いなし!

間違いなし!

間違いなし!

間違いなし!

……

参考にさせていただいたのはコチラのサイト!

はてなブログのカスタマイズ界の神と言われていますね。

ゆきひーさんのブログ。

www.yukihy.com

それでは早速、実際の手順をザックリおさらいしていきます。

とはいっても、ほぼコピペのみ。

肝心な部分の書き換えだけ慎重にやれば、HTMLもCSSもほぼ分かんねぇよ、って人でも出来ちゃいます。

まずは、ゆきひーさんのブログの通り、HTMLってやつをコピペ。

今回設置する「フォローボタン3連発(はてなtwitterfeedly)」なんですが、おそらく、記事下に設置するのが一番効果的だと思います。

ただし!

カスタマイズに関して完全にド素人の人は、まずは実験的にサイドバーに設置してみることをオススメします。

私の場合は、まず一度サイドバーに設置して、大丈夫かどうか実際にクリックして確認してから、記事下にも設置しました。

その方が、仮にどこかで間違えてしまって、何度か手直しすることになったとしても、混乱しにくいかと思います。

特に私の場合は、すでに現時点で記事下にごちゃごちゃと書き込んであるので、うっかり全く関係ない部分を削除して泥沼になる可能性がありましたので。

 

さっそく、コピペからの3ヵ所、書き換え

ゆきひーさんが用意してくれたHTMLをコピペしてそのままだと、ゆきひーさんのサイトをフォローすることになってしまいますので、3ヵ所、自分のサイトのURLへ、書き換えなければなりません。

もしも失敗するとしたら、この時のうっかりミスでしょう。

該当部分の削除と書き換えは、慎重に!

コピペするのは、以下のHTMLです。ド素人には超ありがたい!

書き換えた部分は以下の3ヵ所。

ちゃんと書き換えないと、自分のフォロワーが増えませんよ(笑)!

そのままにして僕のフォローボタンを設置していただいても良いのですが、自分へのリンクにしたい方のみ以下のことを行ってください。

 

4行目の「ftmaccho/yukihy.hatenadiary.com」を、「(自分のはてなID)/(自分のブログのURLの「http://」を除いた部分)」に変更

 

5行目の「ftmaccho」を「自分のTwitterアカウントの@を抜いた部分」に変更

 

6行目の「http://www.yukihy.com」を「自分のブログのURL」に変更

 

ということで、私の場合は、こんな感じね。

4行目、すなわち「はてなブログの読者になるボタン」

http://blog.hatena.ne.jp/ftmaccho/yukihy.hatenadiary.com/subscribe

http://blog.hatena.ne.jp/gattolibero/gattolibero.hatenablog.com/subscribe

自分のはてなID / 自分のはてなブログのURLからhttp://を抜いたもの

 

5行目、すなわち「ツイッターのフォローボタン」

https://twitter.com/intent/follow?screen_name=ftmaccho

https://twitter.com/intent/follow?screen_name=gattoliberoTW

自分のツイッターアカウントから最初の@を抜いたもの

 

6行目、すなわち「feedlyRSS登録ボタン」 

http://feedly.com/i/subscription/feed/http://www.yukihy.com/feed

http://feedly.com/i/subscription/feed/http://gattolibero.hatenablog.com/feed

自分のはてなブログのURL

※一番最後の「 /feed 」の部分をうっかり削除しない様に気を付けて! 

 

ここまで出来たら、もうすでに峠は越えている!あとはCSSのコピペだけ。

あとは、ボタンの大きさや、形、色などを変更するための「CSS」をコピペして終了! 

これも、ゆきひーさんが何種類か用意してくれていますので、自分で気に入ったデザインのものを拝借しちゃいましょう。

私が今回、選んだ「四角型」だけでなく、「丸型」や「立体風」などもありますね。

ある程度慣れてきたら、自分でちょっと大きさや形などをいじってみるのも面白いかも。

 

ということで、超絶ビギナーの私でも「はてな」「ツイッター」「feedly」のフォローボタンを設置できた!の巻きでした。