この記事が気に入ったらフォローをグラデーションなカード型にカスタマイズ
先日、フォローボタンにグラデーションを実装し、それをTwitterに公開したところ、なぜかやたらと反響があったので、こうして記事にしてみました。あ、もちろんレスポンシブ対応です。
この記事ではいくつかのサンプルと、カスタマイズの方法を用意しています。自分の気に入ったカスタマイズにしていただければなと思います。
取り敢えず読むべき記事
当ブログでは、FOXISMさんのカスタマイズを元に使用しております。
Minimal Greenさんのカスタマイズには対応していないので、どうにか対応してください(投げやり)。
注意点
実装するにあたって、いくつか注意点がございます。了承した上で使ってください。
注意点が思った以上に長いので、いらねって方は目次から「設置方法」に飛んでください。
全ブラウザに対応していません
古いブラウザに対応していません。最新版のChromeやSafariには対応していますが、旧IE等には対応していません。
サルワカさんによれば、95%以上のブラウザには対応しているそうなので、過剰に気にする必要はないと思っていますが(個人的に)、しっかり対応したい方は、下の記事を参照してください。
ちょっと分かり辛いかもしれません
シェアボタンは、単色の方が分かりやすいと思っています。
ツイッターは水色、はてなブログの読者登録ボタンは黒、Feedlyは黄緑みたいな感じで。潜在的なイメージから少し乖離してしまうかなと。
また、テキスト付きのボタンではなく、ただ単なるアイコンですので、それも分かり辛いポイントかなと。
書いてて「ん?」ってなったのでテキスト付きのシェアボタンも作ってみます。ただ、デザイン的にはアイコンの方が可愛いよね。
設置方法
さて、ようやく本題です。取り敢えず上の画像みたいな感じのデザインを目指してカスタマイズしていきますよ。
HTMLを記事下に挿入
一応貼り付ける場所も貼っておきます。(なんか色々見えてる)
「はてなブログトップページ」→「ダッシュボード」→「デザイン」→「記事」→「記事下」に以下のコードを挿入してください。
コード(記事下)
詳しいカスタマイズはFOXISMさんの記事を参照してください。
自分で改変する部分
いくつか改変する部分があります。このままのコードだと、みなさんのブログの読者が、僕のブログの読者になることになります。
もちろんそれでもいいんですけどね
結構めんどくさいです。ごめんな(フランク)
詳しい方法はFOXISMさんに書いてあるので、そちらを参考してください。お問い合わせフォームに関してはこちらを参照。
ちなみにいらないボタンはどんどん削除してください。
コード(CSS)
こちらをンボっとコピペしていただけると、僕のブログみたいな感じになります。
今回はタブレット以上のサイズはWidthをパーセントで指定、更にbox-shadowを効かせてカード型にしてみました。
1カラムとは相性がいいのですが、2カラムだとちょっと狭っ苦しいかも…気に入らなければ、2行目のWidth:55%;を大きくしてみてください。
アレンジしてみよう
さて、CSSの知識がなくてもそれなりにアレンジはできます。
色のコードとか適当に変えてみると、一気に見栄えも変わりますし、印象も変わります。
サンプル集
というわけでサンプルをいくつか作ってみました。是非ご活用ください。マグロ、ご期待ください。
ちなみに、こんなことしたいんだよってご要望があればご連絡ください。コメント欄は閉鎖しているのでTwitterか、お問い合わせ欄までどうぞ。
ちょっと丸っこく
border-radiusを効かせて、丸くしてみました。柔らかく、可愛い感じになりますね。
下のコードをCSSに挿入していただければOKです。10pxの部分をもっと大きな数字にしていただけると、もっと丸くなります。
.iine, .iine-r{
border-radius:10px;
}.iine-l{
border-radius:10px 10px 0 0;
}
アイコンをアレンジ
上のカスタマイズではアイコンを50px×50pxで指定しています。
あまり大きくしすぎると、スマホからはみ出たりするので、オススメはできませんが、ある程度のアレンジは可能です。
36~49行目の iine-icon a{~~を弄ってみます。
ちょっと横長にしてみました。これはこれで可愛い!!36~49行目を削除して、下のコードを挿入してみてください。
.iine-icon a{
color: #fff;
border-radius:10px;
font-size: 1.7rem;
display: inline-block;
margin-right:0.2rem;
margin-left:0.2rem;
margin-top:1.5rem;
margin-bottom:1rem;
padding:0.8rem 0 0.45rem 0;
height:40px;
line-height:20px;
width:20%;
}
アイコンを丸く
border-radiusをアイコンに効かせて丸っこくしてみました。女の子っぽくて可愛いデザインかなと思います。
.iine-icon a{
color: #fff;
border-radius:50%;
font-size: 1.7rem;
display: inline-block;
margin-right:0.2rem;
margin-left:0.2rem;
margin-top:1.5rem;
margin-bottom:1rem;
padding:0.8rem 0 0.45rem 0;
height:50px;
line-height:30px;
width:50px;
}
アイコン+テキスト
HTMLの19~24行を以下のコードに書き換えてください。 もちろんURLの変更はお忘れなく。
<div class="iine-icon">
<a href="http://blog.hatena.ne.jp//skyfish25/skyfish25.hatenablog.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/skyfish25/skyfish25.hatenablog.com/subscribe', '', 'width=500,height=400'); return false;" class="iine-hatenablog" title="はてなブログの読者登録をする"><i class="blogicon-hatenablog"></i> 読者になる</a>
<a href="https://twitter.com/25_sKy_fiSh_" class="iine-twitter" title="Twitterでフォローする"><i class="fa fa-twitter"></i><i></i> Follow</a>
<a href="https://feedly.com/i/subscription/feed/http://skyfish25.hatenablog.com/feed" class="iine-feedly" title="Feedlyで購読する"><i class="fa fa-rss"></i> Feedly</a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSf8PdDP_zlBY_va8iwU7So55zRSMsLIdSt4eWphaEkfuaOqkA/viewform" class="iine-mail"><i class="fa fa-envelope"></i> Contact</a>
</div>
また、CSS36~49行を削除して、以下のコードを挿入してください。
.iine-icon a{
color: #fff;
border-radius:10px;
font-size: 1.1rem;
display: inline-block;
margin-right:0.2rem;
margin-left:0.2rem;
margin-top:0.6rem;
margin-bottom:0.5rem;
padding:0.8rem 0 0.45rem 0;
height:38px;
line-height:17px;
width:40%;
}
アイコンの色をアレンジしよう
個人的には、Webgradientが使いやすくておすすめです。
というか、下手に自分のブログの色とか使うとグラデーションが一気に汚くなる可能性があります。なるべく同系色がおすすめです。
赤なら紫とかオレンジぐらい、青なら水色とか紫、みたいな感じで。赤と青とか、ピンクと紫とか、中間点が汚い色になってしまうグラデーションはなるべく控えましょう。
CSSの51~62行目をWebgradientのコードに張り替えてみましょう。
.iine-hatenablog{
background-image: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%);
}
.iine-twitter{
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}
.iine-feedly{
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.iine-mail{
background-image: linear-gradient(120deg, #fad0c4 0%, #ff9a9e 100%);
}
一応やり方
上のリンクからWebgradientにアクセス。
たくさんサンプルがあると 思うので、その中から好きな奴を選んで、右下の「Copy CSS」をクリック。
んでもって適応させたい部分(CSS)に貼ればOKです。
分からなければ質問してくだされ
配色のヒント
Twitterで「配色悩むぜ!!」って声が上がっていたので、ちょっとヒントみたいなものを書いておこうかなと思います。
まず、グラデーションは、基本的には同系色でまとめるのが無難です。
濃い青と薄い青、濃い赤と薄い赤とすると、グラデーションは綺麗になります。
例えば、Coolors等の配色サービスでは、使いたい色を選び、PICKSで色を白に近づけてあげると、無難なグラデが出来上がります。
流行を追うなら二色のグラデ
しかし、最近の流行は、別の色を二色あわせた鮮やかなグラデーション。流行を追いたいのであれば、この点にだけは絶対に注意してほしいことがあります。
それは、全く違う色を使わないということ。例えば、赤→緑や、水色→黄色のようなグラデは、中間色が汚くなってしまいます。(もちろん上手く組み合わせているサイトもありますが、素人には難しい)
上の画像の下のバーで、近い値がおすすめです。はてなブログテーマであるHaruniは、ピンク→オレンジのグラデーションが使われています。
是非参考にしてみてください
終わりに
久々のカスタマイズ記事で疲れました。皆様の参考になればなと思います。
最近はグラデーションを使ったテーマも「Haruni」なんかもありますし、はてなブログ界にもグラデーションの波が押し寄せてきた感じがありますね。
分からないことがあれば、気軽に質問してください。なるべくすぐに答えようと思います。Twitterだとなお助かります。
あと、追加してほしいボタン等のリクエストがあれば是非。Facebook アイコンは多分作ります。
ついでに使った人は何らかの形(記事にするとかツイートするとか)で報告してくれると僕が喜びます。僕がぁ喜ぶぅ。