WordPressのコメント入力者の名前の横に表示される空白は何か

WordPressのサイトを公開していて、設置しているコメント欄で、
コメントを入力してくれた人の名前の横に微妙な空白が表示されていることはありませんか？
なんとなく気持ちが悪いこの空白をちゃんと表示する方法をご紹介します。

はじめに

最近はあまりコメントを入力してコミュニケーションをとるという形は、
減ってきていると思います。

しかし、こうしたWebサービスやツールのレビューなどを行っていると、
たまに作者の方からコメントを頂いたりもします。
そんな時にはやっぱりコメント欄を設置していてよかったなと思うのです。

そんなコメント欄もWordPress標準のコメント欄やJetPack、Facebookコメント、
その他の外部コメントシステムなど様々なコメントシステムがあります。

サイトのレスポンスなどを考えて、
WordPress標準のコメントを採用している方もおられることと思います。

WrodPress標準のコメントシステムを利用した場合に表示されるコメント欄は、
テーマで表示は多少変化しますが、以下のようなコメント欄ではないでしょうか。

環境

• wordpress: 3.7.1–ja
• 利用テーマ:Twenty Twelve

WordPress標準コメントに空白が表示される

以下は、WordPress標準のコメント欄とTwenty Twelveテーマの組み合わせ表示ですが、
コメント入力者の名前横に空白が表示されています。

WordPress標準コメントと空白表示

ただ空白を消すだけなら

このコメント欄自体はマージンが指定されて空白で表示されているだけです。

空白部のマージン指定

マージンで設定されている為、テーマに合わせたCSSを指定することで、
マージンはなくすことができますし、空白自体は消すことが可能です。

CSSによるマージン指定

CSS指定例

空白表示の本来の目的

この空白、消すだけならCSSで消すことができますが、この空白には意味があります。
アバターの表示です。

WordPressダッシュボードから[設定]-[ディスカッション]を表示します。
ディスカッション設定内の「アバター」部分で[アバターを表示する]にチェックを入れます。

ディスカッション設定アバター表示

チェックを入れると設定の表示でデフォルトアバター表示の選択ができるようになります。

デフォルトアバターの選択

実際にコメント入力欄を確認すると、先ほどの空白部分にアバターが表示されるようになります。
アバター部分を考慮してマージンが設定されています。

アバターの表示とマージン関係

アバターの取得元について

アバターの表示はコメントの投稿時に入力されたメールアドレスが、
Gravatarアカウントに設定されたメールアドレスに一致する場合にはGravatarアイコンが表示されます。

その為、JetPackなどでJetpack コメントを有効にした状態でコメントを行った際にも、
外部SNSなどから取得したメールアドレスが、
自動的にコメントに対して格納される為アイコンの取得が行われます。（Twitterを除く）

例として、以下のように２メールアドレスのGravatarアカウントを利用してアイコンを表示を行います。

Gravatarアカウント２パターン

ここではJetPackコメントで各SNSのアカウント認証を利用してコメント後、
JetPackコメント機能を無効にしています。
各コメントに設定されたメールアドレスに応じてアイコンが変わっています。

投稿とアバター表示パターン

Twitterの仕様には注意

尚、JetPackコメントを利用して、Twitterアカウント認証にてコメントを行った際には、
「algorhythnn@twitter.example.com」などの無効なメールアドレスがコメントに格納されます。

Twitterアカウント認証では、JetPackコメントの機能が有効であれば、
Twitterに設定されているプロフィールアイコンを取得しアイコン表示されます。

しかしJetPackコメントの機能を無効化するとアイコンの取得が正しく行われません。
これはメールアドレスでGravatarアカウントが取得できないためです。

Twitterの無効メールアドレス仕様例

さいごに

空白をCSSなどを利用して調整することで消すこともできますが、
元々、デフォルトのコメントでは少し見にくい印象があるコメント欄を、
アバター表示を行うことでより見やすく華やかにすることができます。

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。
VaultPressは、Automattic Inc.の登録商標(第５４１６９９０号)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください

最後までお読みいただきありがとうございました。

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略