【THE THOR】サイドバーのプロフィールエリアのカスタマイズ

カスタマイズ

サイドバーのプロフィールエリアに Twitter のアイコンしか置けなくて寂しかったので、プロフィールページやコンタクトフォームに飛べるようにカスタマイズしてみました。

  もくじ

実装するとこんな感じになります

アイコンの背景色・枠線色などは後からCSSで変更できます。
※カーソルを乗せた時のアイコン背景色は、デフォルトと同じく各SNSのメインカラーとなっています。

シンプル

プロフィール3
プロフィール4

枠線付き

プロフィール1
プロフィール2

実装する方法（全てのデザイン共通）

WordPress ＞ 外観 ＞ ウィジェット

と進み、「サイドバーエリア」のお好きな位置に「カスタムHTML」ウィジェットを追加してください。

ウィジェット

カスタムHTMLウィジェットを編集する

カスタムHTMLウィジェットの「内容」部分に以下のソースコードをコピペし、【】で囲まれた部分を自分の環境に合わせて書き変えていきます。

SNSへのリンク部分は、「<li>～</li>」を1ブロックとして、必要ない部分を削除してください。アイコン5つまで1列に並ぶので、5つ以内に減らすのがおすすめです。

プロフィールページやコンタクトフォームへのリンクも置けるように追加してあります。（必要なければこちらも「<li>～</li>」を1ブロックとして削除してください）

HTML

<div class="widgetProfile">
<div class="widgetProfile__img">
<img width="120" height="120" alt="【名前】" src="【プロフィール画像URL】">
</div>
<h3 class="widgetProfile__name">【名前】</h3>
<p class="widgetProfile__text">【自己紹介など】</p>

<div class="widgetProfile__sns">
<h4 class="widgetProfile__snsTitle">【SNSアイコン上の文字】</h4>
<ul class="widgetProfile__snsList">

<li class="widgetProfile__snsItem">
<a class="widgetProfile__snsLink icon-facebook" href="【Facebook URL】"></a>
</li>

<li class="widgetProfile__snsItem">
<a class="widgetProfile__snsLink icon-twitter" href="【Twitter URL】"></a>
</li>

<li class="widgetProfile__snsItem">
<a class="widgetProfile__snsLink icon-instagram" href="【Instagram URL】"></a>
</li>

<li class="widgetProfile__snsItem">
<a class="widgetProfile__snsLink icon-youtube" href="【YouTube URL】"</a>
</li>

<li class="widgetProfile__snsItem">
<a class="widgetProfile__snsLink icon-linkedin" href="【Linkedin URL】"></a>
</li>

<li class="widgetProfile__snsItem">
<a class="widgetProfile__snsLink icon-pinterest" href="【Pinterest URL】"></a>
</li>

<li class="widgetProfile__snsItem">
<a class="widgetProfile__snsLink icon-user" href="【プロフィールページのURL】"></a>
</li>

<li class="widgetProfile__snsItem">
<a class="widgetProfile__snsLink icon-mail5" href="【コンタクトフォームのURL】"></a>
</li>
</ul>
</div>
</div>

好みのデザインを選んでCSSをカスタマイズする

あとは、好みのデザインを選んで「style-user.css」にコピペするだけです。

WordPress ＞ 外観 ＞ テーマの編集 ＞ style-user.css

アイコン・枠線の色を指定している部分にはコメントを入れてありますので、好みの色に変更してご利用ください。

シンプル（アイコン背景色あり）

プロフィール3

style-user.css

.widgetProfile__sns {
	padding: 0 10px 15px 10px;
}
.widgetProfile__snsItem .widgetProfile__snsLink {
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	color: #fff;/*SNSボタンのアイコン色*/
	background: #333;/*SNSボタンの背景色*/
	border: 0;
}
.widgetProfile .widgetProfile__sns {
	background-color: transparent;
}
.widgetProfile__snsTitle {
	color: #999;
}
.widgetProfile__text{
	padding:10px 20px;
}
.widgetProfile__snsLink:hover.icon-user {
	background: #eebbcb;/*プロフアイコンにカーソルを乗せた時の色*/
}
.widgetProfile__snsLink:hover.icon-mail5 {
	background: #aaa;/*メールアイコンにカーソルを乗せた時の色*/
}

シンプル（アイコン枠線あり）

プロフィール4

style-user.css

.widgetProfile__sns {
	padding: 0 10px 15px 10px;
}
.widgetProfile__snsItem .widgetProfile__snsLink {
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	color: #333;/*SNSボタンのアイコン色*/
	background: #fff;/*SNSボタンの背景色*/
	border: 1px solid #333;/*SNSボタンの枠線色*/
}
.widgetProfile .widgetProfile__sns {
	background-color: transparent;
}
.widgetProfile__snsTitle {
	color: #999;
}
.widgetProfile__text{
	padding:10px 20px;
}
.widgetProfile__snsLink:hover.icon-user {
	background: #eebbcb;/*プロフアイコンにカーソルを乗せた時の色*/
}
.widgetProfile__snsLink:hover.icon-mail5 {
	background: #aaa;/*メールアイコンにカーソルを乗せた時の色*/
}

枠線付き（アイコン背景色あり）

プロフィール1

style-user.css

.widgetProfile{
	margin-top:80px;
	border:2px solid #ccc;/*テキスト・ボタンを囲う枠線*/
	border-radius:15px;}

.widgetProfile__img{
	margin-top:-60px;
}
.widgetProfile__sns {
	padding: 0 10px 15px 10px;
}
.widgetProfile__snsItem .widgetProfile__snsLink {
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	color: #fff;/*SNSボタンのアイコン色*/
	background: #333;/*SNSボタンの背景色*/
	border: 0;
}
.widgetProfile .widgetProfile__sns {
	background-color: transparent;
}
.widgetProfile__snsTitle {
	color: #999;
}
.widgetProfile__text{
	padding:10px 20px;
}
.widgetProfile__snsLink:hover.icon-user {
	background: #eebbcb;/*プロフアイコンにカーソルを乗せた時の色*/
}
.widgetProfile__snsLink:hover.icon-mail5 {
	background: #aaa;/*メールアイコンにカーソルを乗せた時の色*/
}

枠線付き（アイコン枠線あり）

プロフィール2

style-user.css

.widgetProfile{
	margin-top:80px;
	border:2px solid #ccc;/*テキスト・ボタンを囲う枠線*/
	border-radius:15px;}

.widgetProfile__img{
	margin-top:-60px;
}
.widgetProfile__sns {
	padding: 0 10px 15px 10px;
}
.widgetProfile__snsItem .widgetProfile__snsLink {
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	color: #333;/*SNSボタンのアイコン色*/
	background: #fff;/*SNSボタンの背景色*/
	border: 1px solid #333;/*SNSボタンの枠線色*/
}
.widgetProfile .widgetProfile__sns {
	background-color: transparent;
}
.widgetProfile__snsTitle {
	color: #999;
}
.widgetProfile__text{
	padding:10px 20px;
}
.widgetProfile__snsLink:hover.icon-user {
	background: #eebbcb;/*プロフアイコンにカーソルを乗せた時の色*/
}
.widgetProfile__snsLink:hover.icon-mail5 {
	background: #aaa;/*メールアイコンにカーソルを乗せた時の色*/
}
Follow me ?
>

THE THOR をダウンロード
CTR IMG