【WordPress】プロフィールカスタマイズ方法完全ガイド（サイドバーに表示・マウスオーバーで拡大・自己紹介ページに画面遷移）

この記事でわかること
ユーザー情報の登録
サイドバー（ウィジェット）へ配置する
アイコンに動きを付ける
1. 枠全体のリンク化（.author-name a::after の解説）
2. なめらかな拡大アニメーション（.avatar の解説）
まとめ

この記事でわかること

サイドバーにプロフィール設置する
プロフィールアイコンにマウスオーバー（カーソルを合わせる）したときにアイコンを拡大する
プロフィールアイコンから自己紹介ページに画面遷移させる

ハルト

ブログに魅力的なプロフィールを作りたいなぁ
けど・・・どうしたらいいんだ～

アイラ

なるほどね、わかるよ～
私もブログ作っているとき同じことを考えていたから色々調べたの
私が実際に使ってるカスタマイズ手順について教えてあげるね
誰でもわかるように画像付きで丁寧に説明するか安心してね。
下のプロフィールが作れるようになるよ～
一緒に作ってみよ！

ユーザー情報の登録

まずは表示する中身（名前、アイコン画像、自己紹介文）を設定します。

https～から始まる自分のブログURLにアクセスして

ダッシュボードを開いたら

プロフィール設定ページにアクセスします。

「ニックネーム（必須）」を登録すると「ブログ上の表示名」が選べるようになります。
※ユーザ名を選択することもできますが、サイト上の表示名を使い分けたい方はニックネームを選択するとよいと思います。

少し下のほうにあるプロフィール情報を入力します。
※「プロフィール写真」の項目で画像を設定することもできますが、Gravatarアカウントを作成する必要があるため別の方法を紹介します。

設定完了したら左下の「プロフィールを更新」を忘れずに！！

ここまででユーザー情報の登録は完了です！
次の章で設定したユーザ情報をアイコンとして表示していきます。

ハルト

早く表示したいよ～

アイラ

すぐ説明するからね
わくわくだね！

サイドバー（ウィジェット）へ配置する

さっそくサイドバーにプロフィールアイコンを表示していきましょう！

ウィジェットページにアクセスしたら

右下の「保存」を忘れずに！！！

この設定でブログのサイドバーにプロフィールが設置されているはずです。
よく見るようなページに近づいてきましたね。
次の章でプロフィールアイコンにマウスオーバー（カーソルを合わせる）したときにアイコンを拡大する動きを付けています。

ハルト

がんばるぞ～

プロフィール下アイコンの消し方について

気になる方はこちらの資料をご覧ください。

準備中です。もう少々お待ちください。

アイコンに動きを付ける

ここからが本番です！「外観」＞「カスタマイズ」＞「追加CSS」にコードを貼り付けることで、劇的に使いやすく魅力的なプロフィールに進化させます。

まずはダッシュボードを開いて

↑のページが開いたら準備完了です。
下記のCSSコードを貼り付けましょう。

/* プロフィール枠全体をリンクにする (クラス名修正版) */
.author-box {
    position: relative;
}
.author-name a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999; /* 画像や文字よりも確実に一番上に重ねる */
    display: block;
}

/* マウスオーバー時にアイコン画像をフワッと大きくする */
.author-box .avatar {
    transition: transform 0.3s ease;
}
.author-box:hover .avatar {
    transform: scale(1.08); /* 1.08倍に拡大 */
}

徹底解説！このCSSコードで何が起きているの？

このコードは大きく分けて「全体をクリックできるようにする魔法」と「動くアニメーション」の2つの仕組みでできています。

枠全体のリンク化（.author-name a::after の解説）

通常、Cocoonのプロフィールは「名前（青文字）」の部分しかクリックできません。これを画像や四角い枠全体のどこを押してもリンク先に飛べるようにしています。

position: relative; と position: absolute; プロフィールの白い四角枠（.author-box）を基準にして、名前のリンク（aタグ）を基準（absolute）として扱います。
content: ""; と top: 0; right: 0; bottom: 0; left: 0; 名前のリンクから「透明な座布団（疑似要素 ::after）」を生み出し、上下左右のサイズを 0（限界まで広げる）にすることで、プロフィールの白い枠と全く同じ大きさまで透明なリンクボタンを拡大させています。
z-index: 999; この透明なリンク座布団が、画像や文章よりも「一番手前（上層）」に重なるようにしています。これにより、ユーザーが画像や文章に触れたとき、実際には「名前のリンク」を触っている状態を作り出しています。

なめらかな拡大アニメーション（.avatar の解説）

マウスが枠の上に乗ったときに、アイコン画像を動かす演出です。

transition: transform 0.3s ease; あらかじめ画像に対して「変化するときは0.3秒かけて、滑らかに（ease）動いてね」という指示を出しておきます。これがないと、マウスを乗せた瞬間にカチカチと不自然に画像が切り替わってしまいます。
.author-box:hover .avatar 「プロフィール枠（.author-box）にマウスが乗ったとき（:hover）、その中にある画像（.avatar）に対して命令を出す」という指定です。
transform: scale(1.08); 画像を「1.08倍の大きさ」に拡大させています。

ハルト

で、できた！
やった～
これで僕の完璧なブログが完成したぞ、ふっふっふ

アイラ

フフ、調子いいんだから
お疲れ様
この調子でブログを形にしていこうね

まとめ

少しのCSSを加えるだけで、読者が思わずクリックしたくなるような「動くプロフィール」が作れる。
直感的にクリックしやすい導線を作ることで、あなたの詳しい自己紹介ページへのアクセスアップに繋がります！

ここまでご覧いただきありがとうございました。
質問などありましたらどしどしコメントください。
ほかにも役立つ記事をまとめていこうと思うので今後ともよろしくお願いします！