過去にも『読者になるボタン』のカスタム記事を書きましたが、今回はその他のフォローボタンもまとめて一新しました！複数のSNSをやっている方には、このボタンデザインはおススメ！

まずは完成形

マウスを乗せるか、タップしてみてくださーい！どう？横にビヨーンで伸びたり縮んだり！かわいいですね。キュートですね。

このデザインのおススメポイントは、画面サイズやサイドバーなどのサイズに自動でピッタリサイズになる点です。

というわけでさっそく使い方を説明していきます。

HTML

まずはHTMLに各自みんなのURLリンクを貼り付けていきましょう。

<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は僕で言うと『george-gogo』です。自分のプロフィールで確認できます。

はてなドメインというのは、自分のブログのURLの『http://』を除いたものです。僕のブログはhttp://georges.hatenablog.jp/なので、georges.hatenablog.jpがドメインになります。

ツイッターIDは『@』を除いたものを貼って下さい。

FeedlyとFacebookは自分のページのURLをそのまま貼り付けてOKです。

いらないボタンは消してOK

「僕は読者ボタンとTwitterだけで充分だよー」などの人は、各ボタンのHTMLの『<li>から</li>』の範囲を削除しちゃって大丈夫です！ちょうど僕が青色でコメントを入れている間ですね。

HTMLコピペの場所

サイドバーに貼る（PC）

1. デザイン
2. カスタマイズ
3. サイドバー
4. モジュールを追加
5. HTML

記事下に貼る（PC）

1. デザイン
2. カスタマイズ
3. 記事
4. 記事下

記事下に貼る（スマホ）

1. デザイン
2. スマートフォン（スマホのマーク）
3. 記事
4. 記事下

CSS

もう後はCSSをコピペするだけ！終わったようなもんです。

