【はてなブログ】読者になるボタンのデザインカスタマイズ4つ
スポンサードリンク
読者になるボタンを目立つようにデザインのカスタマイズをしてみました。
(最近こちらの記事が読まれて嬉しい限りです。追記しております。2017/8/22)
※ブラウザはFirefox,Chrome推奨です。IEだと対応してないcss3を使用している為上手く動作しない可能性があります。ご確認の上使用してください。
part2書きました!
www.funclur.com
読者になるボタンの表示設定
読者になるボタンは通常サイドバーにあります。
管理画面→デザイン→サイドバー→プロフィール→モジュールを編集で読者になるボタンの表示・非表示を選択できます。
読者になるボタンをカスタム化
ソースはDavid Conner氏作成の下記を参考にしています。
※下記のCODE PENとは無料で使えるソースコードサービスです。
CODEPENの見方
見方としてはRUN PENをクリックし、タブのhtml,css,resultをクリックします。それで見たい結果やコードに表示が切り替わります。
右上のロゴをクリックすれば別ウィンドウで開きます。
こちらはcssをscssという記法で書いてあるのでcssに戻して、余計なものを省いてさらに厳選して4つにしました。
また背景色が参照元は赤なんですが、白にしたり元のcssとバッティングしたり予想より結構時間かかりました。。
それが下記になります。
See the Pen LxXXwa by funclur (@funclur) on CodePen.
念のためこちらにコードを貼ります。
html
<!-- 1個目 --> <p><a href="http://blog.hatena.ne.jp/funclur/funclur.hatenablog.com/subscribe" class="btn btn-1"><svg><rect x="0" y="0" fill="none" width="100%" height="100%"/></svg>読者になる</a></p> <!-- 2個目 --> <p><a href="http://blog.hatena.ne.jp/funclur/funclur.hatenablog.com/subscribe" class="btn btn-2">読者になる</a> </p> <!-- 3個目 --> <p><a href="http://blog.hatena.ne.jp/funclur/funclur.hatenablog.com/subscribe" class="btn btn-3"><span>読者になる</span></a></p> <!-- 4個目 --> <p><a href="http://blog.hatena.ne.jp/funclur/funclur.hatenablog.com/subscribe" class="btn btn-4">読者になる</a></p>
a要素のhrefに下記をリンク先として入れます。funclurの部分をご自分のドメインに変更します。
http://blog.hatena.ne.jp/funclur/funclur.hatenablog.com/subscribe
css
サイトのカラーなどに合わせるためのプロパティにコメントアウトで説明を補足しました。(/* ①ボタンの幅 */の部分)
実際使用する時はコメントアウトは消しましょう。
基準の.btnとボタン1個目の.btn-1に記載しましたが2個目以降も要領は一緒です。
/* button4個共通 */ .btn { color: #fff; cursor: pointer; display: block; font-size:16px; font-weight: 400; line-height: 45px; margin: 0 auto 2em; max-width: 160px; /* ①ボタンの幅 */ position: relative; text-decoration: none; text-transform: uppercase; vertical-align: middle; width: 100%; text-align: center; } /* button 1個目 */ .btn-1 { background: #075577; /* ②背景色 */ font-weight: 100; color:#fff; /* ③文字色 */ } .btn-1:hover { background: none; /* ④マウスオーバー後の背景色 */ font-weight: 900; letter-spacing: 1px; color:#075577; /* ⑤マウスオーバー後の文字色 */ text-decoration: none; } .btn-1:hover rect { stroke-width: 5; stroke-dasharray: 15, 310; stroke-dashoffset: 48; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .btn-1 svg { height: 45px; left: 0; position: absolute; top: 0; width: 100%; } .btn-1 rect { fill: none; stroke: #075577; stroke-width: 2; stroke-dasharray: 422, 0; } /* button 2個目 */ .btn-2 { letter-spacing: 0; color: #075577; } .btn-2:hover, .btn-2:active { letter-spacing: 5px; text-decoration: none; } .btn-2:after, .btn-2:before { backface-visibility: hidden; border: 1px solid rgba(7, 85, 119, 0); bottom: 0px; content: " "; display: block; margin: 0 auto; position: relative; transition: all 280ms ease-in-out; width: 0; } .btn-2:hover:after, .btn-2:hover:before { backface-visibility: hidden; border-color: #075577; transition: width 350ms ease-in-out; width: 100%; } .btn-2:hover:before { bottom: auto; top: 0; width: 100%; } /* button 3個目 */ .btn-3 { border: 1px solid; overflow: hidden; position: relative; background: #075577; color: #fff; } .btn-3:after { background: #fff; content: ""; height: 155px; left: -75px; opacity: .2; position: absolute; top: -50px; transform: rotate(35deg); transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); width: 50px; z-index: 10; } .btn-3 span { z-index: 20; } .btn-3:hover { text-decoration: none; } .btn-3:hover:after { left: 120%; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); } /* button 4個目 */ .btn-4 { border: 0 solid; box-shadow: inset 0 0 20px rgba(7, 85, 119, 0); outline: 1px solid; outline-color: rgba(7, 85, 119, 0.5); outline-offset: 0px; text-shadow: none; transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); background: #075577; } .btn-4:hover { border: 1px solid; box-shadow: inset 0 0 20px rgba(7, 85, 119, 0.5), 0 0 20px rgba(7, 85, 119, 0.2); outline-color: rgba(7, 85, 119, 0); outline-offset: 15px; text-shadow: 1px 1px 2px #427388; text-decoration: none; }
まとめ
以上、読者になるボタンのデザインカスタマイズ4つを書きました。
自分はa要素に:beforeで矢印アイコンつけてるのでそれと競合しないようにするのが多少めんどくさかったです。
他のテーマでも競合してコピペでは上手くいかないかもしれません。その時は、競合を防ぐ書き方をするかcss知ってる人に聞くか、自分で良ければ見ますのでご連絡いただければと思います。
また、必ず作業前にバックアップを取りましょう!