WordPressでGravatarの画像サイズを変更する方法

WordPressでGravatarの画像サイズを変更したいですか？

Gravatar は、コメントする人やブログ投稿者を表すために使用される画像です。WordPressのテーマでは、Gravatarは設定されたサイズで表示されますが、サイトのデザインに合わせて小さくしたり大きくしたりすることができます。

この投稿では、WordPressでGravatar画像のサイズを変更する方法を紹介します。

WordPressでGravatarの画像サイズを変更する理由とは？

Gravatarとは、Globally Recognized Avatarの略。プロフィールを作成し、アバター画像とメールアドレスを関連付けることができるウェブサービスです。

ほとんどのWordPressテーマは、ユーザーのコメントの横にGravatarを表示します。また、投稿者の経歴欄に Gravatar を表示するテーマもあります。

ユーザーがGravatarアカウントを持っていない場合でも、サイトにはWordPressの初期設定のGravatarが表示されます。

テーマのグラビアのサイズを変更したい場合があります。例えば、サイトのコメント欄に訪問者の注意を引くために、目立つように大きくしたい場合があります。

それでは、WordPressサイトのGravatar画像サイズを変更する方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプしてください：

方法1：フルサイトエディターでグラバターサイズを変更する（ブロックテーマのみ）

ThemeIsle Hestia ProやTwenty Twenty-Threeのようなブロックベースのテーマを使っている場合は、フルサイトエディターを使ってGravatarサイズを変更することができます。

この方法はすべてのテーマで機能するわけではないので、ブロック有効化テーマを使用していない場合は、代わりに2の方法を使用することをお勧めします。

WordPressのダッシュボードで、外観“エディターに進みます。

フルサイトエディターが表示され、WordPressウェブサイトの様々な部分を編集するための設定が表示されます。

WordPressでコメントするGravatarのサイズを変更するには、左側のパネルの上側にある検索バーのアイコンをクリックします。

この時点で、コメントするテンプレート部分を探せばいい。

見つけたらクリックしてください。

次のページでは、コメントするテンプレート部分に関する情報が表示されます。

コメントテンプレート部分を編集するには、鉛筆ボタンをクリックします。編集インターフェースが表示されます。

ライブプレビューのグラビアをクリックしてください。

右側のメニューで、「ブロック」タブがすでに選択されていなければ、それを選択することができる。

Imageサイズ」スライダーをドラッグすることで、グラビアを大きくしたり小さくしたりすることができます。

スライダーを動かすと、すべてのグラビアが自動的に更新されます。

さらに、「ユーザープロフィールへのリンク」設定を有効化してください。ユーザーがGravatarをクリックすると、あなたのサイトのコメントする人のプロフィールページに移動します。

変更が完了したら、「保存」ボタンをクリックしてください。

これで、WordPressサイトのコメント欄にアクセスすると、変更が反映されていることがわかります。

方法2：comments.phpを編集してGravatarのサイズを変更する（すべてのテーマ）

ブロックWordPressテーマを使用していない場合は、テーマのコードを編集することで、WordPressコメント用のGravatarサイズを変更することができます。

この方法はテーマファイルの編集が必須なので、初心者に優しい設定とは言えない。しかし、この方法はほとんどのWordPressテーマで使えるはずだ。

まず、FileZillaなどのFTPクライアントを使用してWordPressサイトに接続するか、WordPressホスティングのcPanelのファイルマネージャを使用する必要があります。

初めてFTPを使用する場合は、FTPを使用してサイトに接続する方法についての完全なガイドを参照してください。

接続が完了したら、/wp-content/themes/に移動し、現在のWordPressテーマのフォルダーを開く必要があります。

ここで、comments.phpファイルを開き、wp_list_comments関数を探します。この関数の中に、Gravatarのサイズを設定するtheavatar_sizeがあります。

これがその例だ：

<?php
wp_list_comments(
    array(
        'avatar_size' => 60,
        'style'       => 'ol',
        'short_ping'  => true,
    )
);
?>

avatar_sizeを使いたいサイズに変更するだけです。上のコード・スニペットでは、60を別の数値に変更することになります。

グラビアは正方形なので、WordPressは画像の幅と高さに同じ値を使用します。つまり、1つの数値を入力するだけでよいのです。

この変更を行った後、ファイルを保存してWordPressホスティングサービスアカウントにアップロードしてください。完了したら、WordPressブログにアクセスして、変更を確認することができます。

Gravatar 画像が変更されない場合は、キャッシュが原因である可能性があります。さらに詳しく知りたい方は、WordPressがすぐに更新されない場合の対処法をご覧ください。

それでもGravatarが変更されない場合は、テーマのCSSがcomments.phpファイルの設定を上書きしている可能性があります。この場合、次の方法を試す必要があります。

方法 3: style.css を編集して Gravatar のサイズを変更する (すべてのテーマ)

テーマのCSSがcomment.phpファイルを上書きしているかどうかを確認するには、ブラウザーのInspectツールを使用します。使用するブラウザーによって手順は異なりますが、Chromeの場合はグラビアターを右クリックまたはCtrlキーを押しながらクリックし、「Inspect」を選択するだけです。

これにより、ページのHTMLとCSSコードが新しいパネルに表示されます。

このコードでは、一番下のパネルに注目し、コメントする人のアバターのCSSクラスを探してください。

