DiviのテーマビルダーとAnime.jsを使用して、グローバルヘッダー内にSVGロゴを追加およびアニメーション化する方法

公開: 2020-07-29

あなたのロゴはあなたのブランドのアイデンティティの中心的な部分です。そのため、ほとんどの場合、遭遇するWebサイトのヘッダーに含まれています。ヘッダーにロゴを追加するときは、代わりにPNGファイルをアップロードするか、SVG統合を選択することができます。よりカスタマイズされたアプローチのために、SVGロゴをアニメーション化することもできます。それがまさにこの投稿でお見せするものです。最初にDiviで構築されたグローバルヘッダーに追加する方法を示し、次にAnimeJSライブラリを使用してアニメーション化します。この例ではシンプルなデザインを使用しますが、アプローチができたら、任意のロゴをアニメーション化できます。

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

svgロゴ

モバイル

svgロゴ

グローバルヘッダーテンプレートを無料でダウンロード

グローバルヘッダーテンプレートを入手するには、まず下のボタンを使用してテンプレートをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1. Adobe IllustratorでSVGロゴを作成し、SVGコードを取得します

Illustratorを開いて新しいドキュメントを作成する

このチュートリアルの最初の部分では、AdobeIllustrator内に簡単なロゴを作成します。すでに独自のSVGロゴをお持ちの場合は、それを自由に使用してください。または、上記のダウンロードフォルダにあるロゴサンプルIllustratorファイルにアクセスすることもできます。ロゴサンプルを最初から作成する場合は、1：1の比率で新しいドキュメントを追加することから始めます。

幅：500px
高さ：500px

svgロゴ

既存のレイヤーに円を追加

追加する最初の要素は円です。 Spice Shop LayoutPackのカラーパレットと一致する塗りつぶしの色を使用します。また、円がキャンバス内の中央に配置されていることを確認します。

塗りつぶし：＃0C1019
ストローク：なし

svgロゴ

新しいレイヤーを作成し、ロゴテキストを追加します

次に、新しいレイヤーを追加します。

svgロゴ

このレイヤーを使用して、ロゴテキストを追加します。

フォント：Montserrat
フォントの太さ：黒
フォントサイズ：110pt

svgロゴ

ロゴのアウトラインを作成する

ロゴテキストの変更が完了したら、要素を右クリックし、[アウトラインの作成]をクリックして、テキストをアウトラインに変換できます。

svgロゴ

テキストのアウトラインを揃える

テキストのアウトラインも中央揃えになっていることを確認します。

svgロゴ

SVGとしてエクスポート

すべてのパスが配置されたので、SVGをエクスポートできます。これを行うには、上部の[ファイル]オプションにカーソルを合わせ、[エクスポート]に移動して、[名前を付けてエクスポート...]をクリックします。

svgロゴ

SVGコードを取得する

「エクスポート」ボタンをクリックすると、いくつかの追加のSVGオプションを含むウィンドウが表示されます。そこで、SVGコードをコピーできるようになります。このチュートリアルの後半で使用できるように、SVGを近くに置いておくようにしてください。

svgロゴ

2.Diviテーマビルダー内でグローバル/カスタムヘッダーの作成を開始します

Divi Theme Builderに移動し、グローバルヘッダーの作成を開始します

このチュートリアルの最初の部分を終えて、ロゴのSVGコードを取得したので、次はDiviに切り替えます。 WordPressバックエンド内のテーマビルダーに移動して、新しいグローバルヘッダーを作成します。

svgロゴ

セクション設定

背景色

グローバルヘッダーテンプレートを入力すると、セクションが表示されます。そのセクションを開き、背景色を適用します。

背景色：#eaeaea

svgロゴ

間隔

[デザイン]タブに移動し、次にデフォルトの上下のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

svgロゴ

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

svgロゴ

サイジング

モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、次のようにサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
幅：95％
最大幅：100％

svgロゴ

