「見出し」の色変更と「この記事が気に入ったら フォロー・購読をお願いします」を設置しました。【レスポンシブ対応】

構築作業もひと段落したつもりでしたが、いろんなブログを見ていると色々と弄りたくなるのがブロガーの性分でしょうか。

今回もブログの構築作業をすすめていきます。

本日のお品書きは・・・

「見出しの色変更」と「この記事が気に入ったらフォロー」の設置になります。

見出しの色変更

テンプレートに「Brooklyn」を使っていますが人気のテンプレートだけあって同じデザインをよく見かけますね。

そこで少し差別化を図ってみたいと思います。

brooklyn.hatenablog.jp

ブログで記事を書くのに必ず使う「見出し」ですが、h3の見出しの色が少し弱いと感じたので背景黒にして、白抜き文字にして目立たせることにしました。

この部分になります。

吹き出し調のデザインなので黒のほうが輪郭がはっきりしていい具合ですね。
テンプレートの色変更は比較的簡単なのですぐにできますよ。

設置方法

「設定」→「デザイン」→「{}デザインCSS」から以下のとおり追記を入れます。

 /* 見出しを黒背景に */
.entry-content h3 {
    color: #fff;
    background-color: #111;
}
.entry-content h3:before {
    border-top-color: #111;
}

元のデザインとの違いですが、白抜き文字のほうがキリッと締まって見えますし見出しが目立ちますね。

こっちのほうがBrooklynに合っているような気がするのは私だけかな？

「この記事が気に入ったらフォロー」の設置

ブログを読んでいただいた方にツイッター、はてな読者、feedlyにフォローしていだけるようにボタンを設置します。

既にサイドバーに設置してあったおなじものを記事下にも載せていたのですが、目立つようで今ひとつ目立たないのでサムネイル画像と一緒に表示して、目立つようにすることにしました。

こんな感じになります。

設置はこちらを参考にさせていただきました。

design.syofuso.com

設置方法

「設定 > デザイン > 記事 > 記事下」から以下のソースを貼り付けます。

その前に、各リンクの設定が必要ですので確認しましょう。

      <li><a class="hatena" href="http://blog.hatena.ne.jp/はてなID/ブログのURL/subscribe" onclick="window.open('http://blog.hatena.ne.jp/はてなID/ブログのURL/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i> </a></li>
      <li><a class="twitter" href="https://twitter.com/ツイッターのID" target="_blank"><i class="blogicon-twitter"></i></a></li>
      <li><a class="feedly" href="https://feedly.com/i/subscription/feed/http://ブログのURL/feed" target="_blank"><i class="blogicon-rss"></i></a></li>

設置するソースは以下の通りになります。

<!-- 気に入ったらフォロー -->
<div class="p-entry__push">
  <div class="p-entry__pushThumb" style="background-image: url('ブログのアイコンなどの画像URLを入れます')"></div>
  <div class="p-entry__pushLike">
    <p>この記事が気に入ったら
      <br>フォロー・購読をお願いします。
    </p>
    <ul class="social-icon">
      <li><a class="hatena" href="http://blog.hatena.ne.jp/はてなID/ブログのURL/subscribe" onclick="window.open('http://blog.hatena.ne.jp/はてなID/ブログのURL/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i> </a></li>
      <li><a class="twitter" href="https://twitter.com/ツイッターのID" target="_blank"><i class="blogicon-twitter"></i></a></li>
      <li><a class="feedly" href="https://feedly.com/i/subscription/feed/http://ブログのURL/feed" target="_blank"><i class="blogicon-rss"></i></a></li>
    </ul>
    <p class="p-entry__note">読者登録で最新情報をお届けします</p>
  </div>
</div>
<!-- 画像を記事の一番上のものに変える -->
<!--jQueryを使用-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
(function ($) {
    $(function() {
        var src = $('.entry-content img:visible:first').attr('src');
        if (!src) return;
        $('.p-entry__pushThumb').css('background', 'url(' + src + ')');
        $('.p-entry__pushThumb').css('background-size', 'cover');
        $('.p-entry__pushThumb').css('background-position', 'center');
    });

})(jQuery);
</script>
<!-- END 気に入ったらフォロー -->

つぎにCSSを設置します。
「設定 > デザイン > {}デザインCSS」から以下のソースを貼り付けます。

/* この記事が気に入ったらフォロー */
/* フォローボタン */
ul.social-icon {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    list-style-type: none;
    -webkit-padding-start: 0;/* user agent stylesheet の無効化 */
}
.social-icon li a {
    display: block;
    margin: 0 5px 5px 0;
    color: #fff;
    width: 50px;/* 丸ボタンの幅 */
    height: 50px;/* 丸ボタンの高さ */
    line-height: 50px;/* 高さに揃える */
    border-radius: 50%;
    text-align:center;
}
.social-icon .hatena {
    background: #fff;
    color: #3d3f44;
  }
.social-icon .hatena .lg {
    font-size: 1.3333333333333333em;
    line-height: .75em;
    vertical-align: -20%;
}
.social-icon .twitter {
    background: #00a1e9;
    color: #fff;
}
.social-icon .feedly {
    background: #87c040;
    color: #fff;
}
/* この記事が気に入ったらバナー */
.p-entry__push {
    margin-bottom: 20px;
    display: table;
    table-layout: fixed;
    width: 100%;
    background-color: #2b2b2b;
    color: #fff;
}
 
.p-entry__pushThumb {
    display: table-cell;
    min-width: 240px;
    background-position: center;
    background-size: cover;
}
 
.p-entry__pushLike {
    display: table-cell;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 18px;
}
 
.p-entry__note {
    margin-top: 15px;
    font-size: 12px;
    color: #fff;
}
@media screen and (max-width: 480px) {
.social-icon li a {
    width: 40px;
    height: 40px;
    line-height: 40px;
}
}

まとめ

無事にできましたか？いかがでしょう。
一段とカッコよくなりましたよね。

ますますブログに愛着が湧いてきました。

ブログのデザインは人それぞれ好みがあるかと思いますが、少し工夫するだけでもっと見易くなるものです。気になるところがあれば、ググれば殆どやり方が見つかります。

自分好みにどんどん改造していきましょう。

では！