はてなブログのサイドバーをカスタマイズ！フォローボタン、Twitterタイムライン、見出しCSSコード

はてなブログのサイドバーをカスタマイズ！フォローボタン、Twitterタイムライン、見出しCSSコード - ハテブカスタム

こんにちは。Palです。
今回は、いろいろな記事を参考にさせていただいて、はてなブログのサイドバーをカスタマイズしました。
フォローボタン、Twitterタイムライン、見出しCSSコードなどのカスタマイズです。
基本的にコードのコピペですべてできると思うものを、あつめました。

今回やること

①サイドバータイトルの変更
②SNSフォローボタンの設置
③Twitterタイムラインを表示
④サイドバーを固定（追従）し、フッター位置で止める
- CSSのみのやりかた
⑤サイドバーにカエレバ・ヨメレバ

順番に、見ていきます。

①サイドバータイトルの変更

まず、こちらをお手本に、サイドバータイトルを変えてみました。
はてなブログで使えるサイドバーカスタマイズまとめ - Minimal Green

こちらが見本です。

はてブをカスタマイズして、見た目をカッコよくしたい！　④サイドバー編（コピペでできます）【初心者のためのはてなブログ（無料版）】 - ハテブカスタム

こちらが、コードです。

「デザインCSS」に、以下を貼り付けてください。
最後の行の、「background-color」の、両端の「/*」「*/」はコメントアウトなので、
外せば文字の背景色を指定できます。

/* サイドバータイトル */
.hatena-module-title {
    color: #222;/* 文字の色 */
    font-size: 120%;/* 文字サイズ */
    padding: .5em 0 .5em .75em;
    border-left: 10px solid  #FCBE4A;/* 左の線 */
    margin-bottom: 20px;/* 下余白 */
    border-bottom: 1px solid #223a70;/* 下線 */
    /*background-color:#edf5f4;*/
}

②SNSフォローボタンの設置

同じく、こちらをお手本に、今度はフォローボタンを設置しました。
コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life

見本です。

こちらは、デザインがかわいくてそのまま使いたかったので、Yukihy Lifeさんのコードのまま、使用させていただきました。

下記のHTMLのコードは、丸デザイン+はてなボタンのポップアップ表示をまとめてあるだけです。
よろしければ、使ってください。

CSSは、Yukihy Lifeさんのコードのままなので、のせていません。

HTML

「サイドバー > +モジュールを追加 > HTML」で、貼り付けてください。

その後、

４行目の「fobitows/rubirubi.hateblo.jp」を、「自分のはてなID / 自分のブログのドメイン（URLの「https://」を除いた部分）」に　※二か所あります。
５行目の「heureux_yoppy」を「自分のTwitterアカウント（@を抜く）」に
６行目の「https://rubirubi.hateblo.jp」を「自分のブログURL」に

おのおの変更してください。

<!--フォローボタン-->
<div class="follow-btn" >
<span style="font-size:80%; text-align:center">フォローする</span><br>
<a class="hatena" href="http://blog.hatena.ne.jp/fobitows/rubirubi.hateblo.jp/subscribe"onclick="window.open('http://blog.hatena.ne.jp/fobitows/rubirubi.hateblo.jp/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i><br><span class="text-small">はてな</span></a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=heureux_yoppy" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="text-small">Twitter</span></a>
<a class="feedly" href="http://feedly.com/i/subscription/feed/https://rubirubi.hateblo.jp/feed" target="_blank"><i class="blogicon-rss lg"></i><br><span class="text-small">Feedly</span></a>
</div>