LPにプラグインでスライダー、ギャラリー、SNSシェアボタンを入れてカスタマイズ

前回は、ブロックエディターの機能を使いLP（ランディングページ）を作成しました。

今回はその応用で、LPに以前紹介したSmart Slider3とModulaを使用して、スライダーとギャラリーをLPに追加します。動きのあるLPで表現の幅も広がります。さらに、SNSボタンを設置することで、1クリックでアプリの投稿にURLリンクを載せることができ、拡散に繋がります。

また、ブロックエディターの新しいレイアウトも作成したので、そちらも紹介いたします。今回も前回と同じくCHRISTMAS JAZZ CONCERTを題材に作成しました。

前回は基本的な機能を使用したシンプルなデザインでしたが、今回は、色をネイビーに変更し、ロゴなどのデザインも作り込んだ完成形になります。では、変更した箇所を説明していきます。

Title

以前も紹介したSmart Slider3ですが、具体的な使用例を紹介できませんでした。

今回は、PC、スマホで高さを変更するように設定しました。スライダーのデザインはBLOGで紹介した「サムネイル付フェードスライダー」を元に作成しました。

まず「Size」の縦幅を550pxに変更します。これは、PCで表示する最大の縦幅になります。次に「レイアウト」で、「全幅」に指定し、「min-height」を300pxにします。これが、スマホでの縦のサイズになります。サイズは任意ですが、ヘッダーの高さは、サイトによってバラバラなので、PC、SPそれぞれの画面を見て高さの値を調整します。

デザインでは、サムネイル周りの背景色を、LPの背景色に合わせるため、「バー」で背景色を指定します。また、サムネイル上下の空きをCSSで設定します。

padding-top: 20px;
padding-bottom:80px;

他の項目に行く前に、右上の「保存」をクリックします。

その他、「自動再生」をONにして、5秒で画像を切り替えるため、「Duration」を5000にしました。また、「開発者」の「Scroll to Slider」をOFFにして、サムネイルをクリックしても、スクロールされない設定にしました。

LPに挿入する時は、タイトルの下に「ショートコード」で入れます。ショートコードでは、編集画面にビジュアルが表示されないので、表示が早く、他の部分の作業をするとき便利です。プラグインでショートコードが使える場合は、できるだけ使いましょう。ビジュアルは、下書き保存してプレビューから確認します。

Concert Overview

ここは写真のみの変更です。パノラマ画像を配置したので、PCは、ピアノとギターが映ります。見出しに入っていたアンダーバーはロゴに合わないので削除しました。

Guest Artist

レイアウトは前回に近いですが、キャプションの下に、前回別段落にあった「Support Artist」を「Modula」で入れました。

写真をクリックすると、モダールウィンドウで表示され、下に担当楽器と名前が表示されます。ギャラリーは、前回BLOGの「Creative Gallery」を元に作成しました。

まず、キャプションの設定をします。ギャラリーを開き、使用する写真をクリックし、キャプションに担当楽器、名前を入力します。これで完了です。

Modulaの設定をします。「General」から「Creative Gallery」を選択し、高さをPCでは300px、TAB、SPは200pxに設定します。ホバーアクションは「None」を選択し、マウスオーバーしても、キャプションが表示されないようにします。

LPへの設置方法は、Smart Slider3と同じように「ショートコード」ブロックを使用します。

Time Schedule

タイムスケジュールを時間と内容の色を分けて、見やすくしました。2カラムにカバーブロックをそれぞれ配置し、内容を入力します。高さが揃うようにスペーサーで調整します。左と右の背景を分けて、カラム全体の背景は左の色に合わせました。これは、カラムの間の隙間の色になるので、どちらかの色に指定することにより、完全に2色のカラムになります。左カラムの左右のスペースを調整し、色を段ごとに変更して完成です。

Music Charge

画像の色とテーブルの色を合わせ、場所と料金をわかりやすくしました。テーブルは、4カラムにそれぞれカバーブロックを4つ同じ高さで積み重ねました。画面の幅が小さくなった時、文字が改行になるカラムがある場合は、すべての高さを調整し段違いにならないようにします。

Contact Us

E-mailの下にプラグイン「AddToAny Share Buttons」でSNSシェアボタンを入れました。ボタンを押すと、アプリが開き、投稿にURLなどが表示されます。ページの端に固定で置いたり、投稿の最後に自動で入れたりすることもできますが、今回はLP投稿内にショートコードで手動で入れる方法を紹介します。

まずは、プラグインをダウンロードして有効化します。

左サイドバーの「設定」から「AddToAny」をクリックすると、設定画面が表示されます。まず、「シェアボタン」からSNSアプリを選択します。今回は、X、Facebook、Line、Pinterest、Emailを選択しました。その他、サイズ、色などを指定して、今回はショートコードで設置するので、「ブックマークボタンの場所」のチェックはすべて外します。また、追加CSSに下記のコードを入力します。

.addtoany_shortcode { text-align:center; }

左下にある「変更を保存」ボタンをクリックします。

LP編集画面で、SNSボタンを設置したい場所にショートコードブロックを挿入し、下記ショートコードを入力します。

[addtoany]

これで、SNSボタン設置の完了です。プレビューで確認し、サイズ、上下スペースを調整します。公開前に、SNSにリンクされるかテストします。

以上で、今回の説明は終了です。スライダー、ギャラリープラグインは便利で、見栄えがよくなりますが、入れすぎるとページが重くなるので、数や写真の枚数、サイズを調整しましょう。また、SNSボタンは公開後もテストをして、動作を確認しましょう。

次回は、新しいテーマのDEMOを使用して、BLOGを作成したいと思います。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。