WordPressのロゴサイズを変更する方法（どのテーマでも動作します）

WordPressのロゴサイズを変更する方法を学びたいですか？

ウェブサイトのロゴはブランドの重要な一部なので、見栄えを良くしたいと思うでしょう。しかし、ロゴを大きくしたり小さくしたりする方法が明確でない場合があります。

この記事では、あらゆるテーマでWordPressのロゴサイズを簡単に変更する方法を説明します。

WordPressでロゴのサイズを変更する理由

WordPressウェブサイト用のカスタムロゴをデザインするために誰かを雇うか、無料のロゴメーカーを使用して自分でデザインするかに関わらず、ロゴはあらゆるウェブサイトの重要な部分です。

ただし、デフォルトのWordPressの画像サイズは、ロゴに適さない場合があります。

小さすぎるロゴは目立たず、大きすぎるロゴは訪問者の注意をコンテンツからそらしてしまいます。

WordPressで基本的な画像編集を行うことはできますが、サイトのロゴはブランディングの重要な部分であるため、見栄えを良くしたいはずです。それを踏まえて、WordPressでロゴサイズを正しく変更する方法を見てみましょう。以下のクイックリンクを使用して、使用したい方法にジャンプしてください。

• 方法1：WordPressカスタム機能でロゴサイズを変更する（推奨）
• 方法2：フルサイトエディターを使用してWordPressのロゴサイズを変更する（ブロックベースのテーマのみ）
• 方法3：CSSを編集してWordPressのロゴサイズを変更する（ほとんどのテーマで動作します）
• 方法4：CSSを編集せずにWordPressのロゴサイズを変更する（コードなし）

方法1：WordPressカスタム機能でロゴサイズを変更する（推奨）

WordPressでロゴサイズを変更する最も簡単で簡単な方法は、テーマカスタマイザーを使用することです。ただし、この方法は、テーマがWordPressの追加画像サイズをサポートしている場合にのみ機能します。

幸いなことに、人気のテーマの多くには、Divi、Astra、Ultra など、ロゴのリサイズ機能を内蔵しています。

注意：ロゴはアップロードした画像と同じ大きさにしかならないため、ロゴを大きくしたい場合は、より大きな画像をアップロードしてください。

このガイドでは、Divi、Astra、Ultra テーマでロゴを変更する方法を説明しますが、ほとんどの人気のある WordPress テーマで方法は似ています。

特定のテーマを扱っていなくても、WordPressカスタムizerを使用してロゴサイズを変更できるかどうかを確認する価値はあります。

単純に外観 » カスタマイズに移動し、ヘッダー、サイトID、ロゴ、またはそれに類するラベルが付いた設定を探してください。

これらの設定が表示されない場合は、テーマのドキュメントを確認するか、開発者に問い合わせてヘルプを得ることができます。このトピックの詳細については、WordPressサポートの適切な依頼方法と取得方法に関するガイドを参照してください。

テーマに組み込みのロゴエディターがない場合は、方法2または3を使用する必要があります。

Divi WordPressテーマでWordPressのロゴサイズを変更する

まず、Divi » テーマカスタムizerに移動し、「ヘッダーとナビゲーション」をクリックします。

その後、「プライマリメニューバー」を選択します。

ここで、ロゴのサイズを変更できます。たとえば、フルサイズの画像として表示することもできます。

まず、「メニューの高さ」設定を調整する必要があります。これにより、ナビゲーションメニュー全体の高さが制御され、ロゴの大きさが決まります。

その後、「ロゴの最大高さ」設定を変更できます。これはメニュー全体の高さに対する割合です。

「ロゴの最大高さ」スライダーを上下にドラッグして、WordPressブログに最適なサイズを見つけてください。

ロゴの外観に満足したら、WordPressカスタムizerを閉じる前に必ず「公開」をクリックしてください。

Astra WordPress テーマで WordPress ロゴのサイズを変更する

Astraテーマを使用している場合は、外観 » カスタマイズに移動し、「ヘッダービルダー」メニューオプションをクリックします。

その後、「サイトのタイトルとロゴ」メニューオプションをクリックします。

ここで、ロゴのサイズを簡単に変更できます。

「ロゴの幅」スライダーを左右にドラッグするだけで、ロゴを大きくしたり小さくしたりできます。

WordPressカスタムizerはライブプレビューでこれらの変更を表示するため、さまざまなサイズを試して、WordPressウェブサイトに最適なものを確認できます。

ロゴの外観に満足したら、「公開」をクリックしてウェブサイトに反映させてください。

Ultra WordPress テーマでWordPressロゴのサイズを変更する方法

Ultra テーマでロゴのサイズをカスタマイズするには、外観 » カスタマイズに移動し、左側のメニューで「サイトロゴとキャッチフレーズ」をクリックします。

その後、「サイトロゴ」ドロップダウンをクリックします。

表示されたら、「ロゴ画像」ラジオボタンを選択します。

新しいサイズをボックスに入力することで、ロゴを拡大または縮小できます。

左側のボックスで幅を、右側のボックスで高さを変更できます。

元のサイズに基づいてロゴをスケーリングしたい場合は、一方のボックスの寸法のみを変更してください。

新しい寸法を入力すると、ロゴのサイズがリアルタイムで変更されます。

ロゴの外観に満足したら、「公開」をクリックして変更をライブに反映させます。

