はてなブログをカスタマイズしました！参考サイトをみれば誰でも簡単！フォローボタン、SNSシェア、テーマNaked。
こんにちは、裕真です。
数日前にブログのカスタマイズとして、行間が広すぎる場合に短くする方法について書きました。
いつもアクセスしてくださっている人はすでに気づいていると思いますが、今回はさらにカスタマイズを加えたので修正箇所と方法、参考サイトを紹介します。
テーマの変更
今回、インストールしたテーマは"Naked"。
Yukihy Lifeのゆきひーさんが作ったはてなブログテーマで無料で利用することができます。かなり作りこまれており、素晴らしい出来なのに無料で提供していただけるなんて嬉しい限りです。
ゆきひーさんはYukihy Life以外にもNakedのカスタマイズを書いたブログも運営しています。このようにカスタマイズしたいなー、というのは検索するとコード付きで記事にまとめてくれていたりするので重宝します。
特徴としては
- シンプルで使い易い
- デフォルトのままでもオシャレ
- 様々な背景色や背景画像に合う
- レスポンシブ
- フッターを作りこめる
といったところです。
今見ているこのブログがNakedをインストールしてあまりいじっていない状況なのでいいなー、と思った人は使ってみましょう。
フォローボタンの追加
このフォローボタンをカスタマイズ＆設置しました。
はてなブログでは初期設定で"読者になる"ボタンが設置されていますが、何か味気ないのでカスタマイズしたいなー、と。そして、ついでに合わせてTwitterとFeedlyを合わせて表示しました。
参考にした記事はこちら。
こちらの記事だけだとはてなブログの読者数が表示されないため、合わせてこちらの記事も参考にしました。
SNSシェアボタン
書く記事下に表示されるSNSのジェアボタンを設置しました。
対象のSNSは"はてなブックマーク"、"Facebook"、"Twitter"、"Google"、"Pocket"の５種類です。主なものはカバーできているので十分でしょう。
こちらもゆきひーさんの記事を参考にしました。
そして微修正。
コピペで貼り付けるとFacebookのシェア数を取得するのがうまくいかないでズレてしまいました。。。
ということで修正。
HTML部分（上記記事のコピペコード④）Facebook
▼ゆきひーさんのコピペ
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
▼ゆうま修正ver
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br> <span class="small-text">Facebook</span></a>
青文字部分のspanが切り替わっています。
ゆきひーさんverでは、Facebookのシェア数をカウントして表示させようとしているようですが、私のブログにコピペした場合はカウント数が取得できず、また他のボタンとズレが発生してしまっていたため、ゆうまverではカウント数を表示せずにtwitterなどのようにテキストにしました。
ということで今回のカスタマイズの修正と、参考にさせていただいた記事の紹介でした。ワードプレスに比べたらカスタマイズ性低いかなー、と思っていたけど、はてなブログも意外とカスタマイズできるね^-^
