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

アイキャッチ画像 Cocoon
スポンサーリンク

WordPressテーマ Cocoon

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

ZMASAa.blog│masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③
購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③

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

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

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

【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] プロフィール」のスタイルは次の様になりました。

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

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

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

最後に

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

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

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール