簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

株式会社リテリアのアイコン
株式会社リテリア

はじめに

今回の記事は、Shopify アプリである「らくらく余白調整 | リテリア Margin」の解説記事になります。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。

興味がある方は、以下の URL よりアプリのインストールを行って下さい。

らくらく余白調整|リテリア Margin

「らくらく余白調整 | リテリア Margin」は、Shopify のセクション間の余白を調整することができるアプリです。

通常、Shopify で細かくデザイン調整する方法はコーディングしかありませんが、こちらのアプリを使用するとノーコードで微妙な余白を調整することができます。

それでは、アプリをインストールするとできること・インストール方法・使い方の解説を行っていきます。

「らくらく余白調整 | リテリア Margin」でできること

Shopify アプリである「らくらく余白調整 | リテリア Margin」をインストールすると、以下のようにノーコードで余白を調整することができます。

らくらく余白調整 | リテリア Margin

余白を広げるのは勿論、余白を狭めることもできます。PC 時、スマホ時の余白を別々に設定することも可能です。

それでは、「らくらく余白調整 | リテリア Margin」のインストール方法と使い方を解説していきます。

アプリのインストール

それでは、実際にアプリのインストールを行っていきましょう。

ストアの管理画面のアプリ管理から、ストアをカスタマイズに移動しましょう。

アプリのインストール

アプリの検索窓に、らくらく余白調整 | リテリア Marginと入力して下さい。

アプリのインストール

広告に敗北していますが、4 番目に出てきました。

アプリのインストール

こちらをクリックして、アプリ画面に移動して下さい。

アプリのインストール

アプリを追加するをクリックして、ストアにアプリを追加しましょう。
Shopify パートナー用のアカウント(通称開発アカウント)でインストールを行うと、全ての機能を無料で利用することができます。
ちなみに、マーチャント用のアカウントだと、月額 2.99 ドルで利用できます。7 日間の無料プラン付きです。

アプリを追加するをクリックすると、以下の画面に遷移します。

アプリを追加すると画面遷移する

右上のアプリをインストールをクリックして、アプリのインストールを行いましょう。

以下の管理画面に遷移します。ここまでで、アプリのインストールは終了です。

アプリの管理画面

アプリの設定

それでは次に、アプリの設定を行いましょう。

テーマに反映有効化をクリックします。

アプリの有効化

有効化が終了したら、次にプレビューをクリックしましょう。

アプリのプレビュー

ストアのトップページの一番下に、余白調整が追加されているのが確認できます。

アプリブロック

そして、対応する部分に余白が挿入されているのが確認できます。

ここまでで、アプリの導入は一通り完了です。

それでは次に、細かいアプリの使い方を見てみましょう。

余白を調整する

基本的にこのアプリでできることは、余白を調整することだけです。

余白調整(大)余白調整(中)余白調整(小)の3つのアプリブロックを追加することができます。

余白調整(大

余白調整(中

余白調整(小)

各々の余白セクションは、調整できる余白の幅が異なります。
実際にこのアプリブロックを利用して、余白を調整してみましょう。
以下のような、セクションとセクションの間にこちらのブロックを挿入してみます。

ブロックを挿入

アプリブロックから挿入されたセクションは、通常のセクションと同じようにドラッグアンドドロップで動かすことができます。

アプリブロック

上の赤線の目のマークの右側をつかんで、動かします。

上の赤線の目のマークの右側をつかんで、動かす

ドラックアンドドロップが終了すると、以下のようになります。

ドラックアンドドロップが終了

少し、セクション間の余白が広くなったのが確認できますね。

それでは次に、余白の大きさを調整してみましょう。

こちらを操作すれば OK です。

余白の大きさを調整

余白を大きくすると、以下のようになります(流石にここまで大きくすることは無いと思いますが...)

余白を大きくした際の見た目

逆に余白を小さくして、重ね合わせることも可能です。

余白ブロックを重ね合わせる

三種類のセクションはそれぞれ、余白を調整できる大きさが違います。

また、PC とスマホのそれぞれについて、別々の余白を設定することも可能です。

余白を調整して、訴求力の高いサイトを作成しましょう。

終わりに

今回は、「らくらく余白調整 | リテリア Margin」の解説を行いました。

少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。

ここまでお付き合い頂き、誠にありがとうございました。

らくらく余白調整|リテリア Margin

recommendおすすめ記事

日本語に完全対応したセット販売アプリ「セット売り|リテリア セット販売」について徹底解説
アプリ解説

日本語に完全対応したセット販売アプリ「セット売り|リテリア セット販売」について徹底解説

Shopifyで高スタマイズタイトルを簡単に導入できるアプリ「リテリア Title」について解説
アプリ解説

Shopifyで高スタマイズタイトルを簡単に導入できるアプリ「リテリア Title」について解説

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説
アプリ解説

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説

ShopifyストアにYouTube動画を埋め込む方法を徹底解説!
アプリ解説

ShopifyストアにYouTube動画を埋め込む方法を徹底解説!

ShopifyストアにFAQ(よくある質問)を挿入できるアプリ『リテリア FAQ』の使い方を徹底解説
アプリ解説

ShopifyストアにFAQ(よくある質問)を挿入できるアプリ『リテリア FAQ』の使い方を徹底解説

Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説
アプリ解説

Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説

商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説
アプリ解説

商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説

【公式解説】簡単に送料無料バーを設定できる Shopify アプリ「リテリア 告知」について解説!
アプリ解説

【公式解説】簡単に送料無料バーを設定できる Shopify アプリ「リテリア 告知」について解説!

高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説
アプリ解説

高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説

Shopifyで離脱防止ポップアップを設置できる「リテリア Popup」について徹底解説
アプリ解説

Shopifyで離脱防止ポップアップを設置できる「リテリア Popup」について徹底解説

Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説
アプリ解説

Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説

Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説
アプリ解説

Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説

【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説
アプリ解説

【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説
アプリ解説

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

LINE誘導ボタンを簡単に設置できるShopifyアプリ「リテリア LINE誘導」について徹底解説
アプリ解説

LINE誘導ボタンを簡単に設置できるShopifyアプリ「リテリア LINE誘導」について徹底解説

ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説
アプリ解説

ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説