今ECカートでトレンドになっているカナダ発、世界No1のECカート「Shopify（ショッピファイ）」
今回は、エックスサーバーで運用している独自ドメインに対してサブドメインを作成して、独自ドメインサイト＋サブドメイン（Shopify）としたい場合の手順を画像付きで紹介します。

触るのはエックスサーバーとShopifyの画面のみ！
さらっと設定できます◎

エックスサーバー内の設定

1．Shopifyで運用したいサブドメインを作成する

今回の例では「https://shop.**.com」でShopifyを表示させたいので、サブドメイン名にshopと入れています。

2．DNSレコードの編集

サブドメインをShopifyに向けるために「Aレコード」「CNAMEレコード」の2つを追加します

Aレコードの編集

内容の「23.227.38.65」（Shopify公式で案内されているShopifyのIPアドレス）を設定してください。

CNAMEレコードの編集

ホスト名には「www.shop」、内容には「shops.myshopify.com」こちらを設定してください。

参考：Shopifyヘルプセンター 外部ドメインをShopifyに手動で接続する

この状態になれば、エックスサーバーでの作業は完了です！

Shopify内の設定

Shopifyのホーム画面にある「ドメインを追加する」から

「既存のドメインを接続する」へ進みます

shop.***.com（設定したいサブドメイン）を入力して「接続を確認する」のボタンを押してください。

これで接続完了です！

サブドメインでShopifyが表示できるのを確認する

あとはShopify管理画面から、サイトを表示させて確認してみてください。

自社サイトはWordPressなどのサイト、サブドメインでShopifyというような使い分けがこれでできます◎ぜひお試しください！

The post Shopifyにサブドメインを設定する方法（エックスサーバー） appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

無料カートで人気のBASEを使ってみて「独自ドメインと独自ドメインメールについて」いろいろと組み合わせたり、編集してみたのでまとめとして書きました。

ドメイン：ムームードメイン
サーバー：エックスサーバー
メール：Gmailでの環境下になります。

独自ドメインをBASEで使う時のルール

・外部ドメインサービス（お名前.comやムームードメインなど）を使う
・サブドメイン（www.***.comとかshop.***.comとか）でしか設定できない

こちらがまず前提です。

独自ドメインを設定する

設定としては、3パターンあります。

パターン1．外部ドメインサービスの設定＋BASEAppsの設定

（BASEのマニュアルにも記載があるので細かなところは省略）
***.comは表示されないので、取りこぼしがありそうなのが気になるところ…。

パターン2．外部ドメインサービスの設定＋BASEAppsの設定＋レンタルサーバー（Xサーバーやロリポップなど）の設定

shop.***.comなどでショップ（BASE）を表示させ、***.comではオフィシャルサイトなどを表示させたりする場合に◎

設定としては、参考にサブドメインwww、ムームードメインとエックスサーバーで進めていきます。

設定①外部ドメインサービス（ムームードメイン）の設定

ムームーDNSをBASE指定の設定に

ネームサーバーをエックスサーバーに向ける

設定②レンタルサーバー（エックサーバー）内の設定

まずはドメイン追加をした後に「DNSレコード設定」にて設定をします。

www.取得したドメインの場合は、CNAMEをBASE指定のものに

※shopなど.取得したドメインの場合はムームードメインとサーバーでAレコードを編集していきます。

設定③BASE独自ドメインAppsの設定

パターン2の設定は以上になります。

ムームードメイン×ロリポップの場合は、ロリポップ側で独自ドメインをムームーDNSへ移行した後に、ムームードメインのカスタム設定を編集すると◎

パターン3.外部ドメインサービスの設定＋BASEAppsの設定＋レンタルサーバーの「リダイレクト設定」

これは、http・httpsありなし、サブドメインのありなしの4つのURLにアクセスしてもBASEを表示させる内容になります。

設定方法はパターン2の設定に加えて「レンタルサーバー内の設定で.htaccessを使って転送（リダイレクト）」をします。

RewriteEngine on
RewriteCond %{HTTP_HOST} ^***\.jp$
RewriteRule ^(.*)$ https://www.***.jp/$1 [R=301,L]
※***はドメインを入力

独自ドメインメールを使う

パターン1の場合は、独自ドメインを取得したサービス会社が提供しているメールサービスを使うのがラク◎

パターン2・3の場合は、レンタルサーバーにメールアカウントを追加して、Gmailなどに転送して使用するのがオススメです。

例）エックスサーバーの場合
メールアカウントを追加、転送/Gmail宛、メールボックスに残さないにした後、Gmailのマニュアルを見て設定すると、独自ドメインメールでやりとりができます。
https://www.xserver.ne.jp/manual/man_mail_setting_gmail.php

あまり意識されませんが、独自ドメイン＋独自ドメインメールだと「ちゃんとしてる感」があっていいですよね。
ぜひお試しください。

The post BASEで独自ドメインを使う3つのパターンと、独自ドメインメールを使う方法 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

今回は「有料テーマを買うほどでもないけど、無料テーマ（テンプレート）を少しだけカスタマイズしたい」
そんな方に向けて、カスタマイズのポイントをご紹介していきます。

がっつり触ることになりそうなら、有料テーマの購入／カスタマイズ深掘りして勉強／必要な部分だけ依頼するなど、検討してくださいね。

