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

マネー報道 MoneyReport

マネーにまつわる報道を取り上げ、自分の切り口で切り取り、噛み砕いてお伝えします。

記事下にフォローボタンを付けるのにホトホト苦労した話

スポンサーリンク
あとで読む

ブログの記事下を弄くり回す

先日から開始したはてなブログの記事下スペースの弄り倒しですが、とりあえずZenbackから「併せて読みたいウィジット派生版(画像無し、ツイート数無し)」に変更しました。

Zenbackを外しちゃうと、今度はフォローボタンが消えちゃうという問題が出てきました。
まぁZenbackにはTwitterのフォローボタン位しかなかったのですが、スマホで表示するとどれ1つとしてフォローボタンがない状況に。
これでは

「このブログ面白いなー。定期的に読もう♪」

と思ってくれた方がいても、RSSフィードや各種フォローボタンがなければ

「なんだよフォローボタンも設置してないのかよ。面倒くさいから、やっぱフォローするのやーめた。」

と折角の読者様を逃がしてしまう事に繋がります。
それは勿体ない!

ぜひともフォローボタンを設置せねば!

フォローボタン設置を決意

いざフォローボタンを設置しようと思ったら、今度は設置方法がわからない・・・。
以前誰かの記事で見かけたのではてなブックマークしてあるかなー、と思ってはてぶを探せど見付けられず・・・(;_;)

きっと何かのサービスなり、詳しい方の記事を見れば一発で設置できるはずなのですが、いかんせんググレども見付けられず(T_T)

やむを得ず自力で

記事下フォローボタン設置作業を開始!

これが再び2時間作業になろうとは・・・

フォローボタン設置に悪戦苦闘

こっからの作業は悲惨でした。

とりあえずフォローボタンの画像をゲットすべく検索♪

ArbentingSocial Media Circles Icon Set - Updated - Arbenting
無料フォローボタンアイコン。

これはすぐに見付かった♪
落としてみると

「あれ?FeedlyやlivedoorRSS向けのアイコンがない・・・」

そりゃあ海外サイトのですしねー。
livedoorRSS向けはないですよねー。
でもFeedlyはあっても良いんじゃ・・・。

なかった2つは従来どおりのアイコンを使うことに。

落とした画像アイコンの内、TwitterとGoogle+、RSSフィードをはてなフォトライフにアップ♪
さぁその画像に、リンクタグを付けて~・・・・、ってうまくいかいやん!?

表示させて見ると下の画像のうち、下に青く出ている文字の様な状態になってしまいました。
本当は上の画像みたくフォローボタンだけが表示されて、クリックするとフォロー先URLに飛ぶはずが、全然そんな風にはなりません。

f:id:MoneyReport:20140201084509p:plain

ほへ?
はてなフォトライフのリンクっぽい奴にはリンクタグ(<a>)で囲ってもダメなの?
コードはこんな感じ。

<a href="http://moneyreport.hatenablog.com/feed" target="_blank" title="rss購読する">[f:id:MoneyReport:20140201075210p:plain]</a>

わからない~(ToT)

しょうがないから過去記事でほとんど読まれていない記事に、やむなくフォローボタンアイコンを貼り付けました。

そこの記事を表示させて、画像を右クリックし「画像URLをコピー」してURLをゲットして、それでコードを書き直します。

<a title="rss購読する" target="_blank" href="http://moneyreport.hatenablog.com/feed"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/M/MoneyReport/20140201/20140201082245.png" border="0" alt"rss購読する"></a>

今度はちゃんと表示されました♪

きれいに見えるかな?

フォローボタンをポロポロ並べて見ました。

PC表示だとこんな感じ。
f:id:MoneyReport:20140201084250p:plain


スマホで表示するとこんな感じ。
f:id:MoneyReport:20140201084258p:plain

どんなもんでしょうか?
FeedlyとlivedoorRSSのフォローボタンも同じデザインで欲しいですね・・・。
今度探して見ようっと。
まぁ今日はこんな所で力尽きるという事で(^^;

まとめ

  • Zenback外すと自前でフォローボタンを設置しないとスマホではフォローボタン0個になる
  • はてなフォトライフの画像リンク(?)はリンクタグ(<a>)で囲ってしまうと画像が表示されなくなる
  • 自前でフォローボタンを設置すると非常に苦労する


どなたか、もっと簡単にフォローボタンを設置する方法をご存知でしたら教えて下さい(TOT)

追記

フォローボタンの動作確認をしてたら、FeedlyRSSの読者が10人、livedoorRSSの読者が7人にもなっていました!
フォローして頂いた皆さん、ありがとうございます!
前にチェックした時は自分自身で登録した1人だけで寂しい思いをしていたのですが、これだけ増えていると嬉しいですね(*^^*)

後ふと気が付いたのですが、ブログTOPに移動してみると各記事下に出ていたはてブボタンやツイッターボタンがなくなっている・・・。
他の方のブログも確認したが、同様だ・・・。
はてなブログの全体デザイン変更されたのかな?