間隔

デフォルトの上下のパディングもすべて削除します。

トップパディング：0px
ボトムパディング：0px

svgロゴ

主な要素

小さい画面サイズで列が隣り合っていることを確認するために、行のメイン要素にも1行のCSSコードを追加します。

display: flex;

svgロゴ

列1の主要要素

次に、各列に1行のCSSコードを個別に追加することで、列構造（1/4および3/4）が小さい画面サイズで維持されるようにします。最初のものから始めます。

width: 25% !important;

svgロゴ

列2の主要要素

2番目の列についても同じようにしますが、別の幅のパーセンテージを使用します。

width: 75% !important;

svgロゴ

3. SVGロゴを追加します（コードモジュール内）

列1にコードモジュールを追加する

最初のコードモジュールから始めて、モジュールを追加します。このコードモジュールを列1に配置し、それを使用してSVGコードを追加します。

svgロゴ

コピーされたSVGコードを追加する

それを構築する

コードモジュール内にSVGコード（このチュートリアルのパート1を参照）を貼り付けると、以下の印刷画面に示すようにすべてを構造化するのに役立ちます。そうすれば、SVG内のさまざまな要素の概要を明確に把握できます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

svgロゴ

CSSコードの要素にストロークとストローク幅を追加する

Illustratorでは、追加した要素に塗りつぶしの色のみを使用しました。その理由は、余分なパスの生成を避けたいためです。 SVGコードは、思ったほど予測できるとは限らないため、CSSコードを手動で変更すると、パスを単純に保つのに役立つことがよくあります。この投稿のプレビューと同じ結果を作成するには、両方の要素にストロークを追加する必要があります。そのために、CSSコードの行をコード内の2つのクラスに追加します。 AIで生成された「cls-1」CSSクラスは円を表し、「cls-2」CSSクラスはテキストのアウトラインを表します。

stroke: #0c1019;
stroke-width: 3px;

svgロゴ

円の半径を小さくする

円にストロークを追加したため、円はSVGキャンバス（側面で目立ちます）よりも遠くに到達しているようです。これを修正するには、円タグ内の半径を小さくします。オリジナルの「232.5」を使用する代わりに、「225」に下げています。この数値をゆっくりと試してみることで、好みの値を自分で判断できます。

r =” 225”

svgロゴ

コードモジュール設定の変更

サイジング

SVGコードが配置されたので、コードモジュール自体にいくつかの追加の変更を加えることができます。 [デザイン]タブに移動し、さまざまな画面サイズでモジュールの幅を変更します。

幅：
- デスクトップ：25％
- タブレット：50％
- 電話番号：80％

svgロゴ

間隔

間隔の設定を変更することで、下部のオーバーラップも生成しています。

トップパディング：5％
ボトムパディング：
- デスクトップ：-12％
- タブレット：-20％
- 電話番号：-35％

svgロゴ

4.Anime.jsを使用してSVGロゴをアニメーション化します

前のコードモジュールの下に別のコードモジュールを追加する

SVGロゴがDiviヘッダーに追加されました！このチュートリアルの次のパートでは、AnimeJSライブラリを使用してSVGロゴをアニメーション化します。プレビューで見ることができる描画アニメーションは、最も人気のあるものの1つですが、このライブラリを使用してあらゆる種類のアニメーションを作成できます。前のコードモジュールのすぐ下に新しいコードモジュールを追加します。

svgロゴ

アニメライブラリを追加

最初に行う必要があるのは、スクリプトタグ内にライブラリを追加することです。

src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

svgロゴ

アニメタイムラインアニメーションコードを追加する

そのすぐ下に、以下の印刷画面に示すように、スクリプトタグの間にアニメJSコードを追加する必要があります。

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

