Tools」という絞り込み検索が出来るもののカスタマイズを行います。Suiteでカスタマイズした絞り込み検索の部分は下のようになっています。Color、Size、Typeの3種類があります。見づらいですよね...これをカスタマイズしていきます。色で表現しよう色は↓のようにするとわかりやすいですね。今回はこれを作成します。Suite」の管理画面に移動したら、「Color」の部分の「Display」をクリックします。Swatch」をクリックします。その後、「Apply」をクリックします。Update」をクリックしてください。これだけです!これでコレクション画面に移動すると、↓のようになっていると思います。↑の写真に、グレーのような色が三つ続いてしまっているところがあります。これは、ある程度の色ならばアプリ側で準備してくれているのですが、マイナーな色(日本でのえんじ色や群青色など)はどんな色か認識できないため、このようにグレーになってしまいます。この場合は後で説明する「CSSでのカスタマイズ」を活用すれば色を設定できます。Sizeを見やすく変更しようサイズはS~LLまでだったり、22.5cm~30.5cmまで、と幅広く取られがちです。そのため、初期の状態だと長くなってしまいます。これを解決するため、2種類の方法を提供します。小さいボタンで表現しようまず、前回と同じように「Size」の横の「Display」をクリックします。Boxes」をクリックします。Update」を押してください。すると↓のように、小さいボタンで表現されました!2列で表現しよう1列では長くなってしまうので、2列で表現してみます。column」をクリックします。すると、↓のように2列で表現することが出来ました。box・・・チェックボックスを無くすNested・・・タイトルを無くす(Colorなどの部分)など、様々な種類があります。(その他のはまだ使い方がはっきりしないため、分かり次第随時更新します)[中級者向け]CSSでカスタマイズしようCSSでカスタマイズする方法もあります。コーディングの知識が必要になります。今回は、「Type」の部分を↓のようにカスタマイズしてみます「ACCESSORIES」の横にリボンのアイコンをつけてみました。Awesomeを使ってみます。rel="stylesheet">なお、場所は「theme.css」を読み込んでいる上あたりでよいでしょう。Suite」の設定画面に移動したら「CSS」を押してください。「ACCESSORIES」の部分がどうなっているのか、ディベロッパーツールで確認します。aタグのあとにアイコンを入れれば良さそうですね。下記コードを先ほどのCSSのところに貼ります。Update」のあと、リボンがついているのを確認できると思います。CSSカスタマイズまとめこのように「ディベロッパーツールでタグやクラスを確認」→「CSSでカスタマイズ」を行えば自分好きなようにカスタマイズすることができます!質問や感想がありましたら、コメント、またはお問い合わせフォームまでよろしくお願いします。コメントをキャンセルメールアドレスが公開されることはありません。ネットショップを運用する上で、分析は欠かせません。laravelを用いて塾の管理システムを作成しました。主な機能は次の通りです。管理者のログインと講師のログインの2種類を用意してあります。