Shopifyで日本語URLをメニューに登録する方法｜Googleスプレットシートを用いた効率的な設定手順【初心者向け】
Published： Updated：
Shopifyでは、簡単にメニューを作成することができます。しかし日本語URLをそのまま登録することはできません。
例えば、ブログでタグ絞り込みURLを作成した場合など、日本語のままだと登録ができないです。
本記事では、日本語URLをメニューで登録する方法と、さらに効率的に管理する方法をご紹介します。
さあ、Shopifyのメニュー機能をさらに活用しましょう！
Index
［ CloseOpen ］
Shopifyでメニュー機能を使う方法
メニューの登録・編集については以下の記事で解説しています。
日本語URLを登録するには日本語部分をURLエンコード（パーセントコード）に変換する！
日本語部分をURLエンコード（パーセントコード）に変換することで登録をすることができます。
URLエンコード（パーセントコード）とは
URLに含まれ特定の文字を、HTTPプロトコルで使用可能な文字に変換する手法。
URLにスペースや日本語などの非ASCII文字が含まれる場合に、％記号と2桁の16新数（ASCIIコード）でエンコードされます。
URLエンコードの方法
URLエンコードを手動で行うのは手間がかかるため、ツールやプログラムを使用して自動的にエンコードするのが一般的です。
▼オンラインツール
URLエンコード・デコード｜日本語URLをサクッと変換 | すぐに使える便利なWEBツール | Tech-Unlimited
変換したい文字をツールで変換してからURLを設定できます。
※URLをエンコードするとhttps://〜の「:」「/」がエンコードされてしまうため注意
Googleスプレットシートを用いてURLエンコードの効率化と一覧化
Googleスプレットシートを用いて効率的にURLエンコードと一覧にする方法を紹介をします。
メニューは複数作成できるため、一覧にして保存しておくことで、毎回オンラインツールを使用する必要がなくなります。
Googleスプレットシートを作成する方法
ブログのタグをURLで指定する場合で紹介します。
作成手順
- GoogleA列にブログカテゴリハンドルを入力
- B列にタグ名を入力
- C列で「A列の文字」と「ENCODEURL関数でエンコードしたB列の文字」を結合する
- C列をコピーしてメニューのURLに入力する
ENCODEURL関数でエンコードする
="blogs/"&A1&"/tagged/"&ENCODEURL($B1)
上記のコードをC列に入力する。
これを設定するだけでA列とB列を入力するだけでC列にURLが表示されます！
※注意
A列のブログカテゴリハンドルはURLセーフ文字で設定されている前提となります。
カテゴリハンドルをURLセーフ文字以外で設定している場合、URLハンドルを変更するか、こちらもURLエンコードする必要があります。
別タブでカテゴリハンドルを管理してもっとわかりやすく
A列に毎回ブログハンドルを入れるのは大変。。
なので、ブログ名を選択するとブログハンドルが表示できるように変更しましょう。
VLOOKUP関数を用いることでさらに便利にすることができます！
作成手順
- カテゴリ用のタブを作成する
- カテゴリ用タブのA列にブログ名を入力
- カテゴリ用タブのB列にブログハンドルを入力
- URL一覧用タブに移動してA列にデータを埋め込む
- C列で「A列の文字を用いて取得したハンドル」と「ENCODEURL関数でエンコードしたB列の文字」を結合する
- C列をコピーしてメニューのURLに入力する
カテゴリ用のタブを作成する
新しくカテゴリ用のタブを作成します。
このタブ名はVLOOKUP関数で使用します。
カテゴリ用タブにカテゴリ名とカテゴリハンドルを入力して、一覧用タブで表示をする
A列にカテゴリ名、B列にカテゴリハンドルを入力します。
データの入力規則を用いてプルダウンを作成する。
- A列を選択する
- データを開いて、データの入力規則をクリック
- ルールを追加します。
- 条件を「プルダウン（範囲内）」に変更
- ②をクリックすると④を表示する
- カテゴリ用タグに移動します。
- ⑤をクリックした後、A列を選択
- プルダウンを作成することができます。
VLOOKUP関数でブログハンドルを取得、ENCODEURL関数でエンコードする
="blogs/"&VLOOKUP($A1,'カテゴリ'!$A$1:$B,2,false)&"/tagged/"&ENCODEURL($B1)
上記のコードをC列に入力する。
A列でブログカテゴリを選択、B列でブログタグを入力するとC列にURLが出力されます。
これでサイト運営者が変わっても簡単にエンコードできます！
ブログハンドルが増えた場合
カテゴリ用タブに追加するだけで、プルダウンの選択肢が自動で増えます！
ハンドルを別で管理することで運用負担を減らせます。
まとめ
いかがでしたでしょうか。【Shopify】日本語URLをメニューで登録する方法と効率化についてご紹介しました。
リンクを整理して、ユーザーフレンドリーで回遊しやすいサイトを作りましょう。
関連記事 Related articles
Author of this article
Muhiro / Web Designer (Frontend)
Dropped out of university and worked in the food service industry. After experiencing the harsh aspects of the food industry, I quit and became unemployed. I joined my current design company after attending vocational training school and self-study. I mainly focus on design and development of websites with consideration for UI/UX and accessibility. I have extensive experience with scratch projects and have customized over 90 Shopify themes.
Disclaimer
- This blog provides technical information and knowledge based on the author’s experience, but does not guarantee their accuracy or universality. The information is current as of the time of writing and may become outdated due to technological advances. Please use this information at your own risk. We recommend seeking professional advice if necessary.
- The program code provided on this blog is based on the author’s best knowledge, but its accuracy and completeness are not guaranteed. We are not responsible for any damages or issues arising from the use or execution of the code. Please use the code at your own risk.
- Copyrights for any screenshot images used on this site belong to the respective rights holders. If there is any issue with the publication, please contact us via the contact form.
- If you move to another site via a link from this site, we are not responsible for the information, services, etc., provided at the destination site.
- We are not responsible for any damages resulting from the content published on this site.
