グローバルプリセットを使用したDiviサイトのロゴ画像の最適化
公開: 2020-09-25Diviでサイトのロゴを最適化することは、Webサイトのデザインの重要な部分です。 しかし、それは神秘的または困難な努力である必要はありません。 実際、Diviは、Diviテーマビルダーと利用可能なすべての組み込みデザインオプションを使用して、非常にシンプルにしています。
このチュートリアルでは、Diviで適切なサイズ、位置、スタイルでロゴを最適化する方法を紹介します。 次に、これらのデザインを将来の開発に使用できるグローバルプリセットとして保存する方法を示します。
飛び込みましょう！
ロゴ画像プリセットレイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
グローバルヘッダーでこのロゴ画像レイアウトを使用するには、最初に次のようにDiviライブラリにインポートする必要があります。
- Divi> DiviLibraryに移動します。
- ページ上部のインポート/エクスポートボタンをクリックします。
- 移植性ポップアップで[インポート]タブを選択します
- [プリセットのインポート]を選択します
- インポートボタンをクリックします
次に、テーマビルダーに移動し、グローバルヘッダーを編集します。 ロゴを配置する画像モジュールを追加し、プリセットを使用してロゴのスタイルを設定し、それに応じて配置します。
ロゴサイズ
Diviでロゴ画像を最適化する前に、画像モジュールにアップロードする前にロゴ画像のサイズを最適化することを検討することが重要です。 1920px x 1080pxのロゴ画像を、100px x 50pxで表示する予定の場合は、サイトにアップロードしないでください。 確かに、事後にロゴ画像のサイズを変更する方法があります（つまり、srcsetおよび画像最適化プラグイン）。 ただし、これはページの読み込み時間が遅くなる可能性があるため、ベストプラクティスではありません。 そして、それに直面しましょう、あなたのロゴは厄介なショートカットを受け入れるにはあまりにも重要です。
考慮すべき一般的なロゴ画像サイズのリストは次のとおりです。
水平レイアウトの場合：
- 250ピクセルx150ピクセル
- 350ピクセルx75ピクセル
- 400ピクセルx100ピクセル
垂直（正方形）レイアウトの場合：
- 160ピクセルx160ピクセル（大）
- 60ピクセルx60ピクセル（小）
思ったよりも大きなロゴサイズが必要になる場合があります。
デスクトップには小さいロゴが必要であり、タブレット（または電話）には大きいロゴが必要なのが一般的です。 Diviでは、タブレットや電話のディスプレイで列レイアウトが1列レイアウトにスタックするのが一般的です。 また、タブレットブラウザの幅は通常980pxであるため、デスクトップよりもロゴのコンテナがはるかに大きくなります。 したがって、より大きなロゴサイズを選択し、デバイスに応じて最大の高さまたは幅を調整する必要がある場合があります。 タブレットで必要なサイズよりも小さいロゴをアップロードした場合、画像の鮮明さを損なうことなくサイズを大きくすることはできません。 つまり、ロゴがすべてのブラウザ幅で最大の表示サイズと同じ大きさであることを確認してください。
グローバルプリセットを使用してDiviサイトのロゴサイズと位置を最適化する
グローバルヘッダーロゴの編集
開始するには、Divi> Theme Builderに移動して、Divi ThemeBuilderに移動します。 次に、クリックして、デフォルトのWebサイトテンプレート内に新しいグローバルヘッダーを作成します。
次に、「最初からビルド」オプションを選択します。
このチュートリアルでは、Divi Theme Builderを使用して、カスタムグローバルヘッダーに含まれるロゴを最適化します。 既存のヘッダーデザインを歓迎するか、ブログから事前に作成されたグローバルヘッダー（およびフッター）テンプレートの1つをインポートします。 物事を単純にするために、ロゴとメニューを備えた非常に単純なヘッダーレイアウトを作成します。
行と列のレイアウトを追加する
グローバルヘッダーレイアウトエディター内で、4分の1、4分の3の列行を追加します。
右側の列に、ヘッダー上のロゴの配置を視覚化するのに役立つプレースホルダーと同じように画像モジュールを追加します。
ロゴ画像を表示する画像モジュールを追加する
左側の列に画像モジュールを追加します。
ロゴ用の画像モジュールの使用
従来のヘッダーデザインの場合は、Diviのメニューモジュールを利用してロゴを表示できます。 ただし、Diviの動的コンテンツ機能を使用すると、任意の数のDiviモジュールを使用してサイトのロゴを表示できます。 基本的に、Diviで画像を表示できる場所ならどこにでもロゴを表示できます。 たとえば、サイトのロゴを宣伝文のモジュール画像に表示するか、必要に応じて背景画像として表示するかを選択できます。 このチュートリアルでは、画像モジュールを使用してサイトのロゴを表示することに集中します。 これにより、ロゴを完全に別個の要素にすることができます（メニューモジュールや宣伝文モジュールなどのモジュール内の他の要素とは接続されません）。 さらに、画像モジュールは画像のスタイルを設定するように構築されているため、ロゴ画像のスタイルを設定するための多くの追加のデザインオプションが提供されます。 動的画像としてサイトのロゴを追加する方法の詳細については、記事の最後にジャンプしてください。
いくつかの異なるロゴ画像サイズをテストするので、動的サイトロゴの代わりに、例として通常の画像を貼り付けます。
例1：左揃えのロゴグローバルプリセットの作成
この最初の例では、60px x60pxの左揃えのロゴの簡単なプリセットを作成します。
画像モジュールの設定を開き、60px x60pxのロゴ画像を画像モジュールにアップロードします。
次のように画像デザイン設定を更新します。
- 画像の配置：中央
- 最大幅：60px
- モジュールの配置（デスクトップ）：左
- モジュールの配置（タブレットと電話）：中央
これは左揃えのロゴのデザインですが、画像の配置がモジュールの配置と異なるため、画像の配置は中央に設定されます。 画像の配置はモジュール内の中央に配置されます。 また、モジュールの最大幅は60ピクセルであるため、モジュールの配置によってロゴ画像の配置が決まるため、画像の配置は実際には重要ではありません。
これは、ロゴに背景画像を追加したり、コンテナを丸くしたりする場合に役立ちます。 基本的に、これによりロゴ画像コンテナはロゴ画像自体と同じサイズになります。
列はモバイルでスタックされるため、モジュールの配置がタブレットの中央に変更されていることに注意してください。
現在のスタイルから新しいプリセットを作成する
ロゴデザインが完成したので、プリセットドロップダウンをクリックして[現在のスタイルから新しいプリセットを作成]を選択すると、画像モジュールのグローバルプリセットを作成できます。
ロゴ画像プリセットに一意の名前を付けます。 この場合、「Logo Left（60px x 60px）」という名前を付けて、使用する画像のサイズと、プリセットの使用を選択したときにロゴがどのように配置されるかを正確に知ることができます。
例2：右揃えのロゴグローバルプリセットの作成
この次の例では、右揃えのロゴグローバルプリセットを作成します。 これは、現在のデザインとプリセットを適切に設定することで簡単に実行できます。 列のレイアウトを4分の3から4分の1に変更し、メニューを左の列に移動し、ロゴを右の列に移動するだけです。
作成したロゴ画像プリセットを含む画像モジュールの設定を開きます。
次に、設計設定を更新して、モジュールの配置を右に変更します。
十分に単純です。 N0wプリセットドロップダウンをクリックして、現在のスタイルから新しいプリセットを作成します。
プリセットに「LogoRight（60px x60px）」という名前を付けます。
例3：中央に配置されたロゴグローバルプリセットの作成
この次の例では、中央に配置されたロゴのグローバルプリセットを作成します。 これは中央に配置されたロゴなので、この例ではより大きなロゴを使用できます。
まず、列のレイアウトを0ne-fourth 1/2 1/4構造に変更して、ロゴの中央に大きな列があるようにします。 次に、ロゴを中央の列に移動します
250px x150pxの新しいロゴ画像をアップロードします。
[デザイン]タブで、以下を更新します。
- 最大幅：250px
- モジュールの配置：中央
次に、現在のスタイルから新しいグローバルプリセットを追加します。
そして、「ロゴセンター（250px x 150px）」という名前を付けます。
例4：左揃えの大きなロゴのグローバルプリセットを作成する
この次の例では、左揃えの大きなロゴ（400px x 100px）のプリセットを作成します。
ロゴの幅は400ピクセルになるため、ロゴに必要なスペースを与える列構造が必要です。
左側にロゴ、右側にメニューがある2列の構造に戻りましょう。 ただし、構造を3分の1、3分の2に変更しましょう。
これにより、デフォルトの行の最大幅を1080pxのままにすると、幅が約320pxの列が得られます。
画像モジュールの設定を開き、400px x100pxのロゴ画像を追加します。
[デザイン]タブで、以下を更新します。
- 最大幅：400px
- モジュールの配置（デスクトップ）：左
- モジュールの配置（タブレット）：中央
前述したように、列の最大幅は320pxです。これは、ロゴ画像をデスクトップ上で全幅に広げることができないことを意味します。 ただし、列を積み重ねるとタブレットで使用できるようになります。 このため、画像の最大幅を400pxに設定します。
これで、ロゴはタブレット上でわずかに大きくなり、中央に配置されます。
次に、現在のスタイルから新しいグローバルプリセットを追加します。
「LogoLeft（400px x 100px）」という名前を付けて、プリセットを保存します。
例5：ホバーエフェクトグローバルプリセットを使用して左揃えのロゴを作成する
この最後の例では、左揃えのロゴにホバーエフェクトを追加し、新しいグローバルプリセットとして保存します。
通常、人々は自分のロゴをホームページにリンクします。 ホバー効果を追加すると、クリックしやすさがより明確になるため、UXを向上させることができます。
この例では、「Logo Left（60px x 60px）」プリセットを使用して、60px x60pxのロゴ画像を使用します。 画像設定を開き、リストからプリセットを選択します。
これで、新しいプリセットとして保存する前に、いくつかのホバーエフェクトスタイルでプリセットを微調整できます。
以下を更新します。
- 丸みを帯びた角：50％
- ボックスシャドウ：スクリーンショットを参照
- ボックスシャドウの水平位置：0px
- ボックスシャドウの垂直位置：0px（デスクトップ）5px（ホバー）
- 影の色：＃ac3cf7
次に、ホバー時に次の変換回転を追加します。
- 変換回転Z軸（ホバー）：90度
次に、現在のスタイルから新しいプリセットを作成し、「Logo Left w / Hover（60px x60px）」という名前を付けます。
結果は次のとおりです。
画像モジュールへの動的サイトロゴの追加
サイトのロゴを画像モジュールに動的に追加するには、まず、Diviのテーマオプションでサイトのロゴを確認してアップロードする必要があります。
選択するロゴのサイズに注意してください。
次に、グローバルプリセットがある画像モジュールに移動し、設定を開きます。 現在の画像を削除してから、動的コンテンツアイコンをクリックします。 ドロップダウンから、[サイトのロゴ]を選択します。
これで、画像モジュールがサイトのロゴを動的にプルします。
ロゴに動的なホームページリンクを追加することも忘れないでください。
最終的な考え
このチュートリアルが、Diviヘッダーにロゴを追加するプロセスを合理化するのに役立つことを願っています。 それは、Diviテーマにアップロードする前に、ロゴ画像のサイズを最適化することから始まります。 次に、Diviの組み込みのデザイン設定を使用して、さまざまな列レイアウトやさまざまなデバイスの画像のサイズと位置を調整できます。
もちろん、各Webサイトには独自のスタイルが必要であり、その一部はこれらの例で設定されたガイドラインから外れます。 しかし、いくつかの調整を加えるだけで、独自のレイアウトの新しいプリセットを簡単に作成できると確信しています。
コメントでお返事をお待ちしております。
乾杯！