/*********フォローボタン**********/
.follow-btn{
 width: 100%;
 margin: 5px 0px 5px 0px;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;
 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:2.5;
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.btn1{
 background: #5F5E5E;/*読者ボタンの背景色*/
}
.btn2{
 background: #6FB6C3;/*Twitterの背景色*/
}
.btn3 {
 background: #82C36F;/*Feedlyの背景色*/
}
.btn4 {
 background: #6998b9;/*Facebookの背景色*/
}
.btn1-icon:before{
 content: "\f000";/*はてなアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn2-icon:before{
 content: "\f035";/*Twitterアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn3-icon:before{
 content: "\f04e";/*Feedlyアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn4-icon:before{
 content: "\f036";/*Facebookアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.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;
}

はい！これをコピペして下さい！

PC

1. デザイン
2. カスタマイズ
3. カスタムCSS

スマホ（PROユーザー限定）

1. デザイン
2. スマートフォン
3. ヘッダー
4. タイトル下

もしこれが初めてのカスタムという人は、CSSを<style></style>で囲んで下さい！これをやらなきゃ、反映されないのでね。

<style>
ここにさっきのCSS全文をコピペ！
</style>

PCの方は囲まないで大丈夫です！

上手くアイコンが反映されない方

各ボタンのアイコンの箇所が数字の羅列になってしまうことがあるようです。正確な理由は分かりませんが、一応対処法です。

おそらく『\（バックスラッシュ）』が上手くコピーできていないのが原因だと思います。僕も何度も自分のコードのコピペを繰り返してみたら、この現象がたまに発生しました。何でかは分からないんだけど…。

とにかく『\』を使用している個所は緑色でコメントをしました。

このバグが出ている方は、自分のカスタムCSSに手打ちで『\』を追加してみてください。

windowsのキーボードでは、ひらがなの『ろ』の部分、Macでは『option+￥』で入力できます。これで解決できると思いますが、それでも上手く表示ができない方はご連絡ください。

さらにカスタマイズしたい人

サイズをコンパクトに

まず僕のこの記事の下のボタンを見てください。横幅いっぱいで極太です。これをスマートにします。

/*********フォローボタン**********/
.follow-btn{
 width: 400px;/*横幅*/
 margin: 5px auto 5px auto;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;/*縦の幅*/
 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:2.5;
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.btn1{
 background: #5F5E5E;/*読者ボタンの背景色*/
}
.btn2{
 background: #6FB6C3;/*Twitterの背景色*/
}
.btn3 {
 background: #82C36F;/*Feedlyの背景色*/
}
.btn4 {
 background: #6998b9;/*Facebookの背景色*/
}
.btn1-icon:before{
 content: "\f000";
 display: inline-block;
 font-family: blogicon;
}
.btn2-icon:before{
 content: "\f035";
 display: inline-block;
 font-family: blogicon;
}
.btn3-icon:before{
 content: "\f04e";
 display: inline-block;
 font-family: blogicon;
}
.btn4-icon:before{
 content: "\f036";
 display: inline-block;
 font-family: blogicon;
}
.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;
}

こんな感じになります（スマホからこの記事を見ていると余り違いがないかも）。

これもいいねー。自分の使うボタンの数でCSSの一番上の横幅の設定をいじってみてください。ボタン1つあたり100pxくらいが丁度いいんじゃないかな。3つしかボタンを使わない方は300pxてな感じで。

さらにチョット下にある縦の幅で縦もお好きに調整してみてください！でも余り縦幅を小さくすると文字が入らなくなるので注意！

色の変更

CSSの途中で色が変更できるところにコメントを付けていますので、ご自分で好きな色に変更してください！

HTMLカラーコード

ちょっと解説（飛ばしてよし）

基本的には凄く簡単な仕組みです。マウスホバー時のwidthを可変させているだけ。でもtransitionを使ってビヨーンとなっている風に見せているんです。各ボタンにはwidthをかけないで親要素でボックス幅を決めているので、ホバーされたボタン以外は小さくなるってところがミソですな。

まとめ

どうでしょう、シンプルだけど他にあまりないデザインで、素敵な感じのボタンを目指したのですが。まいっか、僕は気に入りました！

もし動作が安定していなかったり、分からないことがあればコメントでもTwitterでも質問してくださいねー！

おしまい。

▼もしも勉強するならこの本がマジでおすすめ。学校で使ってました。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

created by Rinker

¥2,760 (2021/09/27 23:42:36時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

当ブログははてなブログからWordpressに移行しました。移行はしたけれど当サイトのはてなブログカスタム記事にて紹介しているCSSカスタムは基本的にははてなブログで使用することができます。
カスタムはすべて自己責任でお願います。

2年間続けたはてなブログから、ワードプレスに引っ越した理由

2018年1月21日

はじめに

参考記事としてこちらの記事を参考にいたしました。

akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。

上記の記事内に「どなたか改良版をお願いします。」と書かれているので正々堂々と改良いたします！

追記：少しCSSを修正しました。（2/24）

完成系

という茶番劇を繰り広げることができますぞ！

まずはCSSをコピペしよう！

はてなブロガーの方はいつも通り「デザイン」「カスタムCSS」にペロっと貼り付けてくださいな。その他のブログサービスやホームページの方は各自のスタイルシートに貼り付けてください。

スマホ版のデザインを分けて設定している方は、しっかりスマホ用のカスタムページにもCSS全文を貼り付けてくださいね！

/*****ここから会話のCSS*****/
.talk-wrap{
 display: block;
 clear: both;
 margin:0 auto 3px auto;
 }
.talk-wrap p{
 margin:0;
 }
 .left-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 background: no-repeat;
 background-size: 180%;
 background-position: center;
 float:left;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
 border: 3px solid #fff; /*左のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-left{
 float:right;
 position: relative;
 background: #fff; /*左の会話の背景色*/
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
 margin-bottom: 10px;
 }
.talk-left:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #666;
 position: absolute;
 left: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-left:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-right-color: #fff;
 position: absolute;
 left: -16px;
 top: 25%;
 margin-top: -8px;
}
 .right-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius:50%;
 background: no-repeat;
 background-size: 180%;
 background-position: center;
 float:right;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
 border: 3px solid #FFF; /*右のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-right{
 float:left;
 position: relative;
 background: #fff; /*右の会話の背景色*/
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
 margin-bottom:10px;
 }
 .talk-right:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #666;
 position: absolute;
 right: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-right:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-left-color: #fff;
 position: absolute;
 right: -16px;
 top: 25%;
 margin-top: -8px;
}
.talk-end{
 clear:both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
 .left-icon{
 width: 80px;
 height: 80px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 80px;
 height: 80px;
 }
 .talk-right{
 width: 65%; 
 }
 }
 @media screen and (max-width: 380px){
 .left-icon{
 width: 60px;
 height: 60px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 60px;
 height: 60px;
 }
 .talk-right{
 width: 65%; 
 }
 }

