WordPressCocoon

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

アイキャッチ画像 Cocoon
この記事は約3分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

今回は、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. アイコン(イメージ画像)の回転

最後に

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント