Cocoonのプロフィールウィジェットをカスタマイズしてみる

Cocoonのプロフィールウィジェットをカスタマイズしてみるカスタマイズ

この記事では、Cocoonの「プロフィールウィジェット」のカスタマイズについて書いています。

ぜひ参考にしてください!

ここでは、「カラフルライン」のスキンを例として説明していますが、他のスキンや、スキンが適用されていない素の状態でも、そのまま使えるCSSになっています。

カスタマイズの注意事項

カスタマイズについて、幾つかの注意事項を書いておきます。

プロフィールウィジェットの背景が意図した通りにならない場合がある

背景を斜めに表示させるため、プロフィールウィジェットの縦と横の比率が大きく変わると、意図した通りの背景になりません。

特に、タブレットやスマホを横に寝かせて見たときには、背景の表示位置が崩れるのでご承知おきください。

プロフィール画像は円

ここでは、プロフィール画像が円であることを前提に説明しています。

また、プロフィール画像のボーダー(境界線)は以下のCSSとなっているので、同じようなボーダーにしたい場合は、このCSSを流用してください。

.author-thumb img {
  border: 3px solid #319cba;
}

CSSは子テーマのstyle.cssに追加する

ここで紹介するCSSは、子テーマのstyle.cssに追加するのが一番簡単です。

次の記事に、その追加方法を書いているので、参考にしてください。

プロフィールウィジェットの背景をカスタマイズしてみる。

では、さっそくいくつかサンプルを紹介します。

背景が斜めのプロフィール

まずは、シンプルに斜めに背景をつけたプロフィールウィジェットです。

プロフィールウィジェットのカスタマイズその1

CSSは次の通り。

.nwa .author-box {
  background-color: #bbe3d2;
  background-image: 
    linear-gradient(
      15deg, 
      white 0%, 
      white 73%, 
      transparent 0);
  border: 2px solid #acd5e5;
  border-radius: 4px;
}

背景の色(#bbe3d2)や角度(15deg)、背景の表示範囲(73%)を適宜修正してください。

また、プロフィールウィジェットの枠線(border)や、角の丸さ(border-radius)も変更できます。

背景が山形のプロフィール

続いては、背景が山形になっているプロフィール。

プロフィールウィジェットのカスタマイズその2

CSSは次の通り。

.nwa .author-box {
  background-color: white;
  background-image: 
    linear-gradient(
      165deg, 
      #bbe3d2 0%, 
      #bbe3d2 27%, 
      transparent 0), 
    linear-gradient(
      -165deg, 
      #bbe3d2 0%, 
      #bbe3d2 27%, 
      transparent 0);
  border: 2px solid #acd5e5;
  border-radius: 4px;
}

背景の色(#bbe3d2)や角度(165degや-165deg)、背景の表示範囲(27%)を適宜調整してください。

また、プロフィールウィジェットの枠線(border)や、角の丸さ(border-radius)も変更できます。

背景が谷型のプロフィール

続いては、背景が谷形のプロフィール。

プロフィールウィジェットのカスタマイズその3

CSSは次の通り。

.nwa .author-box {
  background-color: #bbe3d2;
  background-image:
    linear-gradient(
      25deg, 
      white 0%, 
      white 67%, 
      transparent 0), 
    linear-gradient(
      -25deg, 
      white 0%, 
      white 67%, 
      transparent 0);
  border: 2px solid #acd5e5;
  border-radius: 4px;
}

背景の色(#bbe3d2)や角度(25degや-25deg)、背景の表示範囲(67%)を適宜調整してください。

また、プロフィールウィジェットの枠線(border)や、角の丸さ(border-radius)も変更できます。

背景が2色のプロフィール

最後は、背景が2色のプロフィール。

プロフィールウィジェットのカスタマイズその4

CSSは次の通り。

.nwa .author-box {
  background-color: white;
  background-image: 
    linear-gradient(
      145deg, 
      #c9e5d9 0%, 
      #c9e5d9 30%, 
      transparent 0), 
    linear-gradient(
      215deg, 
      #7acbd1 0%, 
      #7acbd1 30%, 
      transparent 0);
  border: 2px solid #acd5e5;
  border-radius: 4px;
}

背景の色(#c9e5d9や#7acbd1)や角度(145degや215deg)、背景の表示範囲(30%)を適宜調整してください。

また、プロフィールウィジェットの枠線(border)や、角の丸さ(border-radius)も変更できます。

 

以上です。

今回紹介したCSSを修正して、自分好みのプロフィールにしてみてください!

コメント

タイトルとURLをコピーしました