ブログでの使い方

<!--左の会話-->
<div class="talk-wrap">
<div class="left-icon" style="background-image: url('ここに左側の人の画像のURLを貼って下さい！');"></div>
<div class="talk-left">
<p>会話内容をここに記述してください！</p>
</div>
</div>
<!--左はここまで-->
<!--右の会話-->
<div class="talk-wrap">
<div class="right-icon" style="background-image: url('ここに右側の人の画像のURLを貼ってください！');"></div>
<div class="talk-right">
<p>会話内容をここに記述してください！</p>
</div>
</div>
<!--右はここまで-->
<!--↓会話部分の最後にこれを必ず付け加えて↓-->
<div class="talk-end"></div>

• まずこれをブログのHTML編集での会話を挿入したい箇所に貼り付けてください。
• 左の会話に画像URLを貼り付けてください。画像のURLの取得方法はこちらの記事で。
• 会話の内容を書いてください。普段通りに太字や文字色なんかも使えます。
• 右の会話にも同じことをやって下さい。
• 会話をさらに伸ばすときは、最後の行の『↓会話部分の~』の上まで、つまり左と右の会話部分のみをコピペで増やして下さい。
• 最後には必ず『↓会話部分の~』を付け加えてください！

簡単解説（飛ばして良し！）

akiueoさんとの最大の違いは、アイコン画像を背景で表示していること。これによって元画像の形に依存しないで円で画像を表示しています。

他にもはてなブログカスタム記事書いてます！

まとめ

おしまい。

▼もしも勉強するならこの本がマジでおすすめ。学校で使ってました。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

posted with カエレバ

エビスコム ソシム 2014-10-28

Amazonで購入

楽天市場で購入

当ブログははてなブログからWordpressに移行しました。移行はしたけれど当サイトのはてなブログカスタム記事にて紹介しているCSSカスタムは基本的にははてなブログで使用することができます。
カスタムはすべて自己責任でお願います。

2年間続けたはてなブログから、ワードプレスに引っ越した理由

2018年1月21日

はじめに

すべてCSSのみで作ってあるので簡単に導入することができます。

IE（Internet Explorer）を使っている方は、もしかしたら上手く動かないボタンがあるかもしれません。とても気を使って作ったつもりですが、念のため。そしてできる限りIEを使うのは止めましょう…まじで

スマホにも対応しているので、押して遊んでみてください！

はてなブロガーの方へ

はてなブロガーの方は、全て『コピペ一発』で大丈夫なはずです。今使っているテーマのCSSを上書きできるように細かく作りました。大丈夫なはず（多分ね）。

いつも通り「デザイン」「カスタムCSS」にペロっと貼ってくださいね！

はてなブロガーではない方へ

.entry-content .entry-see-more と書いてある部分をご自分のカスタマイズをしたい＜a＞タグのクラス名に変更すればそのまま使えるはずです。

色変更について

すべてのボタンの色を簡単に変更できる箇所は赤色でコメントを書いています。自分の好きな色に変えたら楽しいと思います！

HTMLカラーコード

このサイトでカラーコードは分かります。

角丸四角形について

見本で普通の四角形と差を付けるために『30』と数値を入れていますが、数値を小さくすれば、角は小さくなっていきます。お好みでどうぞ。

ボタンサイズについて

widthと書かれているものがボタンの横幅、heightが高さです。line-heightも高さ（height）と同じ数字を入れるといい感じです。

四角形＋角丸四角形のボタン

ノーマルタイプ

続きを読む

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 150px;
 height: 50px;
 line-height: 50px;
 color: #FFF;/*文字色*/
 background-color:#9EB8F3;/*背景色*/
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 display: inline-block;
 text-decoration: none;
-webkit-border-radius: 0px;/*角丸はここを『30』*/
 border-radius: 0px; /*角丸はここを『30』*/
 -webkit-transition: all .3s;
 transition: all .3s;
}
.entry-content .entry-see-more:hover {
 color: #FFF;/*押した後の文字色*/
 background-color: #EA878D;/*押した後の背景色*/
}

