あなたのWordPressのロゴのサイズを変更する方法（任意のテーマで動作します)
最近、私たちの読者の一人が、WordPressでロゴサイズを変更することが可能かどうか尋ねましたか？
あなたのウェブサイトのロゴはあなたのブランドの重要な部分です。 使用しているWordPressテーマによっては、ロゴサイズを大きくしたり小さくしたりする方法が明確でない場合があります。
この記事では、WordPressのロゴサイズを段階的に簡単に変更する方法を紹介します。
WordPressでロゴのサイズを変更するのはなぜですか？
WordPressにロゴをアップロードすると、必ずしも適切なサイズではないかもしれません。
小さすぎるロゴは目立ちません。 一方、大きすぎるロゴは、あなたのウェブサイトのデザインに悪影響を与える可能性があります。
カスタムロゴデザインに投資した場合は、ロゴがウェブサイトのヘッダーに適切なサイズとして表示されることを確認します。
まだロゴデザインのプロセスに入っている人は、最高の無料のロゴメーカーのピックを参照してください。
そうは言っても、WordPressでロゴサイズを変更するために使用できるいくつかの異なる方法を紹介します。
あなたが選択する方法は、使用しているWordPressのテーマ、およびCSSコードを編集すると、あなたの快適さのレベルに依存します。
- WordPressカスタマイザでWordPressのロゴサイズを変更する
- CSSコードを編集してWordPressのロゴサイズを変更する
- CSSコードを編集せずにWordPressのロゴサイズを変更する
方法1。 WordPressカスタマイザー
でWordPressのロゴサイズを変更するWordPressでロゴサイズを変更する最も簡単で簡単な方法は、テーマカスタマイザーを使用することです。 ただし、この方法は、WordPressテーマがサポートしている場合にのみ機能します。
Divi、Astra、Ultraなどの人気のあるテーマの多くは、ロゴサイズチェンジャーツールを内蔵しています。
WordPressでロゴをアップロードすると、これらのテーマは、幅と高さを調整するために使用できるシンプルなスライダーでロゴを簡単に調整できます。
注:ロゴサイズはアップロードした画像と同じ大きさになりますので、より大きなロゴ画像をアップロードすることを目的としている場合は、より大きなロゴ画像をアップロードしたいと考えています。
チュートリアルのために、Divi、Astra、Ultraテーマでロゴを変更する方法を示しますが、この方法は最も人気のあるWordPressテーマでは似ています。 テーマにこのオプションがない場合は、このチュートリアルの方法2または3を使用する必要があります。
Divi WordPressテーマでWordPressのロゴサイズを変更する
まず、Divi”テーマカスタマイザーに移動し、”ヘッダー&ナビゲーション”メニューオプションをクリックします。
を選択した後、’Primary Menu Bar’ドロップダウンオプションをクリックします。
ここでロゴのサイズを変更できます。
まず、”メニューの高さ”設定を調整する必要があります。 これは、ナビゲーションメニュー全体の高さを制御し、あなたのロゴを作ることができますどのように大きさを定義します。
その後、メニューの高さの合計に対する割合である”ロゴの最大高さ”設定を変更できます。
WordPressのブログに最適なロゴサイズが見つかるまで、”ロゴの最大高さ”スライダーを上下に調整できます。
画面を終了する前に、必ず”公開”ボタンをクリックして変更を保存してください。
Astra WordPressテーマでWordPressのロゴサイズを変更する
最初に行う必要があるのは、外観”カスタマイズ”に移動し、”ヘッダー”メニューオプションをクリックすることです。
その後、”サイトId”メニューオプションをクリックします。
ここでは、簡単にあなたのロゴのサイズを調整することができます。
のサイトidをクリックするだけで、「ロゴ幅」スライダーを左右に動かすことができます。
スライダーを動かすと、ロゴサイズの変化をリアルタイムで自動的に見ることができます。
ロゴのサイズに満足したら、ページを終了する前に必ず”公開”をクリックしてください。
UltraテーマのWordPressロゴサイズを変更する
Ultraテーマのロゴサイズをカスタマイズするには、Appearance”Customizeに移動し、’Site Logo&Tagline’ナビゲーション項目をクリックします。
をクリックした後、”サイトのロゴ”ドロップダウンをクリックします。
次に、表示される”ロゴ画像”ラジオボタンを選択します。
をクリックすると、ロゴ画像の右側にあるボックスに新しいサイズを入力することで、ロゴのサイズを変更できます。 元のサイズに基づいて画像を拡大縮小する場合は、新しいロゴの寸法のみを1つのボックスに入力します。
左のボックスで幅を変更し、右のボックスで高さを変更することができます。
新しいサイズを入力すると、ロゴのサイズがリアルタイムで変更されます。
ロゴのサイズのカスタマイズが完了したら、必ず”公開”ボタンをクリックしてください。
テーマが上で強調表示されていない場合は、WordPressカスタマイザーを使用してロゴのサイズをカスタマイズできる可能性があります。
単に外観に行く”あなたが使用しているものは何でもテーマにカスタマイズし、あなたのロゴやヘッダーのために利用可能なカスタマイズオプション
方法2. CSSを編集してWordPressのロゴサイズを変更する
WordPressテーマがWordPressテーマカスタマイザーを使用してロゴサイズを変更することをサポートしていない場合は、カスタムCSSを追加してサイズを変更することができます。
最初に行う必要があるのは、あなたのウェブサイトのホームページに移動することです。
次に、ページ上の任意の場所を右クリックし、’Inspect’オプションを選択します。 これにより、ページのすべてのコードを表示する検査メニューが表示されます。
を右クリックしてから、マウスポインタのような”要素を選択”アイコンをクリックする必要があります。
これにより、ウェブサイトのロゴ要素を選択してコードを表示できます。
次に、CSSクラスがポップアップするまでウェブサイトのロゴの上にカーソルを置きます。 それは下の画像のようになります。
このCSSクラスを使用して、WordPressロゴのサイズをカスタマイズします。 だから、メモ帳のようなテキストエディタでこれを書き留めます。
今、あなたは戻ってあなたのWordPressの管理ダッシュボードに向かうと外観に移動することができます”カスタマイズ。 「Additional CSS」メニューオプションをクリックする必要があります。
これは、カスタムCSSコードを追加することができますドロップダウンが表示されます。
を選択して、以前に見つけたCSSクラスを追加して、新しい画像の寸法を指定します。 以下のCSSコードを例として使用できます。上記のimg.custom-logoCSSクラスをテーマが使用するCSSクラスに変更する必要があります。
max-heightを任意のサイズに変更することもできます。
ここでは、WordPressのカスタマイザの内部にどのように見えるかです。
変更を行ったら、「公開」ボタンをクリックして変更をライブにします。
方法3. CSSを編集せずにWordPressのロゴサイズを変更する
テーマファイルの編集やカスタムCSSの追加に慣れていない場合は、この方法が適しています。
WordPressのスタイリングプラグインを使用すると、ドラッグアンドドロップページビルダーを使用するのと同様に、サイトに視覚的な変更を加えることがで
CSS Heroを使用することをお勧めします。 それはあなたがCSSコードの単一行を書かずにあなたのWordPressサイト上のほぼすべてのCSSスタイルを編集することができますスタイラープラグインです。
取引：WPBEGINNER reader’sは、CSS Heroクーポンコードを通じて34％の割引を受けることができます。
最初に行う必要があるのは、プラグインをインストールしてアクティブにすることです。 詳細については、WordPressのプラグインをインストールする方法についてのステップバイステップガイドを参照してください。
アクティベーション時に、プラグインをアクティブ化するには、”製品アクティベーションに進む”ボタンをクリックする必要があります。 これは、インストールされているプラグインのリストのすぐ上に位置しています。
ユーザー名とパスワードを入力できる画面が表示されます。 画面の指示に従うだけで、アカウントが確認されるとサイトにリダイレクトされます。
その後、WordPress管理ツールバーの上部にある”CSS Heroでカスタマイズ”ボタンをクリックします。
これはCSS Heroがその上で実行されているあなたのウェブサイトに行くことができます。 CSS HeroはWYSIWYG（あなたが見るものはあなたが得るものです）エディタを使用します。
ページの任意の要素をクリックすると、カスタマイズを行うために左側にツールバーが表示されます。
次に、ページ上部にあるWordPressロゴをクリックします。
その後、”高度な小道具を表示”リンクをクリックします。
をクリックすると、より多くのCSSカスタマイズオプションが提供されます。
次に、’Measures’ボックスを探します。 ここでは、’最大幅’と’最大高さ’と呼ばれるオプションを見つけることができます。
これらを希望する画像サイズに変更します。 画像の寸法を同じにしたい場合は、高さまたは幅のみを変更してください。
行った変更は自動的にページに表示されます。
ロゴのサイズの変更が完了したら、”保存して公開”をクリックして変更をライブにする必要があります。
この記事がWordPressのロゴサイズを変更するのに役立つことを願っています。 また、中小企業のための最高のライブチャットソフトウェアのための私たちの専門家のピックを見て、ビジネスのウェブサイトのためのWordPressのプ
この記事が好きなら、WordPressのビデオチュートリアルのためのYouTubeチャンネルを購読してください。 また、TwitterやFacebook上で私たちを見つけることができます。