雪ん子’s report

スマホ1つでブログは書けるか⁉ スマホの使い方(初級編)と日々のことをお伝えします。

フォローボタンをカスタマイズ



今週は、はてなブログの設定をいじっていました。

今回は何をしていたかと言うと…

フォローボタンを設置してみました。


押しても私のフォローになりませんので、ひとまず触れてみてください。


シンプルかつ、押すとビヨーン動くあたりにグッときちゃいました。

こちらのサイトで勉強させていただきました。
じょーじさん、ありがとうございます。
georges.hatenablog.jp

元はこちら。

「必要なければボタンを消したり、縦も横も幅を変えてね。」
と、おっしゃっているので、

  • はてなブログの読者登録とTwitterしか使わないので、残りの二つを他のボタンに。
  • 幅や文字の大きさを調整

にチャレンジしてみたいと思います。


目次

HTML

まずはボタンを挿入するための呪文(HTML)をコピーして張り付けます。

先にHTMLを入れておくと、幅などを調整する時にすぐに確認出来るのでオススメです。

挿入場所は本文の中でも、ヘッダーやフッターでも大丈夫です。
お好きな所へ入れてください。

※赤、青、オレンジ、緑、ピンクの部分は自分で設定する部分です。

<div class="follow-btn">
<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/のマーカー部分がドメインです。

設定画面でも確認できます。
f:id:snow0303:20170321181202j:plain:w200

独自ドメインの方はこちら。
f:id:snow0303:20170321181334j:plain:w200

TwitterID(オレンジ)

私の場合は、snow0303156

先頭の「@」は省きます。

Twitterの自分の名前の下に表示されているはずです。
f:id:snow0303:20170321123804j:plain:w200

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 />を省けばOKです。

<!--読者ボタン-->
<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用

ダッシュボードのデザイン→スパナ🔧マーク
f:id:snow0303:20170321184636j:plain:w155f:id:snow0303:20170321184724j:plain:w155

CSSをタップして、枠内に張り付け
f:id:snow0303:20170321184904j:plain:w155f:id:snow0303:20170321184959j:plain:w155

張り付け終わったら「設定を保存する」をタップ
続けてスマホ用も設定する方は、スマホ用の設定も済ませてからで大丈夫です。
f:id:snow0303:20170321190438j:plain:w155

スマホ用

スマホ📱マーク→記事
f:id:snow0303:20170321190810j:plain:w155f:id:snow0303:20170321190929j:plain:w155

今回は記事下の枠内に張り付け
f:id:snow0303:20170321191126j:plain:w155

記事下でなくても、このエリアなら大丈夫です。
(もしかしたら、どこのエリアに入れるかで、ページの読み込み時間に影響するのかもしれませんが…)

↓↓↓

f:id:snow0303:20170322173339j:plain:w155f:id:snow0303:20170322173541j:plain:w155f:id:snow0303:20170322173559j:plain:w155


PCでは、サイドバーのプロフィール欄にHTMLを追加すると、ボタンを表示することも可能です。
CSSは通常のCSS欄に入れてあれば大丈夫です。

スマホ用だと、ヘッダのタイトル下にHTMLもCSSも入れておくと、スマホ用トップ画面(記事一覧画面)でもボタンを表示できるのでオススメですよ。


張り付け終わったら「設定を保存する」をタップ
f:id:snow0303:20170321190438j:plain:w155

※先頭行 <style type="text/css">
最終行 </style>
はスマホ用のCSSですので、PC用では省いて下さい。

また、スマホ用で既に入れてある方は、
<style type="text/css">と</style>の間にコードを入れてください。

例えば

<style type="text/css">
見出し用のコード
</style>
で入っている方は
<style type="text/css">
見出し用のコード
今回のフォローボタンのコード
</style>
にすればOKです。

※赤、青、オレンジ等の色つきになっている所は私が変更した部分です。

※私はレスポンシブを使っていないので、スマホ用を紹介します。PC用も基本は同じで、お好みで数字を変更するだけです。

お待たせしました。ここからコードです。

<style type="text/css">

/*********フォローボタン**********/
.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をいじる

私は、ボタンが2つの設定ですが、もっとボタンを使う方も縦横の幅の調整は、これから紹介する場所をいじればどうにかなると思います。

横幅(赤)

width: 95%;/*横幅*/

単位を「px」で設定すると、画面の幅によって合わないこともあるので、「%」にしています。

画面の幅ちょうどが100%

私はボタンを2つしか使わないので、大きすぎても間延びするので減らしてみました。

横幅については、うまく変更しないと横揺れしてしまうので注意が必要です。

横揺れとは…

スマホで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フォントの一覧と使い方まとめ - しろかい!



以上でカスタマイズは終了です。