#26 プラグイン✖️Canva スライダーの設置方法
見本サイト
https://lueur-test.tsunagu-webdesign.com
画像
④
⑤
⑥
⑦
⑧
１１
12
13
14
１５
１６
１７
１８
１９
２０
２１
２２
２３
２４
２５
ここからピンク印
⑨
１０
③
オープニング
こんにちはwebデザイン
起業コーチの祥子です。
早速ですが今日作るものは
webサイトでは必須の「お客様の声」を
スライダーで設置する方法をお伝えします。
（要望を送ってもらっているスクショを出すとか）
無料プラグイン×Canvaで作る方法と。
有料プラグイン×AI生成を使ってスライドに
開閉式のボタンを設置する作り方の
２パターンをご紹介します。
無料・有料でそれぞれ
できることが違ってきます。
今日の動画を最後まで見ることで
コスパ重視か機能重視か
クライアントの要望に沿った
提案ができるようになります。
間違いなくwebデザイナーとして
スキルアップになるので
動画を最後までご覧ください。
まず１つ目：無料の作り方
スマートスライダー３という
プラグインとCanvaを使って行きます。
こちらのスライドをよく見て欲しいんですが、
実はこれ画像になっていて、
Canvaでこの部分を作っています。
なので、まずはCanvaで
お客様の声の画像を作っていきましょう。
今回は、キャンバの詳 し使い方については
割愛しますが、参考までに私はこの画像を
横1080ピクセル、縦800ピクセルでつくりました。
同じ大きさで試しに3つ用意します。
（この部分画面をインサート）
画像が用意できたらワードプレスへ。
まずはスマートスライダー３という
無料のプラグインをインストールしてください。
ここからはこちらの記事を見ながら解説
これで、無料プラグインで
スライダーを設置 できました。
今見ていただいたように、スマートスライダー３の
無料版でもかなり優秀な機能を使えます。
ただ デメリット としてはスライダーの中に
テキストを打ち込んだり
ブロックエディターを使うということができません。
なので、Canva等 で画像を作成して、
それをスライドさせるだけで大丈夫であれば
スマートスライダー３でも充分です。
例えば、 今作ったみたいなお客様の声を載せる場合は
あらかじめ画像で作っておく必要があります。
でも、もし使う用途が
文章はない写真や画像のみの場合。
例えば
カメラマンさんのポートフォリオや
宣材写真だけであれば、無料プラグインで充分です。
ちなみに、このスマートスライダー3の使い方については、
ブログでまとめておりますので、
概要欄のURLもしくはこちらのQRコードから
見ることができます。
では、次にご紹介するのが
有料プラグインを使ったやり方
お客さんによって感想の長さって
変わってきますよね。
そんな時にも柔軟に対応できるのが
今からご紹介する方法。
「直接文字を打ち込んで、開閉式にしたい」
という要望を叶えることができます。
これはアルケーブロックプロという
有料プラグインのリッチスライダー
を使っていきます。
WordPressテーマはSWELLです。
有料ですが、年間6000円〜利用が可能。
個人ライセンスと制作ライセンスの
2パターンがあります。
「アルケーブロックプロ」と
web検索してください。
お金を出してでも高機能の
ブロックを使えるようになりたい、
という方には非常に向いています。
今回は予めプラグインを入れていますので、
インストールした後の状態から解説していきます。
このプラグインを入れると
ブロックエディターの種類が増えます。
今回使用するのは
リッチスライダーというもの。
設置したい箇所でプラスを押して〜
（ここから画面解説）
あ
背景のカラー設定で不透明度を0に。
タイトルにF様 ホームページ制作 と記入。
モックアップ画像を入れる。
モックアップ画像はGoogleの画像生成AI、nanobananaで一瞬で生成されます。
やり方は、Geminiを開いて
モックアップにしたいサイトのファーストビューを
スクリーンショットします。
そしてCommand+Vでペーストして
「添付の写真をノートPCのモックアップ画像にして」と指示を出し
バナナマークをクリック。
これで送信します。
すると、一瞬で生成されましたので
こちらをサイトに入れていきます。
テキストも入力しました。
このように、
アルケーブロックのリッチスライダーは
画像だけではなく文字やその他のブロックエディターもいつもの制作と同じように入れることができるので
かなり柔軟に対応ができます。
では、スライドの高さ調整をしましょう。
全体をクリックして右の編集バーで
「スライドの高さ」ここをコンテンツに合わせる。
これで高さが綺麗に見えるようになりました。
で、ここからが応用編なんですが
read moreの部分が開閉式になっています。
これは、結論言っちゃうとSWELLの
アコーディオンブロックにcssを書いています。
（カメラ見て喋る）
（画面録画）アコーディオンブロックを呼び出して…
アコーディオンのタイトルにRead more と書いて、文章を下に入れる。
一旦こうしてください。
ホームページ制作 F様
丁寧に１つ１つ考え方をアドバイスしてくださったので 苦手分野にも関わらず非常に楽しく向き合うことができました。制作途中も、順を追って丁寧に説明していってくれたのでとてもわかりやすかったです。また機械的な作業ではなく一緒に作り上げてもらえたという喜びがとても大きかったです。
Read more
ホームページをお願いしただけではなく応援してもらえている感覚がとても嬉しかったです‼︎祥子さんのお人柄が真っ直ぐで誠実なので信頼してお任せすることができました！打ち合わせの度に温かい気持ちになりとても感謝しています。
書道家 藤井様
丁寧に１つ１つ考え方をアドバイスしてくださったので 苦手分野にも関わらず非常に楽しく向き合うことができました。制作途中も、順を追って丁寧に説明していってくれたのでとてもわかりやすかったです。また機械的な作業ではなく一緒に作り上げてもらえたという喜びがとても大きかったです。
Read more
ホームページをお願いしただけではなく応援してもらえている感覚がとても嬉しかったです‼︎祥子さんのお人柄が真っ直ぐで誠実なので信頼してお任せすることができました！打ち合わせの度に温かい気持ちになりとても感謝しています。
書道家 藤井様
丁寧に１つ１つ考え方をアドバイスしてくださったので 苦手分野にも関わらず非常に楽しく向き合うことができました。制作途中も、順を追って丁寧に説明していってくれたのでとてもわかりやすかったです。また機械的な作業ではなく一緒に作り上げてもらえたという喜びがとても大きかったです。
Read more
ホームページをお願いしただけではなく応援してもらえている感覚がとても嬉しかったです‼︎祥子さんのお人柄が真っ直ぐで誠実なので信頼してお任せすることができました！打ち合わせの度に温かい気持ちになりとても感謝しています。
cssはこちらのコードを
コピペして入れます。
あまりcss得意じゃないよって方も
いらっしゃると思いますし、
私自身も、学んだものの自分で
０から書くことはほぼありません。
コーディングに関してはAIの得意分野なので、
今後ご自身でもデザインを
カスタマイズしたいよというときは
次の方法を活用してください。
チャットGPTを開いて
「WordPress、テーマSWELLの
特定のアコーディオンブロックの
背景を透明にするcssを教えて。
cssクラス名はcustom-accordion」
と尋ねるとcssコードをAIが生成してくれます。
一発でうまくいかないことも多いので
何回かAIにフィードバックして
トライしてみてください。
ちなみに今回使ったこのコードは
私がよくサイト制作で使うcss一覧リストの
中にまとめています。
実はこのリストもプレゼントしているので
受け取って少しでも時短しちゃいましょう。
あとは、スライドを複製していくだけです。
カバーブロックをコピして。
スライド番号の２をクリック。
不透明度を０にしてペースト。
スライド３も同じく、０にしてペースト。４枚目以降は「スライドを追加する」を押して、あとは同じです。
このようにして、
無料・有料の両方のやり方で
スライドを設置することができました。
エンディング
どちらのやり方でするかは
クライアントの要望次第。
私の生徒さんたちはカメラマンさんの
サイト制作を受注することが
結構多くて、このスライダー作成方法は
地味によく活用されています。
スキルが身について
最大限の提案ができてくると
最初は2万円の低単価だった
モニター制作から
次は5万円、8万円、15万円。
そこから一気に30万円に
単価アップしていけるのが
WordPress在宅起業の特徴です。
未経験からチャレンジしたママたちも
0→1を叶えて行っている
再現性のあるノウハウを
15大特典にしてプレゼントしています。
20大特典にしてプレゼントしています。
【初心者でも迷わない】
月収30万円を叶える
ロードマップチェックシート
【緊張しても大丈夫】
順番通りに聞くだけのヒアリングテンプレ
【コピペOK】css一覧リスト
など、今からすぐに現場で使える特典です。
概要欄のリンクもしくはQRコードから
ぜひ受け取ってくださいね。
webデザインでフリーランスになりたい人に向けた
サイト添削つきの個別相談も無料で行っています。
私も最初は5年前に
YouTubeがきっかけでWordPressを知り
人生を変えることができました。
だからこそ、
「今、人生を変えたくて悶々としている〜」
という方の力になりたくて
動画や特典を無料でお届けしています。
この動画が参考になったら
高評価とチャンネル登録も
よろしくお願いします。
また次の動画でお会いしましょう！
