【Cocoon】プロフィールをオシャレで可愛くしてみた！

こんにちは、ぽんひろ(@ponhiroo)です。

今回はCocoonのプロフィールボックスをカスタマイズします！

劇的BeforeAfterがこちら！

デモページから実際のデザインが見られます。

参考デモページ

グラデーションを使って可愛く、オシャレにしてみました！

このカスタマイズではさらに以下の項目が変更できます。

逆に対応できていないのは以下の通りです。

現状サイドバーのみです。モバイル時にサイドバーを表示させれば、デモページのように擬似的に記事下に持って来ることはできます。
要望があれば記事下のプロフィールも作ります。

このカスタマイズでは以下のファイルを編集します。

人によってはfuncrion.phpの編集は必要ありません。

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

以下の手順でカスタマイズを行っていきます。

以上です！

コピペで出来るのでそんなに難しくはないと思います。

手順1：function.php編集(必要な人だけ)

デモページではプロフィールページに飛ぶようになっています。

プロフィールページがなかったり、必要ない人はスルーしてください。

function.phpにコードをコピペ

プロフィール説明欄でHTMLタグを使えるようにする処理をfunction.phpに書きます。

以下のコードを「WordPress管理画面→外観→テーマエディター→function.php(子テーマ)」にコピペしてください。

注意必ずバックアップを取ってからやってください。

//プロフィール欄でHTMLコードを使えるようにする
remove_filter('pre_user_description', 'wp_filter_kses');

これで準備OKです。

手順2：WordPressのプロフィール設定

プロフィール設定がまだの方はプロフィール設定をまずしましょう。

「WordPress管理画面→ユーザー→あなたのプロフィール」を選択してください。

手順2-1：プロフィールの名前を設定しよう！

ニックネームを入力するとブログ上の表示名が変えられるようになります。

表示したい名前を入力し、設定しましょう。

手順2-2：プロフィールに表示するSNSボタンを設定しよう！

プロフィールにあるアイコンを表示させるためにはSNS情報を入力する必要があります。

必要なものだけで大丈夫です。

手順2-3：プロフィール情報の入力

「もっと見るボタン(More)」が必要な人は以下のようにボタンのタグを入れます。

<a class="to-profile" href="ここにリンク先URL">More</a>

ここにプロフィールの説明文ここにプロフィールの説明文ここにプロフィールの説明文ここにプロフィールの説明文ここにプロフィールの説明文

必要ない人はそのままプロフィールを入力してください。

手順2-4：プロフィール画像を設定

プロフィールにのせるアイコンを設定します。

今回のデザインはデモページのように背景なしが映えるようになっているので背景なし推奨です。

背景なしにしたい方はjpgファイルだと必ず背景が付いて来るのでpngファイルがオススメです。

「プロフィールを更新」を選択で設定終了です。

手順2-5：プロフィール画像が表示されない人はアバター設定を確認

画像を設定したのに表示されない場合はアバター設定がOFFになってる可能性があります。

「WordPress管理画面→設定→ディスカッション」を選択してください。

下の方にアバターの表示という項目があるのでチェックを入れて保存しましょう。

手順3：プロフィール用CSSをコピペ！

あとはコピペするだけ！

「WordPress管理画面→外観→テーマエディター→style.css」に下記コードをコピペしてください。

/************************************
** プロフィール-サイドバー
************************************/
.sidebar .widget_author_box {
  background: #fff;
  padding-top: 1.2em;
  border-radius: 3px 3px 0 0;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.sidebar .author-box {
  padding: 120px 0 0;
  border: none;
  position: relative;
  margin: 0 0 3em;
  max-width: 100%;
  overflow:hidden;
}
.sidebar .author-content {
  background: -webkit-linear-gradient(0deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
  color: #fff;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}
.sidebar .author-box .author-name a {
  color: #42ace7;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 18px;
}
.sidebar .author-box .author-description {
  padding: 45px 25px 0px;
  text-align: justify;
  text-justify: inter-ideograph;
}
.sidebar .author-box p {
  line-height: 1.8;
  font-size: 14px;
}
.sidebar .author-box .author-thumb {
  width: 120px;
  margin: 0 auto;
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  bottom: 0;
}
.sidebar .author-box .author-name {
  font-size: 1.1em;
  font-weight: bold;
  position: absolute;
  margin-bottom: 0.4em;
  top: 23px;
  bottom: 0;
  right: 0;
  left: 0;
}
.sidebar .author-box .author-widget-name {
  position: absolute;
  top: 3px;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 0.7em;
  color: #bbb;
}
.sidebar .author-box .sns-follow {
  padding: 15px 10px;
}
.sidebar .author-box .sns-follow-buttons {
  display: flex;
  justify-content: space-evenly;
}
.sidebar .author-box .sns-follow-buttons a {
  border-radius: 50%;
  border: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  background:#fff;
}
.sidebar .author-box .sns-follow-buttons a:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
  opacity: 1;
}
.sidebar .author-box .sns-follow-buttons .follow-button span:before {
  color: #46CDFF;
}
.sidebar .icon-instagram-new:before {
  content: "\ea92";
  font-size: 24px;
}
.sidebar .author-box .to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #46CDFF;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  top: 105px;
  right: 45px;
  font-size: 0.9em;
  font-weight: bold;
}
.sidebar .author-box .to-profile:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
}
.sidebar .author-box .sns-follow-message {
  margin-bottom: 10px;
  font-size: 13px;
}
.sidebar .author-box .sns-follow-message:before {
  content: "＼";
  margin-right: 5px;
}
.sidebar .author-box .sns-follow-message:after {
  content: "／";
  margin-left: 5px;
}
.sidebar .icon-twitter-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}
.sidebar .icon-facebook-logo:before {
  position: absolute;
  top: 6px;
  bottom: 0;
  right: 8px;
  left: 0;
}
.sidebar .icon-hatebu-logo:before {
  position: absolute;
  top: 8px;
  bottom: 0;
  right: 0;
  left: 0;
}
.sidebar .icon-feedly-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}
.sidebar .icon-rss-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}

