【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ!!

Cocoonカスタマイズ
既に当カスタマイズを適用済みの方へCocoon1.1.7以降ではレイアウトが崩れてしまいます。1.1.7対応版コードを掲載しましたので、お手数ですがCSSの上書きをお願いいたします。

Cocoonに慣れすぎてWordPressの標準カスタマイザーが使えなくなったさいとう(@S41T0H)です。

今回は最高のWordPress向け無料テーマこと「Cocoon(コクーン)」のカスタマイズシリーズ第17弾(!)として、「プロフィールボックス」(ウィジェットで挿入できる「[C] プロフィール」)のデザインをTwitterライクなオシャレデザインに変更するカスタマイズです!

サイドバー配置時はこんな感じ(ソーシャルアイコン類はフル表示させています)。

そして、メインカラム内(記事下など)に配置した場合はこんな感じになります。

(吹き出しの「この記事を書いた人」吹き出しテキストは「ウィジェット」の設定から表示/非表示設定可能です)

スポンサーリンク

さっそくCocoonのプロフィールデザインを変更するCSSコードです。

Cocoonの子テーマstyle.cssに追記してください(おそらくレスポンシブ対応できているハズです)。

【2018.09.01更新】 Cocoon1.1.7対応版

アイコンを丸く切り抜く機能が公式実装されたので、丸アイコンはそちらでご対応ください。

9/3追記:スマホ表示時にインスタアイコンがズレてしまっていたので修正

.author-box {
	border: none !important;
	padding: 0 !important;
}

.pwa .author-box {
	text-align: left; /* 文字を左揃えに */
}
.author-box .author-widget-name{
	color: #666;
	background-color: #eaedf2;
	display: inline-block;
	margin: 0 auto 3px 1rem;
	padding: .4em;
	border-radius: 4px;
	font-weight: bold;
	position: relative;
	z-index: 2;
	font-size: .9em;
}

.author-box .author-widget-name::before {
	content: '';
	position: absolute;
	left: 20%;
	bottom: -15px;
	display: block;
	width: 0;
	height: 0;
	border-right: 15px solid transparent;
	border-top: 15px solid #eaedf2;
	border-left: 15px solid transparent;
	z-index: 1;
}

.author-box figure.author-thumb{
	float: none;
	margin: 0 !important;
	text-align: center;
	width: 100% !important;
	background: url(https://~~.jpg) center no-repeat; /* カバー画像を指定 */
	background-size: cover;
	position: relative;
	height: 0;
	/* フル表示にしたい場合のpadding-topの値: 表示画像の高さ(px) ÷ 表示画像の幅(px) × 100(%) */
	padding-top: 40%;
	z-index: 0;
}

.author-box figure.author-thumb img{
	border: 3px solid #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
	height: auto;
	width: 30%;
	max-width: 200px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -4.5em;
}

.author-box .author-content{
	margin-left: 0 !important;
	margin-top: 5.5em !important;
}

.author-box .author-content .author-name{
	text-align: center;
	font-size: 1.3rem;
}

.author-box .author-content .author-name a{
	color: #14171a;
	text-decoration: none;
}
.author-box .author-content .author-name a:hover{
	color: #14171a;
	text-decoration: underline;
}

.author-box .author-content .author-description p{
	margin: .5em auto;
	line-height: 1.5 !important;
	max-width: 500px;
	font-size: 90%;
	text-align: left;
}

.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }

