今週は、はてなブログの設定をいじっていました。
今回は何をしていたかと言うと…
フォローボタンを設置してみました。
押しても私のフォローになりませんので、ひとまず触れてみてください。
シンプルかつ、押すとビヨーン動くあたりにグッときちゃいました。
じょーじさんのサイトで勉強させていただきました。
じょーじさん、ありがとうございます。
（元記事は消してしまったみたいなので、リンクを貼れず申し訳ありません。）
元の見た目はこちら。
「必要なければボタンを消したり、縦も横も幅を変えてね。」
と、おっしゃっているので、
- はてなブログの読者登録とTwitterしか使わないので、残りの二つを他のボタンに。
- 幅や文字の大きさを調整
にチャレンジしてみたいと思います。
HTML
まずはボタンを挿入するための呪文（HTML）をコピーして張り付けます。
先にHTMLを入れておくと、幅などを調整する時にすぐに確認出来るのでオススメです。
挿入場所は本文の中でも、ヘッダーやフッターでも大丈夫です。
お好きな所へ入れてください。
※赤、青、オレンジ、緑、ピンクの部分は自分で設定する部分です。
<ul>
<!--読者ボタン-->
<li class="btn1">
<a href="http://blog.hatena.ne.jp/はてなID/はてなドメイン/subscribe" target="_blank"><span class="btn1-icon"><br /></span>Hatena</a></li>
<!--Twitterボタン-->
<li class="btn2">
<a href="https://twitter.com/intent/follow?screen_name=ツイッターID" target="_blank"><span class="btn2-icon"><br /></span>Twitter</a></li>
<!--Feedlyボタン-->
<li class="btn3">
<a href="FeedlyのURL" target="_blank"><span class="btn3-icon"><br /></span>Feedly</a></li>
<!--Facebookボタン-->
<li class="btn4">
<a href="FacebookのURL" target="_blank"><span class="btn4-icon"><br /></span>Facebook</a></li>
</ul>
</div>
ボタンの間に隙間ができてしまう場合は改行をなくしてみてください。
はてなID（赤）
私だったら、snow0303
心配だったらhttps://profile.hatena.ne.jp/で確認してみてください。
はてなドメイン（青）
私のは、www.snow0303.com
自分のサイトのURLの
http://www.snow0303.com/のマーカー部分がドメインです。
設定画面でも確認できます。
独自ドメインの方はこちら。
TwitterID（オレンジ）
私の場合は、snow0303156
先頭の「@」は省きます。
Twitterの自分の名前の下に表示されているはずです。
Feedly、Facebook（緑）
私は設定していませんが、自分のページを開く時に使うURLを入れれば大丈夫なはずです。
私は、FeedlyのURLとFacebookのURLの部分に自分のサイトのURLを入れています。
項目名（ピンク）
「読者登録する」や「フォローする」に変更できます。
ロゴと文字を横並びにしたい場合は
<!--読者ボタン-->
<li class="btn1">
<a href="http://blog.hatena.ne.jp/はてなID/はてなドメイン/subscribe" target="_blank"><span class="btn1-icon"><br /></span>Hatena</a></li>
の、最後の行にある<br />を省けばＯＫです。
<!--読者ボタン-->
<li class="btn1">
<a href="http://blog.hatena.ne.jp/はてなID/はてなドメイン/subscribe" target="_blank"><span class="btn1-icon"></span> 読者登録</a></li>
こんな感じ。
CSS
下のコードを張り付けると、HTMLを挿入した部分がボタンに変わります。
CSSの挿入場所
PC用
ダッシュボードのデザイン→スパナ🔧マーク
CSSをタップして、枠内に張り付け
張り付け終わったら「変更を保存する」をタップ
続けてスマホ用も設定する方は、スマホ用の設定も済ませてからで大丈夫です。
スマホ用
スマホ📱マーク→記事
今回は記事下の枠内に張り付け
記事下でなくても、このエリアなら大丈夫です。
（もしかしたら、どこのエリアに入れるかで、ページの読み込み時間に影響するのかもしれませんが…）
PCでは、サイドバーのプロフィール欄にHTMLを追加すると、ボタンを表示することも可能です。
CSSは通常のCSS欄に入れてあれば大丈夫です。
スマホ用だと、ヘッダのタイトル下にHTMLもCSSも入れておくと、スマホ用トップ画面（記事一覧画面）でもボタンを表示できるのでオススメですよ。
張り付け終わったら「変更を保存する」をタップ
※先頭行 <style type="text/css">
最終行 </style>
はスマホ用のCSSですので、PC用では省いて下さい。
また、スマホ用で既に入れてある方は、
<style type="text/css">と</style>の間にコードを入れてください。
例えば
見出し用のコード
</style>
見出し用のコード
今回のフォローボタンのコード
</style>
※赤、青、オレンジ等の色付きになっている所は私が変更した部分です。
※私はレスポンシブを使っていないので、スマホ用を紹介します。PC用も基本は同じで、お好みで数字を変更するだけです。
お待たせしました。ここからコードです。
/*********フォローボタン**********/
.follow-btn{
width: 95%;/*横幅*/
margin: 5px 0px 5px 0px;
}
.follow-btn ul {
list-style: none;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
}
.follow-btn li {
height:52px;/*縦の幅*/
width: 100%;
-webkit-transition: width 0.3s ease-out;
transition: width 0.3s ease-out;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.follow-btn li:hover {
width: 200%;
}
.follow-btn li span{
line-height:1.2;
font-size:180%;
font-weight: normal;
font-style: normal;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.btn1{
background: #5F5E5E;/*読者ボタンの背景色*/
}
.btn2{
background: #55ACEE;;/*Twitterの背景色*/
}
.btn3 {
background: #82C36F;/*Feedlyの背景色*/
}
.btn4 {
background: #6998b9;/*Facebookの背景色*/
}
.btn1-icon:before{
content: "\f000";/*はてなアイコン*/
display: inline-block;
font-family: blogicon;
font-size: 120%;
}
.btn2-icon:before{
content: "\f035";/*Twitterアイコン*/
display: inline-block;
font-family: blogicon;
font-size: 120%;
}
.btn3-icon:before{
content: "\f04e";/*Feedlyアイコン*/
display: inline-block;
font-family: blogicon;
font-size: 120%;
}
.btn4-icon:before{
content: "\f036";/*Facebookアイコン*/
display: inline-block;
font-family: blogicon;
font-size: 120%;
}
.follow-btn a {
width:100%;
height:100%;
font-size: 13px;
line-height: 1;
font-weight: normal;
text-decoration: none;
text-align: center;
color: #fff;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
</style>
幅などを変えるためにCSSをいじる
私は、もっとボタンの数を変える方も縦横の幅の調整は、これから紹介する場所をいじればどうにかなると思います。
横幅（赤）
width: 95%;/*横幅*/
単位を「px」で設定すると、画面の幅によって合わないこともあるので、「%」にしています。
画面の幅ちょうどが100%
私はボタンの幅を少し減らしてみました。
横幅については、うまく変更しないと横揺れしてしまうので注意が必要です。
スマホでwebサイトを見ていると、たまに、画面が左右に動いてしまうページに出会ったことはないでしょうか？
それが、一般的に「横揺れ」と呼ばれているようです。
画像のサイズ等が画面の幅とあっていないと、画像幅に合わせてページが広がってしまうので、左右に動いてしまうのです。
ちょっと鬱陶しい時があります。
縦幅（青）
height:52px;/*縦の幅*/
ちょっとずつ数を減らしながら、間延びしない程度に減らしました。
行の高さ（オレンジ）
line-height:1.2;
font-size:180%;
ロゴと文字を二行にしている場合は、縦の幅を狭くしたら、文字が欠けてしまうと思います。
なので、行間（line-height）の数字を減らしてみたら、マークも文字も表示されました。
バランスを見ながら、font-sizeの％を変えてみてもいいと思います。
縦幅内で中央揃え（明るい紫）
真ん中にしたかったので、念のため
vertical-align: middle;
を追加しました。
背景色（緑）
background: #5F5E5E;/*読者ボタンの背景色*/
#5F5E5Eの部分がカラーコードです。
カラーコードはこちらで確認できます。
html-color-codes.info
好みの色に変更してください。
文字の色（ピンク）
color: #fff;
#fffの部分がカラーコードです。
こちらも好きな色に変更可能です。
ロゴの大きさ（紫）、文字の大きさ（サーモンピンク）
基本では入っていない font-size: 120%;を追加してロゴを大きく、文字の大きさ（サーモンピンク）を小さくしました。
ロゴ（山吹色）
上の例ではFeedlyとFacebookのアイコンのコードのままです。
私は自分のサイトへつながるボタンに変更したのでアイコンも変更しています。
アイコンはしろかい！さん（id:shun9167）でコードを紹介してくれています。
はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい！
以上でカスタマイズは終了です。
