【WordPress】プロフィールカスタマイズ方法完全ガイド（プロフィール下リンクをクリック可能にする）

この記事でわかること

• プロフィール下のアイコンをクリックできるようにする

何が起こっているの？

私の下の記事からこちらのページに来ていただいている皆さんはこれから説明する内容で間違いないですが、それ以外の皆さんはこれから説明する内容が必ずしも解決につながらない可能性があります。
ご理解いただいたうえでご覧ください。

上の記事ではプロフィール枠全体にマウスオーバー（カーソルを合わせる）したときにアイコンを拡大するCSSを設定しました。

この影響でプロフィール下のリンクよりも上にアイコン拡大の設定がされてしまいクリックできなくなっています。

CSSのオーバーレイ設定を編集する

下のCSSコードをコピーしてカスタマイズ画面で貼り付けます。

まずは下のCSSコードをコピーして、、

/* ==========================================
 * 1. プロフィール全体をリンクにする設定
 * ========================================== */
.author-box {
    position: relative;
    z-index: 1; /* 重なり順（レイヤー）の基準を設定 */
}

/* 名前から広がる全体を覆う「透明なカバー」 */
.author-name a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10; /* カバーの重なり順を「10」に下げる */
    display: block;
}

/* ==========================================
 * 2. マウスオーバー時にアバター画像を大きくする
 * ========================================== */
.author-box .avatar {
    transition: transform 0.3s ease;
    position: relative;
    z-index: 5; /* 透明カバー（10）の下に配置（ホバーで画像がはみ出さないように） */
}
.author-box:hover .avatar {
    transform: scale(1.08); /* 1.08倍に拡大 */
}

/* ==========================================
 * 3. X(Twitter)ボタンを「透明カバー」より前に出してクリック可能にする
 * ========================================== */
/* .twitter-button がXリンクのクラス名です */
.author-box .twitter-button {
    position: relative;
    z-index: 20; /* 透明カバー（10）より高い「20」を設定して、最前面に引っ張り出す */
}

.author-box .twitter-button:hover {
    pointer-events: auto; /* マウスのクリック反応を確実に有効化 */
    z-index: 30;           /* ホバー時はさらに安全のため最前面へ */
}

コピーしたら、ダッシュボードを開いてください。

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

貼り付けたら忘れずに上部の公開ボタンを押して保存してください。

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

下画像のようにｘアカウントのリンクボタンがクリックできるようになっているはずです。

まとめ

• レイヤーの重なり順（z-index）を調整することでリンクボタンがクリックできるようになる