.author-box .author-content .author-follows .sns-buttons a.follow-button{
	border-radius: 50%;
	border: none;
	width: 40px;
	height: 40px;
	color: #fff;
	margin-bottom: .5em;
	margin-right: .5em;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

.author-box .bc-brand-color.sns-follow .website-button{ background-color: #6eb6fd !important; }
.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #7dcdf7 !important; }
.author-box .bc-brand-color.sns-follow .facebook-button{ background-color: #7c9dec !important; }
.author-box .bc-brand-color.sns-follow .hatebu-button{ background-color: #2c6ebd !important; }
.author-box .bc-brand-color.sns-follow .google-plus-button{ background-color: #dd4b39 !important; }
.author-box .bc-brand-color.sns-follow .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}
.author-box .bc-brand-color.sns-follow .youtube-button{ background-color: #cd201f !important; }
.author-box .bc-brand-color.sns-follow .flickr-button{ background-color: #111 !important; }
.author-box .bc-brand-color.sns-follow .pinterest-button{ background-color: #bd081c !important; }
.author-box .bc-brand-color.sns-follow .line-button{ background-color: #00c300 !important; }
.author-box .bc-brand-color.sns-follow .amazon-button{ background-color: #ff9900 !important; }
.author-box .bc-brand-color.sns-follow .github-button{ background-color: #4078c0 !important; }
.author-box .bc-brand-color.sns-follow .feedly-button{ background-color: #2bb24c !important; }
.author-box .bc-brand-color.sns-follow .rss-button{ background-color: #f26522 !important; }

.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }

main .author-box{
	max-width: 400px;
	margin: 0 auto;
	font-size: 80%;
}

~Cocoon1.1.6版

Cocoon1.1.6以前版(クリックで表示)
.author-box {
	border: none;
	padding: 0;
}
.author-box .author-widget-name{
	color: #666;
	background-color: #eaedf2;
	display: inline-block;
	margin: 0 auto 3px 1rem;
	padding: .4em;
	border-radius: 4px;
	font-weight: bold;
	position: relative;
	z-index: 2;
	font-size: .9em;
}

.author-box .author-widget-name::before {
	content: '';
	position: absolute;
	left: 20%;
 	bottom: -15px;
 	display: block;
	width: 0;
	height: 0;
	border-right: 15px solid transparent;
	border-top: 15px solid #eaedf2;
	border-left: 15px solid transparent;
	z-index: 1;
}

.author-box figure.author-thumb{
	float: none;
	margin: 0 !important;
	text-align: center;
	width: 100% !important;
	background: url(https://~~/.../○○.png) center no-repeat; /* カバー画像URLを指定 */
	background-size: cover;
	position: relative;
	height: 0;
	/* フル表示にしたい場合のpadding-topの値(%): 表示画像の高さ(px) ÷ 表示画像の幅(px) × 100(%) */
	padding-top: 40%;
	z-index: 0;
}

.author-box figure.author-thumb img{
	border-radius: 50%;
	border: 3px solid #fff;
  	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
	height: auto;
	width: 30%;
	max-width: 200px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -5em;
}

.author-box .author-content{
	margin-left: 0 !important;
	margin-top: 5.5em;
}

.author-box .author-content .author-name{
	text-align: center;
	font-size: 1.3rem;
}

.author-box .author-content .author-name a{
	color: #14171a;
	text-decoration: none;
}
.author-box .author-content .author-name a:hover{
	color: #14171a;
	text-decoration: underline;
}

.author-box .author-content .author-description p{
	margin: .5em auto;
	line-height: 1.5 !important;
	max-width: 500px;
}

.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }

.author-box .author-content .author-follows .sns-buttons a.follow-button{
	border-radius: 50%;
	border: none;
	width: 40px;
	height: 40px;
	color: #fff;
	margin-bottom: .5em;
	margin-right: .5em;
  	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

.author-box .bc-brand-color.sns-follow .website-button{ background-color: #6eb6fd !important; }
.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #7dcdf7 !important; }
.author-box .bc-brand-color.sns-follow .facebook-button{ background-color: #7c9dec !important; }
.author-box .bc-brand-color.sns-follow .hatebu-button{ background-color: #2c6ebd !important; }
.author-box .bc-brand-color.sns-follow .google-plus-button{ background-color: #dd4b39 !important; }
.author-box .bc-brand-color.sns-follow .instagram-button{ position: relative; background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important; overflow: hidden;}
.author-box .bc-brand-color.sns-follow .instagram-button span::before{ z-index: 1 !important; position: relative; }
.author-box .bc-brand-color.sns-follow .instagram-button span::after{ content: ''; position: absolute; top: 14px; left: -20px; width: 60px; height: 60px; background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); }
.author-box .bc-brand-color.sns-follow .youtube-button{ background-color: #cd201f !important; }
.author-box .bc-brand-color.sns-follow .flickr-button{ background-color: #111 !important; }
.author-box .bc-brand-color.sns-follow .pinterest-button{ background-color: #bd081c !important; }
.author-box .bc-brand-color.sns-follow .line-button{ background-color: #00c300 !important; }
.author-box .bc-brand-color.sns-follow .amazon-button{ background-color: #ff9900 !important; }
.author-box .bc-brand-color.sns-follow .github-button{ background-color: #4078c0 !important; }
.author-box .bc-brand-color.sns-follow .feedly-button{ background-color: #2bb24c !important; }
.author-box .bc-brand-color.sns-follow .rss-button{ background-color: #f26522 !important; }

.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }

main .author-box{
	max-width: 400px;
	margin: 0 auto;
	font-size: 80%;
}

注意点など

元々ある「Feedly」ボタンと「RSS」ボタンを削除したい場合は下記CSSを追記してください!

.widget_author_box .feedly-button, .widget_author_box .rss-button{ display: none; }

突貫工事で作ったので、適宜上手いことアレしてください。

もし不明な点などありましたらコメントしてくださいね。

では。

他のカスタマイズは下から。

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント

  1. そっくりそのままコピペで使わせていただきました。
    めちゃくちゃステキになりました…ありがとうございました!

    • コメントありがとうございます!
      気に入っていただけて光栄です!
      サイト拝見しましたが全体的に統一性があってポップで素敵なデザインでした!
      応援しております、これからもよろしくお願いいたします!

  2. 初めまして!カスタマイズ使用させていただきました♪ ありがとうございました!

    1点質問です。プロフィールの文字を大きくするには、どの部分を変更したらよいのでしょうか?
    (初心者の質問ですみません)

    • コメントありがとうございます!
      下記のCSSコードを追加して、「○○」の部分に数値(小数可)を入れて調整してみてください!(デフォルトでは1.3です)

      .author-box .author-content .author-name {
          font-size: ○○rem;
      }
  3. はじめまして。おはようございます。
    さっそく質問なのですが、背景画像を設定するためには、
    【url(<ここにカバー画像のURL>)】
    この部分に画像urlを書きこむだけでいいのでしょうか?
    真っ白のままで反映されません。ほかになにか設定したり、数値を打ちこむ必要があるのでしょうか?
    よろしくお願いいたします。

    • コメントありがとうございます。
      <>も含めてURLに置き換えていらっしゃいますでしょうか?
      具体的には、

      background: url(https://~~/○○.png) center no-repeat; /* カバー画像を指定 */
      
      のように、()内に直接画像へのリンクを記載してみてください。
      (紛らわしかったので修正いたしました)
  4. 初めまして。
    プロフィールそのままコピペで使用させて頂いております。
    SNSフォローボタンをTwitterのみ表示させたいのですが、できませんでしょうか?
    初期設定にある2つを削除したいと思っています。

    • コメントありがとうございます!
      デフォルトのfeedlyボタンとRSSボタンを非表示にしたい場合は、下記コードを追加してみてください。

      .widget_author_box .feedly-button, .widget_author_box .rss-button{
        display: none;
      }
  5. いつもブログ記事参考になっています。ありがとうございます。
    本カスタマイズをしていますが、本日のcocoonのテーマアップデートでInstgramのアイコン位置だけが上にずれてしまい、また〇で囲まれた画像が下にずれて名前のテキストにかぶってしまいました。
    修正方法をご教授いただけますと助かります。

    • コメントありがとうございます!
      Cocoon1.1.7にて当該状況が確認できましたので、修正版のCSSコードを記事内に追記いたしました。
      ご報告ありがとうございました!

  6. コウさん
    カスタマイズがとても気にいっていたこともあり、修正箇所教えていただきまして
    ありがとうございます!
    無事表示することができました。
    これからもcocoonなどのカスタマイズ記事楽しみにしております。

    • よかったです!
      今後ともよろしくお願いいたします!

  7. 先日は回答ありがとうございます。
    少し前から文字・吹き出しが中央によってしまう現象がおきています。
    修正方法が分からず困っているのですが、もし分かりましたら教えて頂きたいと思います。
    お願い致します。

    • コメントありがとうございます!
      おそらくアップデートに伴う仕様変更だと思われます。
      下記CSSの追記にて改善されますでしょうか?

      .nwa .author-box {
          text-align: left;
      }

      お試しください。

  8. 修正できました。
    しかし、フォローボタンも左端によってしまいました。
    中央にできますでしょうか?

    • 当環境ではその現象が再現できませんでした。

      .sns-follow-buttons{
          text-align: center;
      }

      上記コード追加で直りませんようでしたらお手数ですが問題が発生しているページのURLを送って頂けませんでしょうか?

  9. 返答ありがとうございました。
    文字を左詰めにしている事により、フォローボタンもよったのだと思います。
    中央揃えのままで様子を見ようと思います。
    お騒がせしました。