サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
デスク環境を整える
takblog.site
便利なプラグインslick.jsですが、使用時に注意する点がいくつかあります。 今回はslick.jsを使う時に注意するポイントを上げていきます。 スライドの間隔(margin)の調整は、スライダー直下の<li>タグで行わない。 これは結構重要です。 これをやるとスライドの位置がズレてしまって、スライダーが正常に動かなくなります。 例えば下記のようにslickを設置した場合に、スライドの間隔(margin)を入れたいと思って、<li>タグに margin や padding の style を独自に適用させてはいけないです。 <script> $('#slider').slick(); </script> <ul id="slider"> <li> <!-- 省略 --> </li> <li> <!-- 省略 --> </li> <li> <!-- 省略 --> </li> </ul> ス
前回「「shopify」でECサイトを制作したときの備忘録」では、テーマフォルダの構造などについて書きました。 今回から目的別にこんなことをしました。ってことを書いていきます。主にはliquidのコード紹介になっていきます。 今回は「コレクションごとの商品一覧を出力する」です。 早速以下のコード例をご確認ください。 任意のコレクションに属する商品の「商品画像」「商品名」「商品の金額」を出力したコード例です。 以降、1行ずつ解説していきますので、コード例を見ながら確認すると分かりやすいです。 1行目 「assign」はjavascriptでいうところの「var」です。 1行目は、変数「collection」に表示したいコレクションを格納しています。 section.settings.collectionは表示ページのurlによって、コレクションのhandleを判定します。 例えば mysho
以前にslick.jsに関することを2つ書きましたが、今回はもっと絞って「arrows」と「dots」のカスタマイズ方法について紹介します。 以前のslick.jsに関する記事は下記の2つです。 よく使うjQueryプラグイン① 「slick.js」 「slick.js」の使い方応用編 追加で「slick.jsでサムネイル付きスライダーを作成する」も書きました。サムネイルを固定した場合のスライダーのサンプルも紹介しています。 arrowsのカスタマイズ方法 arrowsのカスタマイズ方法はすごく簡単です。これはカスタマイズができるようにもともとオプションが用意されています。 オプションについてはこちらから確認してください。 slick.jsのオプションの箇所に下記のように記述すれば好きな画像をarrowsに設定できます。 $(function(){ $("#slider").slick({
前回、下記の記事でSwiperでサムネイル付きのスライダーの作成を紹介しました。 Swiperでサムネイル付きのスライダーを作成する 前回はサムネイル側はスライダーでしたが、今回はサムネイル側はリスト形式で表示するパターンです。 制作物をcodepenで見る See the Pen swiper with thumbnail slider2 by takblog (@blanks-site) on CodePen. 前回とは違って、リスト形式で表示するパターンだということが確認できるかと思います。 今回はSwiperのpaginationオプションを使って、サムネイルリストを作っています。 以下が今回のhtmlになりますが、サムネイル画像を表示する箇所は<div class="thumblist"></div>の要素内です。 <div class="swiper-container"> <
最近は脱jQueryのため、slickではなく、Swiperを使うこともあります。 まだ数回しか使ったことないですが、色々オプションもあって、理解すれば応用が効くな！という印象です。 慣れの問題でしょうが、まだslickのほうがやりたいことをすぐできていて、Swiperだと大変なこともありますが、これから頑張って使っていきます。 ここから本題ですが、今回やったことを言葉で表すのは難しかったので、とりあえず、次のcodepenで挙動を確認してください。 右上の「EDIT ON CODEPEN」をクリックして、別タブで開いて、width 800pxを境にどう変わるかを見てください。 ※当サイトではコンテンツエリアが800px以上にはならないです。 See the Pen swiper responsive by takblog (@blanks-site) on CodePen. 800px以
サムネイルもスライダーで動く これは「slick.js」の使い方応用編でも紹介しましたが、もう一度説明していきます。 slick.jsでは２つのスライダーを連動させて動かすことができるオプション「asNavFor」があります。 このオプションを使用すれば、下記のようなサムネイル付きのスライダーを作成できます。 See the Pen slick-asNavFor_2 by blanks (@blanks-site) on CodePen. こちらはオプション「asNavFor」も使用していますが、このオプションだけではサムネイルの画像をクリックして、メインのスライダーを切り替えることはできません。 asNavForはあくまで2つのスライダーを同期させることしかできません。 では、どうやって「サムネイルの画像をクリックしたら、メインのスライダーも切り替える」ことができるようになるのか？ それ
最近「shopify」というサービスでECサイトを作る機会があったので、その時に調べたことや使ったテクニックを備忘録として記事にします。 何回かに分けて書いていきますので、気長に付き合ってください〜。 今回はやろうとしてできなかったこと、テーマファイルの構造などを書いていきたいと思います。 その他shopify関連記事はこちら shopifyの簡単な説明 カナダ発のECサービスで、世界175カ国で利用されている世界最大のECサービスです。詳しい説明は公式サイトをご確認ください shopifyで制作されている国内サイト例 ゴーゴーカレー 公式通販 【公式】tokyo grapher ｜iPhone用 高性能アタッチメントレンズ FUMIKODA 公式サイト＆オンラインブティック【フミコダ】 国内ECサービスと違って自由なデザインで制作されているように感じます。 テーマファイルの構造 shop
このページを最初にブックマークしてみませんか？
『takblog.site』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
