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)も変更できます。

水平に上下2色のプロフィール

ここからは、画面を横にしてもほとんどレイアウトが崩れないプロフィールです。

まずは、上下2色のプローフィール。

CSSは次の通り。

.nwa .author-box {
  text-align: center;
  padding: 20px;
  background-color: white;
  background-image:
    linear-gradient(
      180deg,
      #bbe3d2 110px,
      white 110px,
      transparent 0);
  border: 2px solid #acd5e5;
  border-radius: 4px;
}

背景の色(#bbe3d2)や、背景色の範囲(110px)を適宜調整してください。

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

ポケモンっぽいプロフィール

上下2色のプロフィールを応用して、ポケモンっぽいのが作れます。

CSSは次の通り。

.nwa .author-box {
  text-align: center;
  padding: 20px;
  background-color: white;
  background-image:
    linear-gradient(
      180deg,
      #f14140 100px,
      black 100px,
      black 112px,
      transparent 0);
  border: 2px solid #acd5e5;
  border-radius: 20px;
}
.nwa .author-thumb img {
  border: 6px solid black;
}
.nwa .author-widget-name {
  color: white;
}

黒い線の太さはblackの112pxを、プロフィール画像の黒い枠の太さは「.author-thumb img」のborderの6pxを調整してください。

背景色にグラデーションをかけたプロフィール

続いては、背景色にグラデーションをかけたプロフィール。

CSSは次の通り。

.nwa .author-box {
  text-align: center;
  padding: 20px;
  text-align: center;
  padding: 20px;
  background-color: white;
  background-image:
    linear-gradient(
      180deg,
      #bbe3d2 100px,
      white 200px,
      white 100%,
      transparent 0);
  border: 2px solid #acd5e5;
  border-radius: 4px;
}

背景の色(#bbe3d2)や、グラデーションをかける範囲(200px)を適宜調整してください。

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

プロフィールアイコンのカスタマイズ

インスタグラムのストーリーアイコン風

次は、インスタグラムのストーリーアイコン(って言うのかな?)の枠を真似てみました。

↓こんな感じ。

CSSは次の通り。

.author-thumb img {
  padding: 3px;
  border-left: 3px solid #d66710;
  border-top: 3px solid #C73d97;
  border-right: 3px solid #d260ab;
  border-bottom: 3px solid #e48032;
  box-shadow: none;
}

以上です。

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

コメント

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