今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 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

EC-CUBE4を使ってネットショップ運用をされているお客様から、シェアボタンとOGPの設定をご相談受けた際に、調べたコードやどこを編集して設置したのか、ご紹介します。

（今回は、諸事情でプラグインが利用できないサイトだったので）手動？で設置した記録を備忘録として書いていきます。

<a href="http://www.facebook.com/share.php?u={{ app.request.uri }}" rel="nofollow" target="_blank">Facebook</a>
<a href="https://twitter.com/share?url={{ app.request.uri }}&via=TwitterID&related=TwitterID&hashtags=#お好み&text=文章" rel="nofollow" target="_blank">Twitter</a>
<a href="https://social-plugins.line.me/lineit/share?url={{ app.request.uri }}" rel="nofollow" target="_blank">LINE</a>

<meta property="og:url" content="{{ app.request.uri }}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ BaseInfo.shop_name }}{% if subtitle is defined and subtitle is not empty %} / {{ subtitle }}{% elseif title is defined and title is not empty %} / {{ title }}{% endif %}" />
<meta property="og:description" content="{{ Product.description_list }}" />
<meta property="og:site_name" content="{{ Product.name }}" />
<meta property="og:image" content="サイトのURL{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@TwitterID" />

ぜひお試しください

調べてみても、ピンポイントでこれだ！という情報が見つからなかったので、他のテンプレートファイルなどを見ながら書いたものになります。

もしかしたら仕様変更で利用できなくなるかもしれませんが、同じように実装したい方がいれば、お試しください。

The post EC-CUBE4で、商品詳細ページに合わせたシェアボタンとOGPを設定する方法 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

お客様から今使っているテーマで「最新の投稿の一覧URLを出したい」と相談を受けて対応してきました。
今回、最新の投稿のアーカイブページを好きなURLで設置する方法を備忘録としてご紹介していきます。

ブログサイトはトップが一覧になるので、企業サイトで使うことがあるかな～？程度ですが、参考にどうぞ！

テーマの更新にご注意

自作のテーマや更新が少ない場合はまだ大丈夫ですが、通常の更新があるテーマを使う場合、更新をするとfunction.phpに書いた設定が上書きされて消えてしまうことがあります。

更新の時に「あ！」とならないように、その点だけご注意ください。

The post WordPressの「最新の投稿」の一覧（アーカイブ）を好きなURLで表示させる方法 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

お客様が運用してるさくらインターネットサーバーで、特定のサイトだけPHPバージョンを変更する必要があったので、今回はその作業内容を備忘録としてご紹介していきます。

さくらインターネットでは、PHPバージョン変更＝サーバー内にある全サイトが対象になるので、ご注意ください。

経緯

1．お客様運用中のサーバーに、新規でWordpressインストールすると
「Your server is running PHP version 5.4.45 but WordPress 5.5 requires at least 5.6.20.」と、Wordpressを使うならPHPのバージョンアップしてよって表示

2．すでに運用してるサイトの関係で、PHPバージョンを変更するのは不可

この状態だったので、新規追加するWordpressのみPHPバージョンを変更するという経緯になります。

設定方法

編集するのは、この2つのファイルになります。

.htaccessファイルの編集

新規インストールしたWordpressの「.htaccess」に追記する

Action myphp-script /php.cgi
AddHandler myphp-script .php .html

※/php.cgiだけだと、ルート直下を指定するので、フォルダを作成してWordpressをインストールしていた場合は「/フォルダ名/php.cgi」に書き換えてください。
この時、この配置場所に合わせて書き換えないと400エラーが起きます。

php.cgiファイルを作成する

テキストエディタで「php.cgi」を作成してアップロードします
・文字コード：UFT-8N＝BOMなし
・改行コード：LE
・パーミッション：705

#!/bin/sh
exec /usr/local/php/7.4/bin/php-cgi

※指定したいPHPバージョンに書き換えてください。
（コントロールパネルの「スクリプト設定→言語のバージョン設定」で確認してください）
この時、さくらインターネットで設定のできないPHPバージョンを記入していると500エラーが起きます。

.hataccessの書き換えと、php.cgiファイルの作成で、さくらインターネットサーバー内の特定のサイトだけ、PHPバージョン変更をすることができます。

PHPバージョン管理にご注意

PHPバージョンも期間が経つと、推奨バージョン・非推奨バージョンなどの設定変更が必要になります。
非推奨のPHPバージョンで運用しているサイトがある場合は、おいおいはPHPバージョンを上げる・リニューアルするなどの対策が必要になるので、ご注意ください。

また設定を触る時には、特定サイトだけバージョン変更していることを忘れないように注意して触ってくださいね

The post さくらインターネットで「特定のサイトだけ」PHPバージョンを変更する方法 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 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

サイトの内容によって、細かくは変わってくるので参考程度にしてくださいね（2020年9月からGoogleは、検索評価を「モバイル」に統一するので、モバイルの速度改善オススメです！）

改善前の状態

Googleが提供するサイトURLを入れると、サイトスピードを計測する「PageSpeed Insights」
改善前の状態で測定した結果　モバイル3点、パソコン47点

では、この状態からWordpress高速化に向けて、やった内容やポイントをご紹介していきます。

画像処理

サイトスピード測定した時に「改善できる項目」として上げられている
「次世代フォーマットでの画像配信」「オフスクリーンの画像遅延読み込み」「効率的な画像フォーマット」「適切な画像サイズ」
この4つが画像処理に関連する項目で、点数に占める割合が大きくなっています。

キャッシュとコードの管理

上記と同じく「改善できる項目」として上げられている
「テキスト圧縮の有効化」「レンダリングを妨げるリソースの除外」
この2点については、画像処理より少し専門的な内容になります。

サーバー、プラグイン、テーマ、その他

ここは「改善できる項目」の「サーバー応答時間の短縮」の内容になりますが、ここはサイトによって大きく変わってくる部分になります。

改善後の状態

改善後に測定した結果　モバイル88点、パソコン99点

モバイルが6秒から2秒に改善！これにサーバーの載せ替え、プラグインの絞り込みや、テーマ改善をすればもっと伸ばせる余地もある結果に◎

WordPress高速化は、調べたり時間をかければ自分でもすることができると思いますが、あちこち触って改善をしていく内容なので自力では少しハードルが高めです。
チャレンジしてみて厳しいな…と思ったら、ぜひ一度ご相談してくださいね。

The post 【2020年】WordPressサイトをスピードアップ！モバイルを6秒から2秒にした高速化のポイント appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

お客様の希望を入力してもらって送信するような使い方をする場合に、カラーピッカーを使った色選択をして送信する方法をご紹介します。

「Color Picker for Contact Form 7」プラグインを使う方法

ContactForm7自体に、カラー選択できる機能はありませんが、プラグインを使うことで解決できます。

使い方はカンタン！
プラグインを有効化してから、ContactForm7のフォームを見ると「color」が選べるようになっているので、テキストやテキストエリアのように表示させたいところにポチッと入れるだけ。

これで、お客様はカラーピッカーで色を選択でき、受け取り側はカラーコードで内容を受け取れるようになります。

「jscolor.js」をContact Form7で使う

あまりプラグインを増やしたくない方は、こちらのjscolor.jsを使う方法がおすすめです。
こちらでは実装していないので、紹介だけになりますが、こちらの記事を参考にしてみてください。
Integrating color picker to contact form 7 plugin（英文）

オーダーメイド型の商品の申し込みフォームとかに、便利なのでぜひ使ってみてくださいね！

The post Contact Form 7でカラーコードを選択して送信する方法【Contact Form 7カスタマイズ】 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 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.