ノーコード bubble 解説_無料のテンプレート で勉強_3

無料テンプレートをダウンロードして編集画面で中を分析し「これは!」という所を抜き出して解説します。今回は「Ez Marketplace – Shopを使わせてもらいます。

 

4月30日追記:久しぶりに見たらv2.0にバーションアップしていてデザインも結構変わっていました。のでこの後の説明「?」な所もあるかと思いますが勉強になる所もあるのでこれはこれで残しておく事に致します。

 

v2.0で使っているプラグインでスライダーを作る方法をYouTubeにアップしました。

 

写真画像とインクスケープ(Inkscape1年生)で作ったイラストを使っています。

 

 

ノーコード bubble 解説_テンプレートを参考にする時のポイント

 

 

 

テンプレート2回はダウンロード出来ない?

という事はありませんでした。

 

今回どのテンプレートが良いかダウンロードして色々試し、本番用に変更していないEz Marketplace〜が欲しかったので1回目のダウンロードを捨てました。もう一度同じ物をダウンロードしようとしたら、

 

Use templateが出なくてOwned template(所有するテンプレート)となっておりダウンロードが出来ません。フリープランだから同じ物2回は出来ないのかなと思っていたら、

 

New appから出来ました。

 

1度ダウンロードしたテンプレートはStart from a templateに入っていたのですね◎

 

それでは本題の解説に入ります。

 

 

スライドショーの作り方

Ez Marketplace〜を見ると1番上にスライドショーがあります。設定では画像は2枚、なので下にドットが2つあって右左に進む矢印があるデザインです。これを作ります。

 

4月30日追記:前述したように新しいv2.0のスライドショーはシンプルになっていました。

 

編集画面でスライドショーをクリックすると左のCategoriesも合わせて「home_banner A」と青く表示されます。これはReusable elementリユーザブルエレメントで作った事を表しています。

 

編集画面左下を見るとReusable elementsがありその中にhome_bannerがあります。

ヘッダーやフッターのように違うページにも共通して使うパーツはReusable elementにすると便利です

本当だ、HeaderとFooterもあるね

ノーコード bubble 解説_共通パーツの書き出し

 

Reusable elementを変更する

Reusable elementにした物も変更(編集)出来ます。ただしこれを使っている所は全部同じ様に変更されるので気を付けてください。逆に考えるとReusable elementにすれば1つ変更すれば共通して変更されるのでメンテナンスが楽という事です◎

 

home_bannerのスライドショーの作りが見たいので編集画面左上>Reusable elementのhome_bannerを選択します。

 

Elements treeを見ると全体はGroupで作ったGroup A(ピンクの枠)の中に入っています。右側に同じくGroupで作ったGroup Slider Home(水色の枠)があってその中にSlideshowで作った目的のSlideshow A(の枠)があります。

 

 

Slideshowを作るボタンはデフォルトの編集画面(左)にはありません。Ionic Iconなど右のEz Marketplace〜にはあって左に無いボタンは、

 

Ez Marketplace〜の制作者がPluginsにインストールしたから使えるようになっています。なので今から真似して作るサイトにもSlick Slideshowをインストールします。(するとElementsにはSlideshowと言う表示が出ると右側に書いてあります)

 

その前に大まかな画面の設定を。

何も無い状態のどこかをクリックしてindexの画面の横サイズを1200px以上にしてください。次にGroupで1200×478の枠(茶色)を作り、その中に同じくGroupで834×478の枠(青)を作ります。黒い窓の中の詳細もEz Marketplace〜と同じにすれば同じものが作れます。

 

スライドショープラグインをインストールする

画面左のPluginsタブ >+Add pluginsで検索窓にSlick Slideshowと入力します。

値段が出ているものは有料です

 

目当ての物が出たのでInstall>DONEと進みます。

 

Slideshowが使えるようになったので青いGroupの中に配置します。

 

今回は3枚の画像をスライドショーに使う事にします。大きさを揃えましたがバラバラでも問題無く保存形式も揃えなくて大丈夫です。3枚目のイラストはsvgで保存しました。

 

+Upload〜をクリックすると雲マークのUploadが現れるのでクリック、画像を選びます。2、3枚目も同様に+Upload〜で増やしていきます。

 

スライドショーをFadeにした時に前の画像が透けないようにする

3枚目をsvgで保存したと言いましたが、この時後ろには白(や任意の色)を敷いておきます。

 

Slideなら問題ないのですがふわっと画像が切り替わるFadeにした場合後ろが透明になっていると、

 

前の画像と重なる瞬間がありこんな風にちょっとおかしな見え方をしてしまいます。

これも有りと言えば有りかも

 

Run-mode renderingをRescaleにして画像が歪まないようにします。画像が1枚の時はまだ前後に進む矢印と下のドットは表示されません。

 

2枚目の画像追加で表示されます。この色も変更できます。3枚アップロードが済んだのでPreviewで実際の動きを確認します。

 

ちゃんと動きました。スピードはAnimation speedで変更できます。サンプルは2500でした。

 

左側のレスポンシブ設定をしていないのでスマホサイズでは見え方がおかしいと思いますが、スライドショー成功とします◎

スタンダードプードルのハーフチョーク_08

 

 

次回はスライドショーの左側「カテゴリー」とそこから飛ぶ先の「カテゴリーページ」を作ります。

お疲れ様でした◎

 

ノーコード bubble 解説_無料のテンプレート で勉強_4