簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう
はじめに
今回の記事は、Shopify アプリである「らくらく余白調整 | リテリア Margin」の解説記事になります。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。
興味がある方は、以下の URL よりアプリのインストールを行って下さい。
「らくらく余白調整 | リテリア Margin」は、Shopify のセクション間の余白を調整することができるアプリです。
通常、Shopify で細かくデザイン調整する方法はコーディングしかありませんが、こちらのアプリを使用するとノーコードで微妙な余白を調整することができます。
それでは、アプリをインストールするとできること・インストール方法・使い方の解説を行っていきます。
「らくらく余白調整 | リテリア Margin」でできること
Shopify アプリである「らくらく余白調整 | リテリア Margin」をインストールすると、以下のようにノーコードで余白を調整することができます。
余白を広げるのは勿論、余白を狭めることもできます。PC 時、スマホ時の余白を別々に設定することも可能です。
それでは、「らくらく余白調整 | リテリア Margin」のインストール方法と使い方を解説していきます。
アプリのインストール
それでは、実際にアプリのインストールを行っていきましょう。
ストアの管理画面のアプリ管理から、ストアをカスタマイズに移動しましょう。
アプリの検索窓に、らくらく余白調整 | リテリア Marginと入力して下さい。
広告に敗北していますが、4 番目に出てきました。
こちらをクリックして、アプリ画面に移動して下さい。
アプリを追加するをクリックして、ストアにアプリを追加しましょう。
Shopify パートナー用のアカウント（通称開発アカウント）でインストールを行うと、全ての機能を無料で利用することができます。
ちなみに、マーチャント用のアカウントだと、月額 2.99 ドルで利用できます。7 日間の無料プラン付きです。
アプリを追加するをクリックすると、以下の画面に遷移します。
右上のアプリをインストールをクリックして、アプリのインストールを行いましょう。
以下の管理画面に遷移します。ここまでで、アプリのインストールは終了です。
アプリの設定
それでは次に、アプリの設定を行いましょう。
テーマに反映の有効化をクリックします。
有効化が終了したら、次にプレビューをクリックしましょう。
ストアのトップページの一番下に、余白調整が追加されているのが確認できます。
そして、対応する部分に余白が挿入されているのが確認できます。
ここまでで、アプリの導入は一通り完了です。
それでは次に、細かいアプリの使い方を見てみましょう。
余白を調整する
基本的にこのアプリでできることは、余白を調整することだけです。
余白調整（大）、余白調整（中）、余白調整（小）の３つのアプリブロックを追加することができます。
各々の余白セクションは、調整できる余白の幅が異なります。
実際にこのアプリブロックを利用して、余白を調整してみましょう。
以下のような、セクションとセクションの間にこちらのブロックを挿入してみます。
アプリブロックから挿入されたセクションは、通常のセクションと同じようにドラッグアンドドロップで動かすことができます。
上の赤線の目のマークの右側をつかんで、動かします。
ドラックアンドドロップが終了すると、以下のようになります。
少し、セクション間の余白が広くなったのが確認できますね。
それでは次に、余白の大きさを調整してみましょう。
こちらを操作すれば OK です。
余白を大きくすると、以下のようになります（流石にここまで大きくすることは無いと思いますが...）
逆に余白を小さくして、重ね合わせることも可能です。
三種類のセクションはそれぞれ、余白を調整できる大きさが違います。
また、PC とスマホのそれぞれについて、別々の余白を設定することも可能です。
余白を調整して、訴求力の高いサイトを作成しましょう。
終わりに
今回は、「らくらく余白調整 | リテリア Margin」の解説を行いました。
少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。
ここまでお付き合い頂き、誠にありがとうございました。
.png%3Fw%3D400&w=828&q=75)
.png%3Fw%3D400&w=828&q=75)
