WordPressのプロフィールボックスをカスタマイズ【Cocoon】

WordPressのサイドバーウィジェットなどで利用するプロフィールボックスをカスタマイズしました。今のところダサいですが、そのうち本気出して頑張ろうと思います。

デフォルトのデザイン

カスタマイズするエリアを分かりやすくする為に色を付けました。

セレクタ名とサンプルコード

.author-box {
  border: 2px red solid;
  background: red;
}
.author-content {
  background:blue;
}
.author-thumb {
  border: 3px black solid;
}
.author-name {
  background: pink;
}
.author-description {
  background: yellow;
}
.author-follows {
  background: green;
}

カスタマイズ① 位置を変更

完成イメージも無いままカスタマイズしていたら変な感じになってしまいましたが、何かの参考にはなるかなと思うので紹介します。

※たぶんまたカスタマイズします

完成イメージ

やろうとした事は何となくお分かり頂けるかと思いますが、こんなにダサくなるとは思いませんでしたww

カスタマイズコード(泣)

.author-box {
  border: 0.5px pink solid;
  padding: 10px!important;
}
.author-content {
  background: transparent;
}
.author-thumb {
  margin: auto;
  height: 5px;
  width: 170px!important;
  opacity: 0.18;
  position: relative;
  z-index:1;
  left:-3px;
}
.author-name {
  position: relative;
  z-index: 2;
}
.author-name a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14pt!important;
}
.author-description {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11.5pt;
}
.author-follows {
  margin-top: 30px;
  background: transparent;
}

カスタマイズのポイント

ダサいなりに勉強になった事もあるのでポイントを纏めておきます。

[margin:auto]でセンター寄せ

画像やその他コンテンツを中央に表示したいのに右や左によってしまう事がありますが、[margin :auto]にするとセンターに配置される場合があります。

opacityで透過・z-indexで前後関係

[opacity]で画像を透過しましたが、見た目が薄くなっただけでコンテンツの前面・背面の関係性は変わりません。透過した画像よりもauthor-nameが手前にありそうな雰囲気はあるものの、名前をクリックしようとしたら画像が反応しました。

その為、[z-index]でauthor-nameを画像よりも前面に位置付けしています。positionもrelativeにしておかないと適用されない様です。

カスタマイズ② シンプルでカワイイ感じ

デザインを大きく変更するのはやめて、当サイトの理念「シンプル」をベースにカスタマイズしました。名前の部分だけフニャっとさせてアクセントにしています。

カスタマイズコード

/*プロフィールボックス*/
.author-box {
  border: 3px #ff1493 solid;
  background: #fff;
  padding-bottom:0!important;
}
.author-content {
  background: transparent;
  padding:20px 0px!important;
}
.author-thumb {
  width: 150px!important;
}

.author-name a {
  font-size: 15px;
  padding: 1em;
  color: #fff;
  border-radius: 100% 81px / 81px 100%;
  background-color: #ea64a7;
  width:200px;
  z-index:2;
  text-decoration: none;
}
.author-name a:before {
  content:"";
  position: absolute;
  font-size: 12px;
  padding: 1em;
  color: #fff;
  border-radius: 100% 80px / 80px 100%;
  background-color: #ff1493;
  width:50px;
  height:20px;
  opacity:0.2;
  margin-top:-8px;
  z-index:1;
}

.author-description {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10pt;
  margin-top: 29px;
  margin-bottom:20px;
  color:#123;
}

.author-follows .follow-button {
  border-radius: 50%!important;
  border-color:#ff1493!important;
  width:35px!important;
  height:35px!important;
  font-size:27px!important;
  color: #ff1493!important;
  background:#fff!important;
}