ElementorをAdobe Fontsと連携する!

Share on facebook
Share on twitter
Share on pinterest
Share on email
このエントリーをはてなブックマークに追加

ElementorをAdobe Fontsと連携する!

連携すると何が便利なのか?

 Elementorではサイト内の要素に対して書式を設定することが可能です。書式設定の内容にはフォントの選択があり、Adobe Fontsと連携することによって選択できるフォントに連携済みのフォントが表示されるようになります。つまり一回連携してしまえばサイトの好きな場所へAdobe Fontsのウェブフォントをプルダウンで適用することができるようになるのです。

 今回の設定はAdobe Fontsの契約とElementor Proの契約が必要になります。

Adobe Fontsでの準備

 AdobeFontsで選んだフォントをウェブに使うには、まずAdobe Fontsで使いたいフォントを選択してWebプロジェクトというセットを作成する必要があります。

  例えばVDLロゴ丸Jrを使いたいとします。

 </>Webプロジェクトに追加ボタンをクリックします。もちろんAdobe FontsがAdobeとの契約に含まれていることが前提です。

 プルダウンで既存プロジェクトへフォントを追加しても良いですし、新規のプロジェクトを作成しても構いません。ここではcrftというプロジェクトへ追加しました。

 フォントが追加された旨のメッセージとコピーするためのスクリプトが表示されますが、ここではそのまま閉じてしまいましょう。

 AのMy Adobe FontsをクリックしてBのWeb プロジェクトをクリックします。左上に青い文字でcrftと表示されているのがプロジェクト名です。Cの部分は後でElementorと連携するために必要になるプロジェクトIDです。Dの部分もElementorの設定画面で入力する必要があります。

 このウインドウは開いたままにしてElementorの設定画面へ移動します。

Elementorでの準備

 ElementorにはAdobe Fontsとの連携オプションが実装されています。

連携の設定

 Wordpressの管理画面でElementor>設定>連携へと進み、ページの下方までスクロールしてAdobe Fontsというセクションを見つけます。

 このセクションのProject IDにAdobe Fontsで発行された前ステップのCにあたるプロジェクトIDを入力してSync Projectをクリック、変更を保存をクリックします。

headの設定

 Elementor>Custom Codeへと進み、新規を作成します。

 Eのタイトルは適当な名前で構いません、自分はAdobe Fontsと名前を入れました。Fにはカスタムコードを入力したい場所、今回は<head>を選択します。GにはAdobe Fontsの準備で取得したDのコードを貼り付けます。

これはテストのテキストです。

 設定内容が正しければこのようにウェブフォントをElementorの書式設定からプルダウンで選択することができるようになります。

まとめ

 Adobe CCとElementor Proの契約は必要になりますが、もうこの手軽さはデザイナーにとってはうれしい限りです。Elementor Pro、いよいよページビルダーのスタンダードだと思います。そして”ウェブはなぁ~”とか言っているデザイナーのそこのアナタ、今こそいっちゃうべきです。Elementorこそあなたのソリューション!

勝手マニュアル更新中

進捗状況 28.4%

Minoru Nitta(父)

Tetsuro Nitta(長男)