オタクの戯言

オタクが思うがままに書き連ねていく、とりとめのないブログです

はてなブログでフォローボタンや読者登録ボタンをオシャレにする方法

スポンサーリンク

はじめに

当ブログにお越し頂き恐悦至極に存じます。あにおです。


f:id:aniota-alvarado:20170503211229j:plain

もうかなり前からずーーーーーーっとなんとかせねばと思っていた、Twitterのフォローボタンや読者登録ボタン。

この度Facebookにブログを登録したということもあって、いい機会なのでいい加減カスタマイズしようと思い立ちました。

今回は、その方法について調べたものを、備忘録として書き残しておこうと思います。


それでは、最後までお付き合いいただければ幸いです。

記事下(シェアボタンの下)に表示する方法

f:id:aniota-alvarado:20170609174820p:plain

まず、失敗したときのために、適当なテキストなんかにそれぞれバックアップを取っておきます。

その上で、基本的には以下の「いつ俺」というサイト様が教えてくれている通りにすれば、変更が可能なはずです。
www.ituore.com

私の場合は、「headに要素を追加」については以前やったことがあったようなので、HTML共通コードから取り掛かりました。

HTML共通コード

まず私がやったのは、いらないボタンの削除です。

紹介されていたものは、はてな読者ボタン・Facebook・Twitter・Instagram・Feedly・Google+の計6種でしたが、後半の3つはやっていなかったり、いらないと思ったので削除しました。

具体的にいうと、17~28行目ですね。



続いて、私は記事下用3を記事下に設置するつもりだったので、結構飛ばして「はてな読者登録ボタン」のところから始めました。

ここで若干戸惑ったのは、書き換えの部分です。

また詰まらないようにメモっておくと、上から5行目の赤字の部分を以下の通りに書き換えました。

< a class="hatena" href="h ttp://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe" onclick="window.open('h ttp://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe', '', 'width=500,height=400'); return false;" >

から

< a class="hatena" href="h ttp://blog.hatena.ne.jp/aniota-alvarado/aniota-alvarado.hatenablog.com/subscribe" onclick="window.open('h ttp://blog.hatena.ne.jp/aniota-alvarado/aniota-alvarado.hatenablog.com/subscribe', '', 'width=500,height=400'); return false;" >

です(そのまま引用すると、上手く表示できなかったのでところどころスペースが入っています)。
出典:いつ俺



同じ要領で、FacebookとTwitterについてもやっていきました。
Facebook

< a class="facebook" href="URL" target="_blank" >

< a class="facebook" href="h ttps://www.facebook.com/aniota.alvarado2/" target="_blank" >

出典:いつ俺
Twitter

< a class="twitter" href="h ttps://twitter.com/intent/follow?screen_name=shun_hatena" target="_blank" >

< a class="twitter" href="h ttps://twitter.com/intent/follow?screen_name=aniota_alvarado" target="_blank" >

出典:いつ俺

以上の変更をした後、デザイン→カスタマイズ→記事→記事下のコードで、自分が設置したい位置にコピペしました。

f:id:aniota-alvarado:20170609222533p:plain

PC版CSS

これに関しては、特に削らなければならないものもなく、自分の好みに合ったデザインのものを指定の場所にコピペすればいいだけでした。

私のように、ボタンをいくつか削っていたとしても、こちらは何もいじらなくて良いみたいなので、安心してコピペしてください。

場所はデザイン→カスタマイズ→デザインCSSで、私は一番下の行にコピペしました。

f:id:aniota-alvarado:20170609224348p:plain

サイドバーに表示する方法

f:id:aniota-alvarado:20170609224833p:plain

本来は、上の画像のボタンをそのまま交換できれば良かったのですが、どうもそれはできないみたいでした。

そこでまず、重複してしまうのでいらないという人はプロフィール下にあるボタンをはずします。

やり方は、デザイン→カスタマイズ→サイドバー→プロフィールで、読者ボタンやTwitterボタン等のチェックを外すだけです。

f:id:aniota-alvarado:20170609225032p:plain

HTML共通コード

続いて、サイドバーにボタンを設置するためのモジュールを追加します。

デザイン→カスタマイズ→サイドバー→モジュールを追加→HTMLに上で使用した「HTML共通コード」を貼り付けます。

f:id:aniota-alvarado:20170609233933p:plain

f:id:aniota-alvarado:20170609233942p:plain

ブログを見てもらえればわかると思いますが、私はタイトルを「フォローする」にしてプロフィールの下に持ってきました。



なお、この時サイドバー用として、3、4行目に以下の変更点があるので注意してください。
3行目

< div class="content-inner-follow-buttons" >

< div class="sidebar-follow-buttons" >

出典:いつ俺
4行目

< div class="follow-title">< span style="font-size: 8px" >フォローする < /span > < /div >

消去

出典:いつ俺

サイドバー用CSS

こちらは、先ほどコピペした場所である、デザイン→カスタマイズ→デザインCSSに、サイドバー用のものを改めてコピペすれば完了となります。

私はPC版CSSでコピペした次の行から、続けてコピペしましたが、何の問題もありませんでした。

おわりに

以上が記事下と、サイドバーのフォローボタンをオシャレに、スタイリッシュに変更する方法です。

普通の人であればササっとできるのでしょうが、私のようにコードって何さ!というど素人だと、少し手間取るかもしれません。

この記事が、そんなあなたのお役に少しでも立ったならば幸いです。



長くなってしまいましたが、最後まで読んでいただきありがとうございました。

それでは、またのお越しをお待ちしております。