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

ゆ~とっとの家事パパ日記

家事が好きな二児のパパのブログです。日々の生活に役立つワザなど、育児・家事系の記事を中心に書いてます。たまに妻も書きます。

【はてなブログのカスタマイズ】デザインの変更

ブログ
スポンサーリンク

今更ですが、、、デザインの変更をしました。

理由1.もっとかっこいいデザインにしたい

主人からの要望でおしゃれにしたいとのことです。
おしゃれになるかわかりませんが、とりあえず変更してみることにします。

理由2.ページ表示スピードを早くしたい

はてなブログの表示が遅くてイライラすることもあります。
ソーシャルボタンをカスタマイズしたものを導入することによって、少し表示する速度が改善すると聞きました。

理由3.簡単にかっこよくできるものがいい

ソーシャルボタンをカスタマイズしようとしていろいろ調べました。
が、結構手間がかかりそうな感じで、カスタマイズするのが面倒だなと…

そこで見つけたのが、人気1位の

f:id:yu-totto:20160823232743p:plain

これを取り入れてみることにします!!!

テーマ ストア - はてなブログ

インストール

1.プレビューしてインストールを選択し、カスタマイズするブログを選択

f:id:yu-totto:20160823233111p:plain

2.ブログの表示を確認して納得できたら、このテーマをインストールを選択

f:id:yu-totto:20160823233358p:plain

3.完了

f:id:yu-totto:20160823233525p:plain

これでインストールは完了です。
後は、細かい部分をカスタマイズします。

こちらの記事を参考に変更しました。
shiromatakumi.hatenablog.com

サイドバーの表示変更

英語で表示されるとかっこいいかも
なので、英語に変更してます。
変更前:
f:id:yu-totto:20160823234505p:plain

1.デザイン>カスタマイズ>サイドバーを選択

f:id:yu-totto:20160823234226p:plain

2.検索>編集を選択し、タイトルを「Serch」と入力し適用を選択

f:id:yu-totto:20160823234626p:plain

f:id:yu-totto:20160823234810p:plain
変更されました。
他のサイドバーの表示を変えたい場合も、同じような手順で行います。

3.変更を保存を選択

f:id:yu-totto:20160823235852p:plain

これでサイドバーの変更は完了です。

ソーシャルボタン変更

なんだか表示ががたがたですよね。
変更前:
f:id:yu-totto:20160824000409p:plain
ずーと気になってました。
簡単に変更できるみたいなのでやってみます。

1.デザイン>カスタマイズ>記事>記事下を選択

f:id:yu-totto:20160824001426p:plain
下記コードを貼り付ける
※記事上にソーシャルボタンを置きたい場合は、記事上を選択

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--シェアボタン-->
<div class="share-button">
  <div class="share-inner">
    <!--はてブ-->
    <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button color" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
    <!--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 color"><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
    <!--Twitter-->
    <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button color"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
    <!--ググタス-->
    <a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button color"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
    <!--Pocket-->
    <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button color" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
  </div>
</div>
**2.デザイン>カスタマイズ>記事>記事下を選択
[f:id:yu-totto:20160824001426p:plain]
下記コードを貼り付ける
※記事上にソーシャルボタンを置きたい場合は、記事上を選択
※記事上下にソーシャルボタンを置きたい場合は、記事下のみに書きコードを貼り付ける

<!-- シェアボタン数のカウント -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
//Facebookのシェア数を取得
function countFacebook(url, selector) {
  $.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    }
  }).done(function(res){
    $(selector).text(res.share.share_count || 0);
  }).fail(function(){
    $(selector).text('0');
  });
}
//はてなブックマークではてブ数を取得
function countHatebu(url, selector) {
  $.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    }
  }).done(function(res){
    $(selector).text( res || 0 );
  }).fail(function(){
    $(selector).text('0');
  });
}
$(function(){
  countFacebook('{Permalink}', '.facebook-count');
  countHatebu('{Permalink}', '.hatebu-count');
});
</script>

2.記事ページをプレビューを選択

f:id:yu-totto:20160824000909p:plain

f:id:yu-totto:20160824001020p:plain

3.変更を保存を選択

f:id:yu-totto:20160824121901p:plain
これでソーシャルボタンの変更は完了です。

と思い、ブログを確認してみると、シェアされた数が反映されませんね。。。
f:id:yu-totto:20160824002327p:plain

うーん、、、いったん元に戻してまた再挑戦です。。。

では、今日はここまで


追記:2016/8/24
f:id:yu-totto:20160824121415p:plain
シロマティさんにコード修正済みと教えていただきました。
リベンジしてみました!!!
値取れました!!
ありがとうございます!!


P.S.

速度計測も試しにやってみました。

これではかってみました。
gtmetrix.com
こっちは日本語で分析結果を返してくれるのでわかりやすいです。
PageSpeed Insights

カスタマイズ前のボタンで計測

f:id:yu-totto:20160824124117p:plain

f:id:yu-totto:20160824124305p:plain

f:id:yu-totto:20160824125522p:plain

カスタマイズ後のボタンで計測

f:id:yu-totto:20160824125032p:plain

f:id:yu-totto:20160824124850p:plain

f:id:yu-totto:20160824125610p:plain

少しよくなるようです