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

JINプロフィール アイコンカスタマイズ
おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

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

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

JINプロフィール作成方法

引用:JIN公式サイトより

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

 

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

JINプロフィール アイコンカスタマイズ

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

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

JINプロフィール アイコンカスタマイズ

 

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

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

『カスタマイズする前に』 カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。カスタマイズについては必ず自己責任でお願いいたします。

 

目次

デフォルトの設定

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

.my-profile .profile-sns-menu ul li a:hover{
transform: scale(1.1);
-webkit-transform: scale(1.1);
}

おかぴーおかぴー

コードを解説します!

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

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

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

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

 

 

回転させよう

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

.my-profile .profile-sns-menu ul li a:hover{
transform: scale(1.3) rotateY(360deg);
-webkit-transform: scale(1.3) rotateY(360deg);
}

 

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

『変更点』

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

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

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

 

回転させるCSSコード。
( )の中がどのくらい回転するかを指定でき、今回は360度=一回転させています。

rotateY(180deg)とした場合は、180度だけ回転し、
SNSのロゴマークが反対になります。

rotateには、「rotateX」、「rotateZ」があり、
それぞれX軸、Z軸(3軸)を基準にして回転します。

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

 

アイコンの色を付けよう

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

/*twitterボタンの色*/
.pro-tw a{
background: #22b8ff!important;
}

/*Facebookボタンの色*/
.pro-fb a{
background: #6680d8!important;
}

/*Instagramボタンの色*/
.pro-insta a{
background: #f09433!important;
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)!important;
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)!important;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)!important;
}

/*Youtubeボタンの色*/
.pro-youtube a{
background: #db0000!important;
}

/*mailボタンの色*/
.pro-contact a{
background: yellowgreen!important;
}

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

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

 

まとめ

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

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

 

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

 

リクエスト内容追記

 

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

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

/*LINEボタンの色*/
.pro-line a{
background:#00b900!important;
}

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

おまけ

ブログを作っていると、ふと

「見た目をもっとカッコよくしたい」「おしゃれでキレイな感じにしたい」っていう衝動が来ませんか?

みみこ

あるあるですね(笑)なんかしっくりこないなーとか、
でも、どう作っていいか操作も含めて分からないことがあります。

おかぴー

そんな時は、WEBデザインの勉強を少しだけでもいいので、
やってみるのもいいと思います^^

僕は見た目が納得がいくものが作れると、モチベーションが上がります。

よーし!また記事を書こうかな〜って思えるし、書いたものを見返して

「 はぁぁぁぁ〜(*´꒳`*)ウキウキ 」

ってなります(笑)

僕がこのブログを通して知り合った方は、みなさん自分のブログの見た目(デザイン性)とか、作り込み(WordPressの操作)に悩んでいる方が多かったです。

僕自身も初めはWordPressの管理画面からよく分からなくて、どこをいじったら何が変わるのか?もそうだし、

色を変えたり大きさ変えたり、基本的な内容でも何時間もかかったことがありました。

知り合った方のお悩みを聞いて改めて感じたことは、

そもそもWordPressでブログを作る=WEBデザインの知識が多少なり必要になるということです。

デザイン知識然り、コーディング知識しかり。。

でも、WEBデザインの勉強と言ってもその範囲はめちゃくちゃ広いし、ぶっちゃけ終わりはありません。

専門用語も多いし、だからと言って初心者の人が幅広く手を出して勉強するのも大変です。(ゴールを見失います)

それなら、

WEBデザイン初心者の人でも、モチベーションが爆上がりできるような必要範囲を絞ったブログ制作の教材があったらいいんじゃないか?と思ったんですが、どうでしょうか?(*^^*)

具体的には、こんな内容を盛り込む予定です↓

  • WEBデザインの知識を活かして魅力的なメインビジュアル(ブログのメイン画像・アイキャッチ画像)を楽しみながら作れるようになれる
  • カスタマイズが一定レベルでできるようになれる
  • パソコン自体の知識も身に付く
  • 程よい範囲のWEB知識がつくから、情報リテラシー(※)が高くなる
  • 登録してくれた方それぞれのお悩みに特化した、特別コンテンツを受け取れる

※情報リテラシー:世の中にあふれる多くの情報を、適切に活用できる能力

これから作っていくことになるのですが、

提供開始まで先行登録してくれた方には別途プレゼントもお送りしたいと考えています

最新の知識を受け取ることができますし、

登録してくれた方それぞれのお悩みに応じたコンテンツの提供ができることも、このLINEの一つの魅力かなと。

少しでも作れるよ〜って人にも、ためになる内容を盛り込む予定もあるので、興味がある方はLINE登録してもらえると嬉しいです^^

↓↓↓

チェックしてね
「お気軽にどうぞ〜」
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメント一覧 (5件)

    • リクエストありがとうございます!

      ブログの状況によってカスタマイズコードが変わってくる場合があるので、こちらのフォームからブログのURLを教えて頂けますか?

      https://okap01.com/contact-form#i-4

      確認後にカスタマイズコードをお伝えできればと思います。
      よろしくお願いします!

    • こんにちは。

      LINEアイコンの色変更のコードを記事内に追記しました。
      こちらで変更されるか試していただけますでしょうか。
      よろしくお願いします。

  • こんにちは!
    SNSボタンのはてなブックマークとPocketだけ消したいのですが、こちらはコードでできますか?
    何卒よろしくお願い致します。

    • ちゃーりーさん、こんにちは!
      ご質問ありがとうございます。

      内容がコメント部分だと足りなかったので記事にしましたので、こちらを参考に設定してみていただけますか?^^

      https://okap01.com/jin-customize-article-sns

      わからないところがあれば、また教えてください!

コメントする

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次