【JIN】プロフィールのSNSボタンを色をつけて回転させるカスタマイズ

 

今回は、JINのテーマでプロフィールにあるSNSボタンのカスタマイズをやっていこうと思います！

作成方法が不明な方は、
JINのサイトで書いてある「プロフィール作成記事」を確認してくださいね^^

引用：JIN公式サイトより

この画像の、右上にあるプロフィール部分ですね。

 

具体的には、今回はこちらのデザインを↓

→（ちょっとgifで作った画像（動く画像）なので、読み込まれるまで少し時間がかかるかもです。）

こんな感じに↓カスタマイズしたいと思います！

 

ボタンの背景色が若干荒いのはこの画像の画質の問題なので、実際にはそんなことありませんのでご安心を^^

ちなみに今回のカスタマイズはCSSのみで対応できますよ！

 

デフォルトの設定

まず、元々のSNSボタンには、
どんなCSSが適用されているかを見てみましょう。

「a:hover」
→リンクにカーソルを乗せた（ホバーした）ときに、どうするか？を指定できるCSSです。
「a」とは、「aタグ」といって、ここにURLを入れるとリンクを貼ることができるコードです。

「transform」
→形を変えるCSSです。いくつか指定できるコードがありますが、
その中の「scale」とは、大きさを変化させるものです。

映画のトランスフォーマーは、この英単語が由来だと思います。
「ガシャン！ガシャン！！」と形が変わっていきますよね、それと一緒です。

scale（1.1）
→大きさを変化させる（scale）CSSです。
数字は、1.1倍に指定されていて、若干大きくなるのがわかると思います。

 

 

回転させよう

コードを以下のように変えていきます。

 

変更した点はこちらです↓

『変更点』

• scale(1.1)→scale(1.3)
• rotateY(360deg)を追加

マウスを乗せたとき、大きさをデフォルト（1.1）より大きくしました（1.3）。

そして、初めて出てきた「rotateY(360deg)」についてですが、
「Y軸方向に360度回転させる」という意味になります。

 

数値は好みのを指定して、色々試してみてください。

 

アイコンの色を付けよう

各SNSアイコンの色をCSSで指定していきましょう。

メールのアイコンは、僕が他と被らないような色を選んだので、
お好きなものを指定してもいいと思います。

それぞれのボタンの背景色を変更しています。

 

まとめ

コピペで行けるので、比較的簡単にカスタマイズできる内容だったのではないでしょうか^^

JINのテーマは、完成度がとても高いですね。
あなたのブログを素敵に彩ってくれること間違いなさそうですね。

 

「こんなデザインできるのかな？」など、
何かお悩みのことがありましたら、お気軽にお問い合わせくださいね。

 

リクエスト内容追記

 

LINEのボタンの色を変更したいというリクエストをいただきましたので、こちらのコードを追記しております。

参考にしていただけると嬉しいです。

もしうまく行かないなどあればご相談ください！