Cocoonで丸型のSNSボタンを実装する方法

Cocoonで丸型のSNSボタンを実装する方法を紹介します。

使用するプロパティの扱いを覚えてさえしまえば、どんな要素も丸くデザインできるようになるので覚えておくと良いですよ。

要素を丸くするときに使うcss「border-radius」

要素のスタイルを丸くするときには「border-radius」というcssのプロパティを使います。

基本的にHTMLの要素は四角形で表示されるんですが、border-radiusはその角を丸くする効果を持っているんです。

このプロパティをつかうことで、要素の角に丸みを帯びさせ、デザインに柔らかい印象を与えることができます。

上手く使うことでサイト全体のイメージも大きく変わりますね。

border-radiusの使い方

border-radiusは「px」や「％」などの単位を使って表します。

例えばこんなHTMLがあったとしましょう。実際にCocoonのプロフィールで使っているコードです。

<div class="profile-sns">
   <a href="https://twitter.com/ryocnn" class="follow-button twitter-button twitter-follow-button-sq" target="_blank" title="Twitterをフォロー" rel="nofollow"><span class="icon-twitter-logo"></span></a>
   <a href="https://www.instagram.com/ryo_cnn/" class="follow-button instagram-button instagram-follow-button-sq" target="_blank" title="Instagramをフォロー" rel="nofollow"><span class="icon-instagram-new"></span></a>
</div>

Cocoonにはもともとプロフィールを表示するウィジェットがあるので、そこからタグを拝借してきて作りました。

この場合aタグがSNSボタンを表しています。

もともと四角いこのボタンを丸くデザインしたい…。

やることは非常に簡単で、このaタグに対して「 border-radius: 50%;」と指定してあげるだけです。

.profile-sns .twitter-button,.profile-sns .instagram-button{
   border-radius:50%;
}

ちなみにこれは画像にも使うことができます。

正方形の画像であれば丸くデザインできるので、試してみてください。