今回は無料テーマCocoonのサイドバーに設置するプロフィールボックスを、有料テーマのＪＩＮ風にカスタマイズしていきます！
プロフィールを使用している場合は、結構印象が変わるますよー
コピペで出来ますので、お試しください～
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
カスタマイズのビフォーアフター
カスタマイズをする前のデフォルト状態はこんな感じです。
これでも全然いいですが、ちょっと味気ない感じもします。
今回のカスタマイズでこのようになります。
子テーマを使用しましょう
カスタマイズをするので子テーマを使いましょう！
子テーマの使い方がわからない場合は、こちらの記事を参考にしてください。
Cocoonの子テーマ導入方法はこちらの記事で紹介しています。
コードをコピペ
ちなみにプロフィールボックスのプロフィール画像を円形にする場合は、プロフィールのウィジェットから「画像を円形にする」にチェックを入れるだけでできます。
プロフィールボックスをカスタマイズするには以下のコードをStyle.cssに追記してください！
/*プロフィール*/
.author-box{
padding:30px 0 0;
}
.author-name{
margin-bottom:20px;
}
.author-name a{
font-size:1.2em;
text-decoration:none;
}
.author-description{
margin-bottom:30px;
}
.author-description p{
text-align:center;
}
.author-box .sns-follow-buttons a.follow-button:hover{
background-color:transparent;
opacity:0.6;
}
.nwa .author-box .author-thumb{
width:110px;
}
.nwa .author-box .author-thumb img{
padding:1%;
box-shadow:0 1px 3px rgba(0,0,0,.18)
}
.author-follows{
background-color:orange;
padding:15px 0;
}
.author-follows::before{
content:'＼ Follow Me ／';
color:#fff;
font-size:16px;
}
.nwa .author-box .author-content{
font-size:14px;
}
.author-box .sns-follow-buttons a.follow-button{
width:35px;
height:35px;
border-radius:40px;
font-size:27px;
color:#fff;
background:0 0;
border-color:#fff;
margin-top:5px;
margin-right:10px;
}
.author-box .sns-follow-buttons a.follow-button:hover{
transform:scale(1.1);
}
/*ここまで*/
個人的に躓いた点があります。
正式リリースしてからCocoonを使った場合は気にしなくても良いですが、正式リリース前からCocoonを使用している人のうち、子テーマに「sidebar.php」ファイルを追加していた方は、ファイルが新しくなっているため、Class名が変わっているところがあります。
（ちなみに追加されているclass名は【.nwa】です）
もしその場合は、当記事で紹介しているコードでは上手くいかない可能性があるので、sidebar.phpのファイルを最新のものにするか、対応する箇所に【.nwa】というclass名を追記してください。
（ファイルごと新しくした方がいいと思います）
コピペも良いですが・・・
Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！
私が使用したおすすめの本はこちらです。
コメント