各「追加」機能は、アニメーションのタイムラインでアニメーションを表します。これらの「追加」関数は、必要に応じて変更したり、新しい関数を追加したり、現在の関数を削除したりできます。最後の追加関数が「;」で正しく閉じられていることを確認してください。最後に（上記のコードでわかるように）。これらの「追加」関数内にさまざまなCSSプロパティを追加できます。プロパティとその使用方法については、anime.jsのドキュメントの例をご覧ください。

svgロゴ

5.メニューモジュールを列2に追加します

グローバルヘッダーを完成させるために必要な唯一の要素は、列2のメニューモジュールです。

svgロゴ

メニューを選択

お好みのメニューを選択してください。

svgロゴ

背景色を削除する

次に、デフォルトの背景色を削除します。

svgロゴ

メニューテキスト設定

[デザイン]タブに移動し、メニューテキストの設定を次のように変更します。

メニューテキストの色：＃000000
メニューテキストサイズ：
- デスクトップ：0.7vw
- タブレット：2.2vw
- 電話：3vw
テキストの配置：右

svgロゴ

ドロップダウンメニューのテキスト設定

ドロップダウンメニューの線の色も変更します。

ドロップダウンメニューの線の色：#ffffff

svgロゴ

アイコン設定

ハンバーガーメニューのアイコンカラーと一緒に。

ハンバーガーメニューアイコンの色：＃0c1019

svgロゴ

サイジング

次に、サイズ設定に移動し、幅が「100％」であることを確認します。

幅：100％

svgロゴ

ポジション

[詳細設定]タブでモジュールを再配置して、モジュール設定を完了します。

位置：絶対
場所：中道右派

svgロゴ

6.すべてのテーマビルダーの変更を保存します

グローバルヘッダーデザイン全体が完了したら、テーマビルダーの変更をすべて保存して、Webサイトで結果を表示できます。

svgロゴ

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

svgロゴ

モバイル

svgロゴ

最終的な考え

この投稿では、DiviグローバルヘッダーをWeb開発の過程でさらに一歩進める方法を紹介しました。具体的には、DiviとAnimeJavaScriptライブラリを使用してSVGロゴを追加およびアニメーション化する方法を示しました。グローバルヘッダーテンプレートのJSONファイルも無料でダウンロードできました！ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。

DiviのテーマビルダーとAnime.jsを使用して、グローバルヘッダー内にSVGロゴを追加およびアニメーション化する方法

プレビュー

デスクトップ

モバイル

グローバルヘッダーテンプレートを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1. Adob​​e IllustratorでSVGロゴを作成し、SVGコードを取得します

Illustratorを開いて新しいドキュメントを作成する

既存のレイヤーに円を追加

新しいレイヤーを作成し、ロゴテキストを追加します

ロゴのアウトラインを作成する

テキストのアウトラインを揃える

SVGとしてエクスポート

SVGコードを取得する

2.Diviテーマビルダー内でグローバル/カスタムヘッダーの作成を開始します

Divi Theme Builderに移動し、グローバルヘッダーの作成を開始します

セクション設定

背景色

間隔

新しい行を追加

カラム構造

サイジング

間隔

主な要素

列1の主要要素

列2の主要要素

3. SVGロゴを追加します（コードモジュール内）

列1にコードモジュールを追加する

コピーされたSVGコードを追加する

それを構築する

CSSコードの要素にストロークとストローク幅を追加する

円の半径を小さくする

コードモジュール設定の変更

サイジング

間隔

4.Anime.jsを使用してSVGロゴをアニメーション化します

前のコードモジュールの下に別のコードモジュールを追加する

アニメライブラリを追加

アニメタイムラインアニメーションコードを追加する

5.メニューモジュールを列2に追加します

メニューを選択

背景色を削除する

メニューテキスト設定

ドロップダウンメニューのテキスト設定

アイコン設定

サイジング

ポジション

6.すべてのテーマビルダーの変更を保存します

プレビュー

デスクトップ

モバイル

最終的な考え

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1. Adobe IllustratorでSVGロゴを作成し、SVGコードを取得します