プロフィールのカスタマイズ

プロフィールはデモページでもカスタマイズ方法が紹介されていますが、
デフォルトの設定は使わずにHTMLのモジュールで作成しました

demo-mamegoro.hatenablog.com

画像の設定
フォローボタンの設置

画像の設定

デフォルトのプロフィールでは画像が円形になっていますが、
自分でも円形の画像にしてみました

ペイントなどを使って画像を円形にすることもできますが、
こちら(↓)のツールを使うと簡単に円形の画像を作る事ができます♪

marunuki.tools-base.biz

画像をUPロードするだけなのでもし良かったら利用してみて下さい

ちなみにプロフィールにも書いてありますが、
画像は大切な人♡です(笑)

フォローボタンの設置

デフォルトで紹介のあったSNSボタンだとInstagramがないので
Instagramと一応、アマゾンの欲しい物リストも設置してみました(笑)

まず、フォローボタンを設置するプロフィールの中に以下のコードを追加します

<div class="sidebar-follow-buttons" >
<a class="instagram" href="InstagramのURL" target="_blank">
<i class="blogicon-instagram lg"></i>
<span class="inner-text">Instagram</span>
</a>
<a class="amazon" href="欲しいものリストのURL" target="_blank">
<i class="blogicon-amazon lg"></i>
<span class="inner-text">ほしい物リスト</span>
</a>
</div>

続いて形を整えるために
デザイン > カスタマイズ > デザインCSS
に次のコードを追加します

/*サイドバーフォローボタン始まり*/
.sidebar-follow-buttons{
width: 100%;
text-align: center;
letter-spacing: -.40em;
}
.sidebar-follow-buttons a {
display: inline-block;
letter-spacing: normal;
position: relative;
width: 47%;
font-size: 16px;
text-align: center;
text-decoration: none;
padding:6% 0;
margin:1%;
overflow: hidden;
z-index:2;
}
.sidebar-follow-buttons a:hover {
color:#fff;
transition: all .3s;
}
.sidebar-follow-buttons a:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:-100%;
left:0;
z-index:-1;
transition: 0.2s;
}
.sidebar-follow-buttons .instagram {
color: #3f729b;
border: 1px solid #3f729b;
background: #ffffff;
}
.sidebar-follow-buttons .instagram:hover:after {
top:0;
background:#3f729b;
}
.sidebar-follow-buttons .amazon {
color: #ff8c00;
border: 1px solid #ff8c00;
background: #ffffff;
}
.sidebar-follow-buttons .amazon:hover:after {
top:0;
background:#ff8c00;
}
/*サイドバーフォローボタン終わり*/