方法2：フルサイトエディターを使用してWordPressのロゴサイズを変更する（ブロックベースのテーマのみ）

Hestia Proのようなブロックベースのテーマを使用している場合は、フルサイトエディタを使用して、品質を損なうことなく画像をリサイズできます。

フルサイトエディターを使用してロゴのサイズを変更します。

開始するには、WordPress ダッシュボードで テーマ » エディター に移動するだけです。

デフォルトでは、フルサイトエディターはテーマのホームページテンプレートを表示します。

サイトのロゴをリサイズするには、通常「パターン」を選択します。

エディターには、テーマを構成するすべてのパターンとテンプレートパーツのリストが表示されます。

ヘッダーオプションをクリックするだけで、ブログのヘッダーのレイアウトを制御できます。

WordPress は、現在のテーマを構成するすべてのヘッダーテンプレートパーツを表示します。編集したいヘッダーを見つけてクリックするだけです。

ヘッダーテンプレートのプレビューが表示されます。テンプレートを編集するには、小さな鉛筆アイコンをクリックします。

これが完了したら、サイトのロゴを選択するためにクリックします。

右側のメニューで、「ブロック」タブを選択します。

次に、「設定」タブを選択します。

「画像幅」スライダーをドラッグすることで、ロゴを拡大または縮小できるようになりました。

ロゴの外観に満足したら、「保存」ボタンをクリックします。

さて、あなたのウェブサイトにアクセスすると、新しいロゴが機能しているのがわかります。

方法3：CSSを編集してWordPressのロゴサイズを変更する（ほとんどのテーマで動作します）

WordPressテーマにロゴサイズの変更機能が組み込まれていない場合は、カスタムCSSを追加するという方法もあります。これにより、別の画像最適化プラグインを使用せずにロゴのサイズを変更できます。

まず、ウェブサイトのロゴのCSSクラスを知る必要があります。この情報を取得するには、ロゴが表示されている任意のページ（サイトのホームページなど）にアクセスしてください。

ここで、そのページ上のどこかを右クリックし、「検証」オプションを選択します。

これにより、ホームページのすべてのコードが表示される「要素を検証」メニューが開きます。

その後、マウスカーソルのようなアイコンである「要素を選択」アイコンをクリックします。

次に、ウェブサイトのロゴにマウスカーソルを合わせるだけで、CSSクラスが表示されます。

下の画像と同様の外観になります。

このCSSクラスを使用してWordPressロゴのサイズをカスタマイズします。テキストエディタ（メモ帳など）にクラスをメモしておいてください。

WordPressダッシュボードで、**外観 » カスタマイズ**に移動します。次に、「追加CSS」オプションをクリックします。

小さなコードエディタにカスタムCSSコードを追加できるようになりました。

前に見つけたCSSクラスを追加し、使用したい新しいロゴの寸法を指定するだけです。

コードがどのように表示されるかの例を次に示します。

 img.custom-logo {
     max-height: 100px !important;
}

img.custom-logo CSS クラスと max-height の値を変更してください。

変更を加えたら、「公開」ボタンをクリックするだけで、変更が反映されます。

方法4：CSSを編集せずにWordPressのロゴサイズを変更する（コードなし）

テーマファイルを編集したり、カスタムCSSを追加したりすることに慣れていない場合は、代わりにWordPress CSSプラグインを使用できます。これらのプラグインを使用すると、ドラッグアンドドロップページビルダーを使用するのと同様の方法で、サイトの視覚的な変更を行うことができます。

CSS Heroの使用をお勧めします。これにより、CSSコードを一行も書かずに画像を最適化したり、ほぼすべてのCSSスタイルをカスタマイズしたりできます。

ディール: WPBeginner読者は、CSS Heroクーポンコードを通じて40%割引を受けることができます。

まず、プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、「製品のアクティベーションに進む」ボタンをクリックしてプラグインをアクティベートします。これは、インストール済みプラグインリストのすぐ上にあります。

これにより、ユーザー名とパスワードを入力する画面が表示されます。画面の指示に従ってアカウントを確認すると、完了後にWordPressダッシュボードに戻ります。

その後、WordPress管理バーの「CSS Heroでカスタマイズ」ボタンをクリックします。

これで、CSS Heroが上に表示された状態でウェブサイトが表示されます。

CSS HeroはWYSIWYG（What You See Is What You Get）エディターを使用しているため、ページ上の任意の要素をクリックするだけで、適用できるすべてのカスタマイズが表示されるツールバーが表示されます。

ページ上部のWordPressロゴをクリックするだけです。

その後、「詳細プロパティを表示」リンクを選択して、WordPressのロゴに加えられるすべての変更を表示します。

「寸法」ボックスには、「最大幅」と「最大高さ」のオプションがあります。

ロゴのサイズを変更するには、これらのフィールドに新しい数値を入力するだけです。元の画像の寸法を維持したい場合は、幅または高さを変更するだけです。

ライブプレビューでは、変更が自動的に表示されます。これにより、さまざまなサイズを試して、最適なものを見つけることができます。

ロゴの外観に満足したら、「保存して公開」をクリックして、リサイズされたロゴを公開します。

この記事がお使いのロゴサイズの変更に役立ったことを願っています。また、画像管理に最適なWordPressプラグインの専門家による選択肢や、WordPressに最適な画像形式に関するガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。