![](https://cxg-design.jp/wp-content/uploads/2023/11/69fbf336ce635b94d9bac9705afcf88a.png)
LPにプラグインでスライダー、ギャラリー、SNSシェアボタンを入れてカスタマイズ
前回は、ブロックエディターの機能を使いLP(ランディングページ)を作成しました。
今回はその応用で、LPに以前紹介したSmart Slider3とModulaを使用して、スライダーとギャラリーをLPに追加します。動きのあるLPで表現の幅も広がります。さらに、SNSボタンを設置することで、1クリックでアプリの投稿にURLリンクを載せることができ、拡散に繋がります。
また、ブロックエディターの新しいレイアウトも作成したので、そちらも紹介いたします。今回も前回と同じくCHRISTMAS JAZZ CONCERTを題材に作成しました。
前回は基本的な機能を使用したシンプルなデザインでしたが、今回は、色をネイビーに変更し、ロゴなどのデザインも作り込んだ完成形になります。では、変更した箇所を説明していきます。
Title
![](https://cxg-design.jp/wp-content/uploads/2023/11/38a679cb3e0934ce3251c838df6b58ac.png)
以前も紹介したSmart Slider3ですが、具体的な使用例を紹介できませんでした。
今回は、PC、スマホで高さを変更するように設定しました。スライダーのデザインはBLOGで紹介した「サムネイル付フェードスライダー」を元に作成しました。
まず「Size」の縦幅を550pxに変更します。これは、PCで表示する最大の縦幅になります。次に「レイアウト」で、「全幅」に指定し、「min-height」を300pxにします。これが、スマホでの縦のサイズになります。サイズは任意ですが、ヘッダーの高さは、サイトによってバラバラなので、PC、SPそれぞれの画面を見て高さの値を調整します。
![](https://cxg-design.jp/wp-content/uploads/2023/11/0a9c5a5074bc85a918803ae38e18cabd.png)
「スライダーサイズ」の「高さ」を550px、「レイアウト」の「Min Height」を300pxに設定
デザインでは、サムネイル周りの背景色を、LPの背景色に合わせるため、「バー」で背景色を指定します。また、サムネイル上下の空きをCSSで設定します。
padding-top: 20px;
padding-bottom:80px;
他の項目に行く前に、右上の「保存」をクリックします。
![](https://cxg-design.jp/wp-content/uploads/2023/11/5fd2e5ca519135d19b4deeeb9e284f58.png)
操作>バーをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/11/4cbea761c4d6207f963828469068c94d.png)
背景色を指定し、CSSで上下の空きを設定
その他、「自動再生」をONにして、5秒で画像を切り替えるため、「Duration」を5000にしました。また、「開発者」の「Scroll to Slider」をOFFにして、サムネイルをクリックしても、スクロールされない設定にしました。
![](https://cxg-design.jp/wp-content/uploads/2023/11/78fcad3ae0b8a77c91387bcae5acd3cf.png)
自動再生>Slide Durationを5000に設定
![](https://cxg-design.jp/wp-content/uploads/2023/11/e4a013f37b7d0e74ae1765ded5a7a7be.png)
開発者>Scroll To SliderをOFFに
LPに挿入する時は、タイトルの下に「ショートコード」で入れます。ショートコードでは、編集画面にビジュアルが表示されないので、表示が早く、他の部分の作業をするとき便利です。プラグインでショートコードが使える場合は、できるだけ使いましょう。ビジュアルは、下書き保存してプレビューから確認します。
![](https://cxg-design.jp/wp-content/uploads/2023/11/8643e0f1e3ddc9cb5798fba9af5085ce.png)
「ショートコード」ブロックにショートコードを入力
Concert Overview
![](https://cxg-design.jp/wp-content/uploads/2023/11/2946b4c6765474d6f462033f6d50c776.png)
ここは写真のみの変更です。パノラマ画像を配置したので、PCは、ピアノとギターが映ります。見出しに入っていたアンダーバーはロゴに合わないので削除しました。
Guest Artist
![](https://cxg-design.jp/wp-content/uploads/2023/11/84126fed967d9c97c46a11caf8c34fb5.png)
レイアウトは前回に近いですが、キャプションの下に、前回別段落にあった「Support Artist」を「Modula」で入れました。
写真をクリックすると、モダールウィンドウで表示され、下に担当楽器と名前が表示されます。ギャラリーは、前回BLOGの「Creative Gallery」を元に作成しました。
まず、キャプションの設定をします。ギャラリーを開き、使用する写真をクリックし、キャプションに担当楽器、名前を入力します。これで完了です。
![](https://cxg-design.jp/wp-content/uploads/2023/11/5448342993b8f06805b905e709ab2358.png)
メディア>画像をクリック
![](https://cxg-design.jp/wp-content/uploads/2023/11/60870d2c3313bfd692c789e32ec34132.png)
「キャプション」に担当と名前を入力
Modulaの設定をします。「General」から「Creative Gallery」を選択し、高さをPCでは300px、TAB、SPは200pxに設定します。ホバーアクションは「None」を選択し、マウスオーバーしても、キャプションが表示されないようにします。
![](https://cxg-design.jp/wp-content/uploads/2023/11/19c4c83cccb568a6660299590757d1ca.png)
General>HeightにPC300px、TAB、SP200pxを入力
![](https://cxg-design.jp/wp-content/uploads/2023/11/14be9bef5a9e2bf50217ff1ba5c8ab7b.png)
Hover effects>Hover effectを「None」に設定
LPへの設置方法は、Smart Slider3と同じように「ショートコード」ブロックを使用します。
![](https://cxg-design.jp/wp-content/uploads/2023/11/be345736488392572a5a6a1043f63443.png)
「ショートコード」ブロックにショートコードを入力
Time Schedule
![](https://cxg-design.jp/wp-content/uploads/2023/11/47d72a22464efd473c498a7985aebc73.png)
タイムスケジュールを時間と内容の色を分けて、見やすくしました。2カラムにカバーブロックをそれぞれ配置し、内容を入力します。高さが揃うようにスペーサーで調整します。左と右の背景を分けて、カラム全体の背景は左の色に合わせました。これは、カラムの間の隙間の色になるので、どちらかの色に指定することにより、完全に2色のカラムになります。左カラムの左右のスペースを調整し、色を段ごとに変更して完成です。
![](https://cxg-design.jp/wp-content/uploads/2023/11/f83f9581fa7e02a4075c9920825dfa53.png)
2カラムの全体の背景色を左カラムの背景に指定
Music Charge
![](https://cxg-design.jp/wp-content/uploads/2023/11/b26e31346fdcebb133408e4079cf4b02.png)
画像の色とテーブルの色を合わせ、場所と料金をわかりやすくしました。テーブルは、4カラムにそれぞれカバーブロックを4つ同じ高さで積み重ねました。画面の幅が小さくなった時、文字が改行になるカラムがある場合は、すべての高さを調整し段違いにならないようにします。
![](https://cxg-design.jp/wp-content/uploads/2023/11/8cde12e1aabc93fb399e9341f91405c8.png)
4カラムにカバーブロックを4段重ねて高さを100pxに指定
Contact Us
![](https://cxg-design.jp/wp-content/uploads/2023/11/792105e73b089891ded0101215ca4df0-2000x1149.png)
E-mailの下にプラグイン「AddToAny Share Buttons」でSNSシェアボタンを入れました。ボタンを押すと、アプリが開き、投稿にURLなどが表示されます。ページの端に固定で置いたり、投稿の最後に自動で入れたりすることもできますが、今回はLP投稿内にショートコードで手動で入れる方法を紹介します。
まずは、プラグインをダウンロードして有効化します。
左サイドバーの「設定」から「AddToAny」をクリックすると、設定画面が表示されます。まず、「シェアボタン」からSNSアプリを選択します。今回は、X、Facebook、Line、Pinterest、Emailを選択しました。その他、サイズ、色などを指定して、今回はショートコードで設置するので、「ブックマークボタンの場所」のチェックはすべて外します。また、追加CSSに下記のコードを入力します。
.addtoany_shortcode { text-align:center; }
左下にある「変更を保存」ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2023/11/194fdd5346f8db0839e19dffc542b464.png)
設定>AddToAnyをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/11/f7b64c0c4a1ee1f6d7321d9865773563.png)
「シェアボタン」から設置するSNSボタンを選択
![](https://cxg-design.jp/wp-content/uploads/2023/11/cc4a990b909283f5141e540bb96c2d37.png)
サイズ、色を指定して、「ブックマークボタンの場所」のチェックをすべて外す
![](https://cxg-design.jp/wp-content/uploads/2023/11/c80c116b2d24ce24e5a5a8c16aa85fe1.png)
「追加CSS」に左右センター配置のコードを入力
LP編集画面で、SNSボタンを設置したい場所にショートコードブロックを挿入し、下記ショートコードを入力します。
[addtoany]
これで、SNSボタン設置の完了です。プレビューで確認し、サイズ、上下スペースを調整します。公開前に、SNSにリンクされるかテストします。
![](https://cxg-design.jp/wp-content/uploads/2023/11/649d9dac9cca34acf9a0fae455ff0ef9.png)
「ショートコード」ブロックにショートコードを入力
以上で、今回の説明は終了です。スライダー、ギャラリープラグインは便利で、見栄えがよくなりますが、入れすぎるとページが重くなるので、数や写真の枚数、サイズを調整しましょう。また、SNSボタンは公開後もテストをして、動作を確認しましょう。
次回は、新しいテーマのDEMOを使用して、BLOGを作成したいと思います。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。