頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

はじめに

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

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

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

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

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

環境

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

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

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

01_WordPress標準コメントと空白表示

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

ただ空白を消すだけなら

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

02_空白部のマージン指定

空白部のマージン指定

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

03_CSSによるマージン指定

CSSによるマージン指定

CSS指定例

空白表示の本来の目的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

07_Gravatarアカウント2パターン

Gravatarアカウント2パターン

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

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

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

Twitterの仕様には注意

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

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

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

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

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

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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


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

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


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - WordPress

  関連記事