テーマのカスタマイズを始めるには

Shopify管理画面から、テーマを選択します。
基本的なカスタマイズは「カスタマイズ」、カスタマイズでは触れない部分を「コードを編集する」になります。

CSS（style.css）で編集がしたい場合

コードの編集を開くと、選択しているテーマのファイル一覧が表示されています。
そこの「Assets」フォルダにある「新しいassetを追加する」を選択します。

空のファイルを作成するを選び、好きな名前（ここではstyle）を入力して、拡張子に「.css」を選択します。

次に「Layout」フォルダの中にある「theme.liquid」の中に

  {{ 'style.css' | asset_url | stylesheet_tag }}

と、入れてあげることで（できれば他のCSSと一緒においてあげてください）先ほど作ったstyle.cssが反映されます。

商品詳細ページをカスタマイズする場合

「Templates」→「product.liquid」：商品掲載エリアの前後

「Sections」→「product-template.liquid」：商品掲載エリア

商品詳細ページの下にちょっと配置するなら、product.liquidの方が見やすく管理しやすいものの、もう少し深掘りして触るのであればproduct-template.liquidがいいかなと思います。

ヘッダー、フッター、コレクションなど、その他のページをカスタマイズするには

ここまで来ると、大体の構造がおぼろげにわかってくると思いますが

という構成になっているため、触る目的が決まっているのであれば、すぐに該当するファイルが見つかると思います。
（Wordpressのテーマ編集をしていた方なら、少しすれば近い雰囲気なので、触りやすいかと）

慣れればカスタマイズしやすいShopify

最初は見慣れない管理画面に、右往左往してしまうと思いますが、思うように管理運営をしていくためには、ある程度のカスタマイズが必要になってきます。
せっかくなら高性能なShopifyを生かしていけるように、ぜひチャレンジしてみてください。

無料テーマの「カスタマイズ」の方を使った編集は「Shopifyヘルプセンター」に掲載されているので（まだ日本語化されていないですが）合わせてカスタマイズしてみてください。

The post Shopifyの無料テーマを少しだけカスタマイズしたい時の備忘録 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

もしまだドメイン取得されてなければ「Shopifyを始める前に検討したい！独自ドメインとメール管理運用の話」こちらの記事を参考に検討してみてください。

設定は10分程度ですが、ドメイン接続に約2時間／SSL導入が4時間（環境によります）待ち時間は他の作業を進めていきましょう！

1独自ドメインを設定する

Shopifyの管理画面で接続を確認する

まずはShopify管理画面から「既存のドメインを接続する」をクリック

接続したい既存のドメインを入力して「接続を確認する」をクリック

独自ドメインを接続するための設定項目・設定内容が表示されるので、これをムームードメインに設定していきます（公式のヘルプにも記載があります）

ムームードメインの設定をする

ムームードメインのコントロールパネルにログインして「ムームーDNS」→「（Shopifyで利用したい）ドメインの処理変更ボタン」でカスタム設定に、Shopifyで指定された設定を入力します。

（時間を置いてから）Shopify管理画面で再びドメイン接続を確認する

接続できると、正常に接続できましたと表示されるので、ドメイン接続はこれで完了です。

2Shopifyで使うメインのドメインを選択する

Shopifyの管理画面「ドメイン」にある「プライマリードメインの変更」から、メインで使いたい独自ドメインを選択します。

3SSLを導入されるのを待つ

SSLはShopifyが自動で設定します（約4時間）

設定が完了すると、SSL保留中のオレンジボタンが消えるので、消えたら設定をした独自ドメインにアクセスして確認してください。

独自ドメイン／SSLが設定されると、グッと進んだ気がしますね！他の外部ドメインの場合も、多少変わる部分はありますが、大きくは変わらないので、外部ドメインを使う場合はどうぞ参考にしてください。

The post Shopify×ムームードメインで取得した独自ドメインの設定～SSL導入までの手順 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

触れば触るほど、高性能だし、世界No1シェアなのも納得のカートです◎

独自ドメイン（URL）をどこで管理するのか

本格的にショップ運用となれば、独自ドメイン（URL）は必須事項として利用することになります。
ただ、ここで検討するべきことは、この独自ドメインをどこで取得して管理するかによって、初期設定の難易度が変わります。

独自ドメインメールをどこで管理するのか

次に独自ドメインを使ったメールアドレスの設定ですね。
この設定の難易度は、独自ドメイン（URL）の管理運用をどれにしたかによって決まります。

Shopifyで取得管理が一番カンタン！もしくは独自ドメインじゃないメールアドレス…

この2つの管理方法で、初期設定の難易度（時間のかかり方）が違います

今回、新規でドメインを取得してECサイトを作るということは決まったものの
複数のドメインがある→外部でドメインを取得する（接続の設定）→独自ドメインのメールを作ろう！→え、こんなに設定しなくちゃいけないのか…と苦戦するはめになりました…。

外部でドメイン取得、取得したドメインのメールを使いたいがために、この辺りの設定だけでほんっと時間かかりました…。

これからショップを立ち上げる方、Shopifyでドメイン取得する場合は苦戦はあまりしないと思いますが、外部でドメイン取得を考えられているなら、一度このまま進めて詰まらないか参考にしてください。

The post Shopifyを始める前に検討したい！独自ドメインとメール管理運用の話 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.