押すと線になるタイプ

続きを読む

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 146px;
 height: 46px;
 line-height: 46px;
 color: #FFF;/*文字色*/
 background-color:#9EB8F3;/*背景色*/
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 display: inline-block;
 text-decoration: none;
 -webkit-border-radius: 0px;/*角丸はここを『30』*/
 border-radius: 0px; /*角丸はここを『30』*/
 border: solid 2px #9EB8F3;/*押す前の線の色（同色の枠線があります）*/
 -webkit-transition: all .3s;
 transition: all .3s;
}
.entry-content .entry-see-more:hover {
 color: #9EB8F3;/*押した後の文字色*/
 background-color: transparent;
 border: solid 2px;
 border-color: #9EB8F3;/*線の色*/
}

線が点線になる

続きを読む

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 150px;
 height: 50px;
 line-height: 50px;
 color: #9EB8F3;/*文字色*/
 background-color: transparent;/*背景色なし*/
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 display: inline-block;
 text-decoration: none;
-webkit-border-radius: 0px;
 border-radius: 0px; 
 -webkit-transition: all .3s;
 transition: all .3s;
border: solid 2px;
 border-color: #9EB8F3;/*線の色*/
}
.entry-content .entry-see-more:hover {
 color: #9EB8F3;/*押した後の文字色*/
 background-color: transparent;
 border: dotted 2px;
 border-color: #9EB8F3;/*点線の色*/
}

立体タイプ（へこむ）

続きを読む

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 150px;
 height: 50px;
 line-height: 50px;
 color: #FFF;/*文字色*/
 background-color:#9EB8F3;/*背景色*/
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 display: inline-block;
 text-decoration: none;
 -webkit-border-radius: 0px;/*角丸はここを『30』*/
 border-radius: 0px; /*角丸はここを『30』*/
 box-shadow: 0 4px 0 #8CA3D8;/*影の色*/
text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.entry-content .entry-see-more:hover {
 color: #FFF;/*押した後の文字色*/
 background-color:#9EB8F3;/*背景色*/
 box-shadow: 1px 3px 1px #8CA3D8 inset;/*押した後の影の色*/
}

立体タイプ（でっぱる）

続きを読む

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 150px;
 height: 50px;
 line-height: 50px;
 color: #FFF;/*文字色*/
 background-color:#9EB8F3;/*背景色*/
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 display: inline-block;
 text-decoration: none;
 -webkit-border-radius: 0px;/*角丸はここを『30』*/
 border-radius: 0px; /*角丸はここを『30』*/
 box-shadow: 0 4px 0 #8CA3D8;/*影の色*/
 text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
 position: relative;
}
.entry-content .entry-see-more:hover {
 color: #FFF;/*押した後の文字色*/
 background-color:#9EB8F3;/*背景色*/
 box-shadow: 0px 8px 0px #8CA3D8;/*押した後の影の色*/
 top: -4px;
}
.test11:active {
 top: 3px;
 box-shadow: none;
}

横に大回転

続きを読む

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 150px;
 height: 50px;
 line-height: 50px;
 color: #FFF;/*文字色*/
 background-color:#9EB8F3;/*背景色*/
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 display: inline-block;
 text-decoration: none;
 -webkit-border-radius: 0px;/*角丸はここを『30』*/
 border-radius: 0px; /*角丸はここを『30』*/
 transition: all 1s ease;
 -webkit-transition: all 1s ease;
}
.entry-content .entry-see-more:hover {
 color: #FFF;/*押した後の文字色*/
 background-color: #9EB8F3;/*押した後の背景色*/
 transform: rotate(720deg);/*360で1回転、720で2回転…*/
 -webkit-transform: rotate(720deg);/*同じ数値を*/
}

バイブレーション（ぶるぶる）

