ルクセリタスのフォローボタンデザインとアクションをカスタマイズ

カスタマイズ

ルクセリタスの独自ウィジェット「#7 SNSフォローボタン」のボタンデザインとホバーアクションを変更する方法です。

 

デフォルト

SNSフォローボタン

 

手順

簡単なCSSのみなので、スタイルシートに追記するだけです。

 

前提

ルクセリタスの独自ウィジェット「#7 SNSフォローボタン」を設定

#7 SNSフォローボタン

 

必要なボタンのSNS URLをセットし保存します。

ボタンの外観は「アイコン」にチェックします。

#7 SNSフォローボタン

 

カスタマイズ

SSは子テーマのstyle.cssに追記して下さい。

子テーマの編集

子テーマの編集:スタイルシート

 

共通部分

今回のデザインではにします。

円にし、更に元のデザインが四角い枠になっているのでそれを打ち消しておきます。

CSS

#thk-follow .snsf {border-radius: 50%;}
#thk-follow ul li {
box-shadow: none;
border-radius: 50%;
}
#thk-follow li a {
border:none;
border-radius: 50%;
line-height: 1.4;
}

 

あとはホバーアクションのCSSを追記します。

パターン1

マウスが乗った時に クルクル回る

(ちょっと動画見にくくてすみません 全部で9秒ほどですが、後半に動きます)

 

CSS

#thk-follow a: hover {
-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg);
}

 

パターン2

マウスが乗った時に 影を付ける

 

CSS

#thk-follow a: hover {
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333; 
}

 

 

プロフィール欄

プロフィールエリアを表示するカスタマイズも以下にまとめていますので、参考にして下さい。

 

以上です。

関連記事