WordPress の自分のコメントにCSSだけでプロフィール画像

2016-08-11

WordPress にはコメント一覧には、gravatar などを使ってプロフィール画像、アバターを設置することが出来ます。

ただ日本ではあまり有名なサービスではないので利用者が多くありません。アバターを設置できるように WordPress で設定してしていても、ほとんどプロフィール画像が表示されることがありません。

他人のプロフィールアイコンはともかく自分の返信に自分のアイコンぐらいは載せたいという事で gravatar に登録して載せるのもアリなのですが、自分の画像を載せるだけなら CSS だけで手軽にできるのでやってみます。URL より自分のコメントを判断してそこにアイコンを無理やりつけるといった感じの CSS です。

comment-prof

自分のコメントにプロフィールアイコンを

下の画像のような感じで自分のコメントのみにアイコン画像を載せてみます。

comment-prof

以下の CSS はあくまでも WordPress のコメントが初期設定の HTML 構造になっている場合の CSS です。style.css に加えてください。

CSS

.comment-author .url[href*=自分のブログのドメインなど]::after {
    background-image: url(プロフィール画像のURL);
    display: block;
    height: 45px; /* 画像の高さ */
    position: absolute;
    right: 0; /* 画像の位置 右から */
    top: 0; /* 画像の位置 上から */
    width: 45px; /* 画像の幅 */
}

.comment-author {
    position: relative;
}

赤字の部分と高さ、幅、位置を設定する height、width、top、right の値は変更します。position を使って無理やりプロフィール画像を動かしています。

赤字が日本語で若干わかりにくいので、当ブログでの CSS を例として挙げてみます。

CSS 例

.comment-author .url[href*=q-az]::after {
    background-image: url(/wp-content/uploads/2015/11/pr45j.jpg);
    display: block;
    height: 45px;
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
}


.comment-author {
    position: relative;
}

当ブログのドメインである「q-az」が URL に含まれる場合、画像を after 疑似要素を使って表示するといった構造です。[href*=○○○] で href 属性に ○○○ が含まれる場合、を指します。自分のブログの URL のドメイン部分を入れておけば問題ないです。ログイン時に自分で自分のブログにコメントをした際 URL の部分に自分のブログの URL が入ることになりますのでそれを利用しています。

まとめ

相手方のアイコンを柔軟に表示させるのは結構色々策を練らなければいけないのですが、自分のアイコンであれば CSS だけでも簡単です。comment.php など PHP ファイルを操作して HTML としてしっかりとした画像要素を入れることも出来ますが、CSSだけで出来るならそれはそれで簡単だと思っています。

そんなにコメント自体来ることがないのですが、自分の返信コメントがわかりやすくなるだけでも多少華やかになってくれる気がします。