続きを読む

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 150px;
 height: 50px;
 line-height: 50px;
 color: #FFF;/*文字色*/
 background-color: #9EB8F3;/*背景色*/
 font-size: 18px;
 text-align: center;
 display: inline-block;
 text-decoration: none;
 -webkit-border-radius: 0px;/*角丸はここを『30』*/
 border-radius: 0px;/*角丸はここを『30』*/
 font-weight: 500;
 transition: all 1s ease;
 -webkit-transition: all 1s ease;
}
.entry-content .entry-see-more:hover {
 color: #fff;/*押した後の文字色*/
 background-color: #9EB8F3;/*押した後の背景色*/
 animation: bulubulu 0.2s linear infinite;
 -webkit-animation: bulubulu 0.2s linear infinite;
}
@keyframes bulubulu {
0% { transform: translate(3px, 2px) rotate(0deg); }
10% { transform: translate(-2px, -3px) rotate(-1deg); }
20% { transform: translate(-4px, 0px) rotate(1deg); }
30% { transform: translate(0px, 3px) rotate(0deg); }
40% { transform: translate(2px, -2px) rotate(1deg); }
50% { transform: translate(-2px, 3px) rotate(-1deg); }
60% { transform: translate(-4px, 2px) rotate(0deg); }
70% { transform: translate(3px, 2px) rotate(-1deg); }
80% { transform: translate(-2px, -2px) rotate(1deg); }
90% { transform: translate(2px, 4px) rotate(0deg); }
100% { transform: translate(2px, -3px) rotate(-1deg); }
}

いろんな形

線が伸びる

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 150px;
 height: 50px;
 line-height: 50px;
 color: #9EB8F3;/*文字色*/
 background-color: transparent;/*背景色なし*/
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 display: inline-block;
 text-decoration: none;
-webkit-border-radius: 0px;
 border-radius: 0px; 
 -webkit-transition: all .3s;
 transition: all .3s;
border-top: solid 2px;
border-bottom: solid 2px;
 border-color: #9EB8F3;/*線の色*/
}
.entry-content .entry-see-more:hover {
 color: #9EB8F3;/*押した後の文字色*/
 background-color: transparent;/*押した後の背景色*/
width: 300px;
}

丸が巨大化

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 100px;
 height: 100px;
 line-height: 100px;
 color: #FFF;/*文字色*/
 background-color:#9EB8F3;/*背景色*/
 font-size: 14px;
 font-weight: 500;
 text-align: center;
 display: inline-block;
 text-decoration: none;
-webkit-border-radius: 50%;
 border-radius: 50%;
 -webkit-transition: all .5s;
 transition: all .5s;
}
.entry-content .entry-see-more:hover {
 color: #FFF;/*押した後の文字色*/
 background-color: #9EB8F3;/*押した後の背景色*/
width: 120px;
 height: 120px;
 line-height: 120px;
font-size: 18px;
}

丸が回転

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 120px;
 height: 120px;
 line-height: 120px;
 color: #FFF;/*文字色*/
 background-color:#9EB8F3;/*背景色*/
 font-size: 15px;
 font-weight: 500;
 text-align: center;
 display: inline-block;
 text-decoration: none;
-webkit-border-radius: 50%;
 border-radius: 50%;
 -webkit-transition: all 1s ease;
 transition: all 1s ease;
}
.entry-content .entry-see-more:hover {
 color: #FFF;/*押した後の文字色*/
 background-color: #9EB8F3;/*押した後の背景色*/
 transform: rotate(720deg);/*360で1回転、720で2回転…*/
 -webkit-transform: rotate(720deg);/*同じ数値を*/
}

最後にもういっちょ

オートマチックグラデーションスペシャルサンダー

続きを読む

続きを読む

