yuma's LOG

なんでも書いちゃう雑記ブログ!

はてなブログをカスタマイズしました!参考サイトをみれば誰でも簡単!フォローボタン、SNSシェア、テーマNaked。

こんにちは、裕真です。

 

数日前にブログのカスタマイズとして、行間が広すぎる場合に短くする方法について書きました。

 

yumasty.hatenablog.com

 

いつもアクセスしてくださっている人はすでに気づいていると思いますが、今回はさらにカスタマイズを加えたので修正箇所と方法、参考サイトを紹介します。

 

テーマの変更

f:id:Yumasty:20170223202918p:plain

 

今回、インストールしたテーマは"Naked"。

Yukihy Lifeのゆきひーさんが作ったはてなブログテーマで無料で利用することができます。かなり作りこまれており、素晴らしい出来なのに無料で提供していただけるなんて嬉しい限りです。

 

www.yukihy.com

 

ゆきひーさんはYukihy Life以外にもNakedのカスタマイズを書いたブログも運営しています。このようにカスタマイズしたいなー、というのは検索するとコード付きで記事にまとめてくれていたりするので重宝します。

 

特徴としては

  • シンプルで使い易い
  • デフォルトのままでもオシャレ
  • 様々な背景色や背景画像に合う
  • レスポンシブ
  • フッターを作りこめる

といったところです。

 

オシャレ・レスポンシブ・カスタム可能なはてなブログテーマ「Naked」リリース! - Yukihy Life

 

今見ているこのブログがNakedをインストールしてあまりいじっていない状況なのでいいなー、と思った人は使ってみましょう。

 

フォローボタンの追加

f:id:Yumasty:20170223214349p:plain

このフォローボタンをカスタマイズ&設置しました。

はてなブログでは初期設定で"読者になる"ボタンが設置されていますが、何か味気ないのでカスタマイズしたいなー、と。そして、ついでに合わせてTwitterFeedlyを合わせて表示しました。

 

参考にした記事はこちら。

www.yukihy.com

 

こちらの記事だけだとはてなブログの読者数が表示されないため、合わせてこちらの記事も参考にしました。

www.visionseichou.com

 

SNSシェアボタン

f:id:Yumasty:20170223222136p:plain

書く記事下に表示されるSNSのジェアボタンを設置しました。

対象のSNSは"はてなブックマーク"、"Facebook"、"Twitter"、"Google"、"Pocket"の5種類です。主なものはカバーできているので十分でしょう。

 

こちらもゆきひーさんの記事を参考にしました。

 

www.yukihy.com

 

そして微修正。

コピペで貼り付けるとFacebookのシェア数を取得するのがうまくいかないでズレてしまいました。。。

 

f:id:Yumasty:20170223223042p:plain

 

ということで修正。

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などのようにテキストにしました。

 

 

ということで今回のカスタマイズの修正と、参考にさせていただいた記事の紹介でした。ワードプレスに比べたらカスタマイズ性低いかなー、と思っていたけど、はてなブログも意外とカスタマイズできるね^-^

 

広告を非表示にする