私たちの例では、それらは.comment-authorと .avatarであり、Gravatarの高さと幅の値のためのCSSプロパティを含んでいます。CSSコードスニペットにマウスオーバーすると、プレビュー上でGravatarがハイライトされるため、このことがわかります。

私たちのテーマでは、コードは次のようになります。あなたのテーマでは違って見えるかもしれません：

.comment-author .avatar {
height: 42px;
position: relative;
top: .25em;
width: 42px;
}

CSSコードのGravatarサイズがコメント.phpファイルで指定したものと異なる場合、テーマのstyle.cssファイルがあなたの変更を上書きしていることを意味します。

style.cssファイルを編集するには、WPCodeを使用する必要があります。WPCodeは、カスタマイザーコードを簡単にテーマに挿入できるコードスニペットプラグインです。これを使えば、style.cssファイルに直接アクセスすることなく編集できるため、エラーの可能性を減らすことができます。

また、inspectツールを開いているタブを開いておく必要があります。これは、コメント投稿者のGravatar用のCSSコードをコピー＆ペーストしてWPCodeに貼り付け、後で編集できるようにするためです。

まず、WordPressサイトにWPCodeをインストールします。詳しくは、WordPressプラグインのインストール方法をご覧ください。

次に、Code Snippets “ + Add Snippetに 移動し、’Add Your Custom Code (New Snippet)’を選択します。Use snippet button’をクリックします。

完了したら、新しいCSSコードの名前を入力します。Gravatar Sizeの変更」のようなシンプルなものでも構いません。

コードタイプは、「CSS Snippet」を選択する。

ここで、Gravatarサイズ用のオリジナルテーマのCSSコードスニペットをコピー＆ペーストして、コードプレビューボックスに貼り付けます。

そうしたら、コード内のheightとwidthの値を変更することができます。この例では50pxに変更しています。高さと幅のサイズは同じにしてください。

完了したら、インサーターセクションまでスクロールダウンする。

自動挿入」が選択されていることを確認してください。場所については、カスタマイザーが既存のCSSコードを上書きできるように、「サイトワイドフッター」を選択してください。

その後、右上のトグルをクリックしてコードを「有効化」し、「スニペットを保存」をクリックするだけです。WordPressブログやサイトにアクセスすると、更新されたGravatar画像が表示されます。

簡単なCSSの方法を使う前に、comments.phpファイルでGravatarのサイズを変更してみることをお勧めします。

まず、CSSによってグラビアがぼやけて見えることがあります。特に、アバターを元の画像よりもかなり大きくした場合です。

次に、comments.phpで画像サイズを変更すると、サイトの読み込みが速くなることがよくあります。これは、ブラウザーがフルサイズの画像をダウンロードし、CSSを使って表示サイズを変更する必要があるためです。その結果、サイトのパフォーマンスが低下する可能性があります。

方法4：投稿者プロフィール用のグラバターサイズをコードで変更する

複数の投稿者がいるWordPressサイトを運営している場合、投稿者ボックスは読者が投稿者についてより詳しく知るのに役立ちます。

あなたのサイトにこの機能を追加したい場合は、WordPress投稿に投稿者情報ボックスを追加する方法のガイドをご覧ください。

多くの投稿者プロフィールには、経歴とともに投稿者のGravatarが表示されます。投稿者プロフィールボックスの初期設定Gravatarサイズを変更するには、プロフィール追加テーマファイルを見つける必要があります。

FileZillaなどのFTPクライアントまたはWordPressホスティングのファイルマネージャーを使用してサイトに接続するだけです。接続したら、/wp-content/themes/に移動し、現在のWordPressテーマのフォルダーを開きます。

その後、template-partsフォルダーを開く必要があります。

次に、get_avatarコードを含むファイルを見つける必要があります。多くの場合、このコードはauthor-bio.php、single.phpファイル、functions.phpファイルなどと呼ばれるテンプレート・パーツ・ファイルの中にあります。

以下は、このコードがどのように見えるかの例である：

<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>

上のスニペットでは、85という数字を使いたいサイズに変えるだけでいい。

他のテーマでは、コードは次のようになる：

get_avatar( get_the_author_meta( 'user_email' ), 85);

グラビアを大きくしたり小さくしたりするには、数字を使いたい値に置き換えるだけです。

サイズを変更したら、変更を保存することを忘れないでください。その後、あなたのサイトにアクセスして、新しい投稿者プロフィールボックスの動作を確認することができます。

グラバターが変更されていない場合は、方法3で説明したのと同じ手順に従って、style.cssファイル内のアバタークラスを検索する必要があります。このクラスを見つけたら、新しいWPCodeスニペットを作成し、新しいグラバターの高さと幅の値を入力することができます。

さらに詳しくコメント欄を改善する方法

WordPressのコメントを次のレベルに引き上げたいですか？コメント欄をカスタマイズするためのガイドをご覧ください：

• WordPressでコメントの長さを制限する方法（簡単チュートリアル）
• WordPressでコメントする「返信先」のテキストを変更する方法
• WordPressでユーザーにコメントを購読させる方法
• WordPressでコメントをページ送りする方法（ステップバイステップ）
• WordPressでユーザーがコメントに「いいね！」や「嫌い」をできるようにする方法
• WordPressコメントフォームからサイトURLフィールドを削除する方法

このチュートリアルで、WordPressでGravatarの画像サイズを変更する方法を学んでいただけたら幸いです。また、WordPressのコメントフォームをスタイリッシュにする方法を学んだり、WordPressのベストコメントプラグインのリストをチェックしたりすることもできます。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.