プロフィールはデモページでもカスタマイズ方法が紹介されていますが、
デフォルトの設定は使わずにHTMLのモジュールで作成しました
画像の設定
デフォルトのプロフィールでは画像が円形になっていますが、
自分でも円形の画像にしてみました
ペイントなどを使って画像を円形にすることもできますが、
こちら(↓)のツールを使うと簡単に円形の画像を作る事ができます♪
画像を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;
}
/*サイドバーフォローボタン終わり*/
初心者なので間違った所もあると思いますが、まずまず形が整ったかな?