Cocoonのプロフィールボックスを有料テーマJIN風にカスタマイズ

Cocoon

今回は無料テーマCocoonのサイドバーに設置するプロフィールボックスを、有料テーマのJIN風にカスタマイズしていきます!

プロフィールを使用している場合は、結構印象が変わるますよー
コピペで出来ますので、お試しください~

スポンサーリンク

カスタマイズのビフォーアフター

カスタマイズをする前のデフォルト状態はこんな感じです。

これでも全然いいですが、ちょっと味気ない感じもします。

今回のカスタマイズでこのようになります。

子テーマを使用しましょう

カスタマイズをするので子テーマを使いましょう!
子テーマの使い方がわからない場合は、こちらの記事を参考にしてください。

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、 「子テーマ」というものがあります。 ブログを書き始めた方の場合や、 WordPressを使い始めた方の場合は、 「子テーマ?なんだそれ」とか 「親テーマにそのままコードを書けばいいじゃん...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、 子テーマの重要性について説明しました。 今回はその子テーマの導入方法と、 使い方についてご説明します。 子テーマを導入する! 子テーマを導入する方法は2通りあります。 1つは親テーマと一緒にダウ...

Cocoonの子テーマ導入方法はこちらの記事で紹介しています。

【初心者向け】Cocoonの導入方法と子テーマの使い方だよ!
高機能無料WordPressテーマ「Cocoon」 3月頃からβ版が公開され、作成者である「わいひら」さんが、利用者の意見を広く取り入れ、先月7月から正式公開となりました。 β版は会員登録をしなければ、ダウンロードできませんでしたが...

コードをコピペ

ちなみにプロフィールボックスのプロフィール画像を円形にする場合は、プロフィールのウィジェットから「画像を円形にする」にチェックを入れるだけでできます。

プロフィールボックスをカスタマイズするには以下のコードを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の知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。

コメント