【Cocoon】ウィジェット [C] プロフィールのカスタマイズ

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

wp.masaa.net

今回は、WordPressテーマ Cocoonでの「ウィジェット [C] プロフィール」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon ウィジェット [C] プロフィール

現在のWordPressテーマ Cocoonでの「ウィジェット [C] プロフィール」のスタイルは次の様になっています。

もう少し見やすいプロフィールにするためのカスタマイズを行いたいと思います。

ウィジェット [C] プロフィールのカスタマイズ

WordPressテーマ Cocoonでの「ウィジェット [C] プロフィール」のカスタマイズを行います。

カスタマイズ内容

「ウィジェット [C] プロフィール」カスタマイズの内容は、下記の通りです。

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■ウィジェット[c]プロフィールカスタマイズ
************************************/
.nwa .author-box .author-description { /*プロフィール情報*/
  word-break: break-all; /*表示範囲に合わせて改行*/
  text-decoration: underline dotted #bbb; /*アンダーライン*/
  font-size: 14px; /*フォントサイズ*/
}
.nwa .author-box .author-thumb img { /*プロフィールアイコン回転*/
  animation: kaiten 8s linear infinite; /*アニメーション*/
}
@keyframes kaiten {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-35deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(35deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

カスタマイズ後のウィジェット [C] プロフィール

今回のカスタマイズによって、「ウィジェット [C] プロフィール」のスタイルは次の様になりました。

今回の「ウィジェット [C] プロフィール」のカスタマイズは、下記について行っています。

1. アンダーラインの表示
2. 言語に関係なく表示範囲に合わせて改行（単語の途中で改行有り）
3. フォントのサイズ調整
4. アイコン（イメージ画像）の回転

最後に

そこまでは大きく変わっていませんが、見やすくなったと思います。

アイコン（イメージ画像）が左右に揺れるのも良い感じになりました。