.entry-content .entry-see-more {
 padding:0;
 width: 150px;
 height: 50px;
 line-height: 50px;
 color: #FFF;/*文字色*/
 background-color: #DA5555;/*最初の背景色です*/
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 display: inline-block;
 text-decoration: none;
-webkit-border-radius: 0px;/*角丸はここを『30』*/
 border-radius: 0px; /*角丸はここを『30』*/
 box-shadow: 1px 4px 1px #555;
 text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
 position: relative;
 animation: special 8s infinite;
 -webkit-animation: special 8s infinite;
}
@-webkit-keyframes special {
 0% { background-color: #DA5555; }/*お好みの色をどうぞ*/
 20% { background-color: #DA55C8; }
 40% { background-color: #7A55DA; }
 60% { background-color: #55B2DA; }
 80% { background-color: #55B2DA; }
 100% { background-color: #DAAF55; }
}
@keyframes special {
 0% { background-color: #DA5555; }/*上と同じで*/
 20% { background-color: #DA55C8; }
 40% { background-color: #7A55DA; }
 60% { background-color: #55B2DA; }
 80% { background-color: #55B2DA; }
 100% { background-color: #DAAF55; }
}
.entry-content .entry-see-more:active {
 top: 3px;
 box-shadow: none;
}
.entry-content .entry-see-more:hover {
 box-shadow: 1px 6px 1px #555;
 color: #FFF;
 top: -4px;
}

 まとめ

いやぁ、楽しかった！こんな多くのボタン作ることないからなー。すごい引き出しが増えた気がする。CSS3はやはり楽しい。

もしうまく動かないものがありましたら、TwitterのDMか、この記事にコメントをくれれば、頑張って治します。

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

created by Rinker

¥2,728 (2021/09/27 00:32:10時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

ブログサイトの平均直帰率は60%くらいだった気がするので、このブログの数値はヒドいってことになりますね。まだ記事少ないし、色んな内容の記事を書きすぎだもんね。たいして面白くもないし、続きも気にならないし、眼鏡だし。

でもね、僕は文章がダメでもCSSを少しイジれる！なのでWebデザインの力で直帰率を下げていこうではないか！と考えました。（ポジティブ）

直帰率とは、1 ページしか閲覧されなかったセッション（ユーザーが閲覧を始めたページから他のページに移動することなくサイトを離脱したセッション）の割合です。アナリティクスガイドラインより

本題に移ります。

現状の確認とカスタムのプラン

現状の問題点

僕は一番上に『トグルメニュー』を設置していて、タップするとカテゴリが表示されます。その下は普通にヘッダーと記事本文があります。

この間メニューを設置したばかりなのですが、あまり押されてない気がするんですよね。僕も他サイトで余りトグルメニューを使わないですからね。面倒くさいから（素直な気持ち）。

でもカテゴリーが増える可能性もあるので、トグルメニューは止められない。

そこで僕は考えました。

注目記事と最新記事だけ別のボタンを作ろうと（決心）。

カスタムプラン

これです。トグルメニューとは別にボタンを作ろうと。

記事ページの下にも注目記事一覧がありますが、1%でも直帰率を下げるために上部にも設置。でも邪魔にならないように。あくまで自然に。優しく、微笑むように…。（こういう風にふざけているのも直帰率の問題の原因かも。（しょぼん））

みんな大好きコピペ一発！

これを「デザイン」「スマホマーク」「ヘッダー」「タイトル下」にコピペで！PCの方にやってもいいけど、それならメニューを付けた方が良いと思います。

HTML

<!--記事ボタンHTML-->
<div class="header-btn">
<div class="btn-content">
<!--最新記事メニュー（左側）-->
<label class="saishin" for="btn-cap1">
<a href="最新記事へのリンク">最新記事</a> </label>

<!--人気記事メニュー（右側）-->
<label class="ninki" for="btn-cap2">人気記事</label>
<input id="btn-cap2" type="checkbox" />
<div class="btn-cont">
<div class="hatena-module hatena-module-entries-access-ranking" data-count="5"
data-display_entry_category="0" data-display_entry_image="1" data
-display_entry_image_size_width="100" data
-display_entry_image_size_height="100" data-display_entry_body_length="0"
data-display_entry_date="0" data-display_bookmark_count="0" data
-source="access"><div class="hatena-module-body">
</div>
<!--btn-cont--></div>
<!--hatena-module--></div>
<!--btn-content--></div>
<!--header-btn--></div>

赤文字の最新記事へのリンクは、最新記事ページのURLをご自分のサイトからコピーして貼り付けてください。人気記事の方は何にもしないでオッケー。

青文字はボタンに表示される文字です。「NEW!」とか「POPULAR!」とかお好きにどうぞ。

ちょい解説（飛ばしてよし）

最新記事はもともとURLを持ったページがあるので普通にリンクで飛ばします。

注目記事は専用URLが存在しないので、はてなのサイドバーやフッターに使用されているモジュールを使用しました。そのためにアコーディオンスタイルにするしかありません。

CSS

同じく「デザイン」「スマホマーク」「ヘッダー」「タイトル下」にコピペで！

/***************最新記事****************/
.section {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.header-btn {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.header-btn .btn-content {
margin: 0;
}
.header-btn input {
display: none;
}
.header-btn label {
display: block;
cursor: pointer;
width: 48%;
float: left;
padding-top: 8px;
padding-bottom: 8px;
margin-left:1%;
margin-right:1%;
color: #fff;/**ボタン文字色**/
font-weight: bold;
text-align: center;
}
.saishin{
background-color: #CC90A8;/**最新記事の背景色**/
}
.ninki{
background-color: #90A7CC;/**人気記事の背景色**/
}
.header-btn label:hover {
background: #ddd;/**ボタンタップ後のボタンのの背景色**/
}
.header-btn .btn-cont {
transition: 0.2s;
height: 0;
overflow: hidden;
background: #ddd;/**ボタンタップ後の一覧の背景色**/
padding: 0 10px;
}
.header-btn input:checked + .btn-cont {
height: auto;
padding: 10px;
}

僕がコメントを入れたところは色をご自由に変更してください！

HTMLカラーコード

ちょっと解説（飛ばしてよし）

CSSだけでアコーディオンを作る時の基本的なやり方です。見えないチェックボックスのオンオフで開閉します。

これを使えばトグルメニューもCSSだけでできます（気合いが必要）。僕は面倒だからJsを使ってますが、そのうち作ります。

まとめ

ずっとこれをやりたくて色々考えていたのですが、朝に半月さんの記事を読んでひらめきました。感謝。

はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました – MoonNote

でも直帰率下がるかな？下がると良いなぁ！まだまだカスタム記事あるのでご覧あれー！

その読者になっていただくための、”読者になるボタン”が猛烈にダサくて、小さくて、押しづらいのでカスタムしていこうと思います！

コピペOK！読者になるボタンやSNSフォローボタンのカスタムCSS

2016年3月3日

まずは現状

これです。
すごい小さいし、猛烈にダサいし押しづらいですよね（2回目）。
このボタンを大きく、カッコよく、押しやすくしていきまーす。

なにこれ面倒臭い

コードを見てみると中々面倒なことになっているではないか。
そっか、読者数を表示するために＜iframe＞を使っているのか。こいつはやっかいだぜ。

ならばもう読者数は諦めよう（一分で決断）。
リンクだけコピーしてボタン自体を自作しちゃいます！

リンク先URL

各自、はてなブログの【設定】の下の方にある【読者になるボタン】のコーナーに行きましょう！
そこにゴニョゴニョ長い英語が書いてありますよね？

http://blog.hatena.ne.jp/はてなID/トップページURL/subscribe

これを使います！自分の設定からコピーすると早いですよ。

HTMLを書く

<a class="hate_btn" href="さっきのURL">読者になる</a>

これでHTMLは良し。
「読者になる」は好きな言葉に変えてオッケーですよ！

CSSで装飾を

さて、自らハードルを上げた大きく、カッコよく、押しやすいボタンにしていきましょう。（どうしよう、ダサいって言われたら）

ボタン作りで重要なのは直感で読者が何のボタンか分かることが重要です。

Facebookなら ブルー
Twitterならブルー（同じじゃねえか）
ミクシィならオレンジ

って具合にみんなすぐに分かりますよね？

じゃあ“はてな”の色は？

ブルーかよ。。。

なし、この説明なし。好きな色にします（みんな青好きすぎだろ）。

超長いです。

/***読者ボタン****/
.hatena_btn {
font-size: 110%;
    display: block;
width: 200px;
height: 54px;
text-align: center;
text-decoration: none;
    outline: none;
background-color: #555;
border: 2px solid #555;
color: #fff ;
line-height: 50px;
margin-bottom: 40px;
margin-left: auto;
margin-right:auto;
}
.hate_btn:hover {
background-color: #fff;/*押した後の背景色*/
border-color: #7694DA;/*押した後の枠線の色*/
color: #7694DA;/*押した後の文字色*/
}

 で、完成系がこれです。

読者になる

ちょいとマウス乗せてみてください？（そして押すのも歓迎）

ブルーになるんかーーーい。

まとめ

もはや解説はいりませんね。説明が難しすぎます。すみません。
でもこのボタンをイイなと思ってくれる、この記事を見てくれたかたは、
ぜひ！好きな色に変えて使ってみてください！！（変えなくても良し）

カラーコードはこのサイトが便利ですぞ。

html-color-codes.info