色を変える方法！

それぞれの色の変え方です。

背景色を変える！

サンプルの青いグラーデション部分ですね。

ここを変えるには先ほどコピーしたCSSで以下の箇所を変更します。

#sidebar .author-content {
  background: -webkit-linear-gradient(0deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
  color: #fff;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}

ここのbackgroundというところです。

ここを好きな色に変えるのですが何を書いたらいいかわかりませんよね。

ベタ塗りの方法とグラデーションにする方法を紹介します。

1：ベタ塗り

まず二つあるbackgroundを削除します。

次にbackground:#○○;を追加します。○○にカラーコードを入れます。

白だったら#ffffff、黒だったら#000000のような感じです。

Googleでカラーコードで検索すれば例が出て来ると思うのでそちらを参考にしてください。

変更後参考コード

#sidebar .author-content {
  background: #ff9a9e;
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
  color: #fff;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}

2：グラデーション

ベタ塗りではなくグラデーションにする方法です。

グラデーションのCSSは下記サイトがオススメです。

参考Webgradients

例えば上図の左のグラデーションにしてみましょう。

CopyCSSをクリックすればCSSがコピーされます。

それを下記のようにbackground二つを消して、代わりに貼り付けます。

変更後参考コード

#sidebar .author-content {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
  color: #fff;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}

するとこのように色が変わってるかと思います。

名前の色を変える！

背景色だけ変えても統一感なくて微妙ですよね。

次に名前の色を変えましょう。

先ほどコピーしたCSSで以下の箇所を変更します。

#sidebar .author-box .author-name a {
  color: #42ace7;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 18px;
}

colorを変更します。

文字色もグラデーションにできますがやや複雑なので割愛します。

カラーコードを入れていきましょう。

グラデーションを背景色にした方はグラデーションのコード内にあるカラーコードがオススメです。

background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

↑の場合#ff9a9eとかですね。

color:#ff9a9e;を元のcolorを消して追加します。

これで色が変わってるはずです。

変更後参考コード

#sidebar .author-box .author-name a {
  color: #ff9a9e;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 18px;
}

アイコンの色を変える！

アイコンの色も変えていきましょう！

先ほどコピーしたCSSで以下の箇所を変更します。

2箇所あります。

#sidebar .author-box .sns-follow-buttons .follow-button span:before {
  color: #46CDFF;
}

#sidebar .author-box .to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #46CDFF;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  top: 105px;
  right: 45px;
  font-size: 0.9em;
  font-weight: bold;
}

それぞれのcolorのカラーコードを変更してください。

アイコンは影の色も変えなければいけない

影が青くなってるのに気づきましたかね。

最後に影の色も変えなければいけません。

今、面倒くさっ！って思いました？あと少しです、頑張りましょう。

2箇所変更します。

#sidebar .author-box .sns-follow-buttons a {
  border-radius: 50%;
  border: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
}

#sidebar .author-box .to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #46CDFF;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  top: 105px;
  right: 45px;
  font-size: 0.9em;
  font-weight: bold;
}

box-shadowの数値を変更します。

数値はカラーコードをGoogleで検索すると出てきます。

例えば「#ff9a9e」で検索。

rgb(255, 154, 158)の数値を先ほどのCSSに反映させます。

変更後参考コード

#sidebar .author-box .sns-follow-buttons a {
  border-radius: 50%;
  border: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(255, 154, 158, .5), 0 0 5px -5px rgba(255, 154, 158);
}

#sidebar .author-box .to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #46CDFF;
  box-shadow: 0 0 10px rgba(255, 154, 158, .5), 0 0 5px -5px rgba(255, 154, 158);
  top: 105px;
  right: 45px;
  font-size: 0.9em;
  font-weight: bold;
}

するとこのように影もピンクになります。

プロフィールその他カスタマイズ方法

プロフィールに肩書きを入れる

名前の上にある肩書きの付け方です。

「WordPress管理画面→外観→ウィジェット」のプロフィール設定のところに肩書き入力欄があります。

入力して保存すればOKです！

フォローミーを入れる！

文言は何でもいいんですがフォローボタンの上に文字を入れる方法です。

「WordPress管理画面→Cocoon設定→SNSフォロー」を選択。

フォローメッセージという欄に好きな文言を入れます。

次にCSSを追加します。

「WordPress管理画面→外観→テーマエディター→style.css」を選択。

下記コードを追記します。

#sidebar .author-box .sns-follow-message {
  display:block;
}

これで表示されるはずです！

以上です！お疲れさまでした！

導入済みのブログ、サイト紹介させてください

「この記事を見て導入したよ！」という方でSNSやブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます！

紹介したにも関わらず反映されていないという方は大変申し訳ないのですがご連絡ください！