こんにちは。中川瞬(@buppan_system)です。 この記事ではShopifyを日本語フォントに編集する方法について知りたいという方のために、編集方法について解説をします。 この記事を読むことで、

この記事を書かせて頂いている私は、現在、輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、忙しくても副業で収入を得てもらっています。

それでは、Shopifyを日本語フォントに編集する方法について解説をしていきます。

まずはフォントの種類を変更する

Shopifyはカナダに拠点のあるECサイトのプラットフォームです。 日本でも活用している方は多くいますが、海外発なので日本語フォントに対応していない欠点を持ちます。 そのため、コード編集をおこない日本語に変える必要があります。 プログラミングの知識が乏しいと難しいと感じる方もいるでしょうが、豊富でない場合でも編集は可能なのでやり方を詳しく解説します。 まず、フォントの種類を切り替えます。 １．テーマカスタマイズ ２．テーマ設定 ３．文字体裁 の順に進むと変更可能です。 ただし、日本語フォントへの対応がほとんどされていないため、コードのチェンジは必要です。 その場合は、以下のやり方で実行してみてください。

フォントを編集する

フォントを変えるやり方を詳しく解説します。 以下のやり方は、 ・ベースフォント：游明朝体 ・大見出し：Dancing Script を使ったやり方です。

編集前にすべきこと

コード編集をおこなう前にはテーマをコピーしておきます。 バックアップがあれば、問題が起きた際でも最初の状態に戻せるので安心です。 とくに初心者であれば間違うことも多いので、コピーを残すことはリスクを抑えるためにも必要です。 コピーは、 １．オンラインストア ２．テーマ ３．現在のテーマ ４．アクション ５．複製する の順番で進みます。 その後、テーマライブラリーに表示されるので、名称を変えてください。 テーマライブラリーでは、 １．テーマライブラリー ２．アクション ３．名前の変更 の順番に進み、「Brooklyn-Custom-Code」と記載して名前の変更を選択します。 変更後には、コピーしたテーマを公開する必要があるため、 １．テーマライブラリー ２．アクション ３．公開する の順に進み、確認画面が表示されたら、「公開する」を選択し公開してください。 現在のテーマが「Brooklyn-Custom-Code」になっているかチェックします。 次に、 １．オンラインストア ２．テーマ ３．現在のテーマ ４．アクション ５．コードを編集する の順に進んでいくと、コード編集をおこなう画面が開きます。 「Assets/theme.scss.liquid」がコードを追記するファイルなので開いてください。 また、Googleデベロッパーツールも使用するためオンラインストアの横にある目のアイコンを選択し、プレビュー画面を開きましょう。

ベースフォントは游明朝体

WindowsにもMacにも標準搭載されているフォントでもある「游明朝体」をベースフォントに設定します。 コードの設定は「Font-familyメーカー」を活用すると簡単におこなえます。 サイトにアクセスし、游明朝体を探し出し、下部分にある「使いたいフォントをドラッグ」の部分まで持って行き追加してください。 次にGoogleデベロップツールを開いてプレビュー画面が表示されているタブを開き、右クリックして「検証」に進みます。 検証ツールの左上部にある矢印のマークをクリックし、リッチテストの本文をクリックし選択してください。 検証ツールの下半分にCSSが表示されたらfont-familyのコードを探し、「body, input, textarea, button, select」をコピーして、編集画面を表示しているタブに移し替えます。 移動後、「theme.scss.liquid」ファイルの下までスクロールし、「body, input, textarea, button, select」を貼り付け、後ろに「｛｝」を付け加えて、Font-familyメーカーの下にあるコードをダブルクリックしてコピーを実行してください。 コピーをしたらコード編集画面に引き返し、「｛｝」の間に貼り付けて「保存」をクリックしてプレビュー画面をチェックしましょう。 その後、再度「保存」をクリックするとプレビュー画面に反映されます。

見出しのフォントはDancing Script

見出しをDancing Scriptにする場合は、Googleフォントを使用します。 Googleフォントのサイトにアクセスし、検索窓で「Dancing Script」をサーチし、表示されたらクリックして詳細ページに移ります。 フォントのスタイルを選び、「+ Select this style」をクリックし、フォントを付け加えてください。 コードを取得できるので、画面右上部にある四角が3つと＋のマークをクリックするとサイドバーが開かれるため、「@import」を選択しましょう。 その後「@import ~ swap’); 」までをコピーしてストアテーマの「theme.scss.liquid」に貼り付ければDancing Scriptを使用できます。 コードの編集画面に戻り、コードを一番下の行に貼り付けてください。 大見出しをDancing Scriptに変更するためにh1タグと.h1クラスにDancing Scriptを適用させていきます。 Googleフォントに戻り、「CSS rules to specify families」に記載してあるコードをコピーしてください。 コード編集画面に戻り、「｛｝」の中に貼り付けましょう。 ただし、英字のみに適用されるので日本語であれば游明朝体を適用する必要があります。 「h1, .h1 { font-family: 'Dancing Script', cursive, 'Yu Mincho Light','YuMincho','Yu Mincho}」 のコードに書き換えると英字はDancing Script、日本語は游明朝体になるのでコードの変更を保存し、プレビュー画面でチェックしてください。

フォントのサイズを変更する

サイズを変えるときは、コードの編集画面からフォントサイズを変更するコードを追記します。 ・本文：16px ・見出し：36px にしたい場合は、本文のフォントファミリーを設定した箇所に「font-size: 16px;」と行間を調整する「line-height: 2;」を付け加えて入力します。 見出しフォントサイズのチェンジは、見出しフォントファミリーを編集した箇所に追加が必要なので、見出しのフォントを編集した際のコード 「h1, .h1 { font-family: 'Dancing Script', cursive, 'Yu Mincho Light','YuMincho','Yu Mincho}」 に「font-size: 36px;」を付け加えましょう。 追加後、きちんと変更されているかプレビューで確認してください。

コードの編集が難しい場合は？

コードの編集が難しい場合は、コードをコピーして貼り付けるだけで編集ができるよう、コピー用のコードを用意しているサイトもあります。 活用することで手軽にフォントの種類や大きさを変更できるので、自分でできない場合に活用することで、時間をかけずに作成できます。 ただし、最後にきちんと反映されているのかプレビュー画面でチェックすることが大切です。

一部だけフォントを変えることはできる？

一部分のみフォントを変更することも可能です。 その場合、コードの「theme.css」の一番後ろに追加するやり方が最善策です。

日本語フォントを適用する際に知っておきたい注意点

日本語フォントの適用では以下のようなデメリットが存在します。 再度フォントを変えたい場合には、コード編集が必要です。 一度変更しても、サイトの雰囲気を変えたい、イメージに合わないなどの理由でフォントやサイズを変えたくなる場合もあるでしょう。 その場合、再度編集する必要があるため編集に知識を持った人物がいなければ変更に時間がかかってしまうケースもあるので注意が必要です。

日本語フォントでより魅力的なサイトを作成しよう

日本語フォントへ帰るやり方は、HTMLやCSSの知識を持つ人物であれば簡単におこなえます。 しかし、プログラミングの知識がないと難しさを感じる部分があることは確かです。 少しの知識を身に付けるだけで編集ができるので、サイトをより魅力的にして多くのユーザーを集めるためにも、プログラミングの知識を深めることを検討してみてください。 手軽に編集をしたい場合は、コードをコピーするだけで編集できるサイトも存在するため、活用しながらShopifyをより充実させてみましょう。   下記のLINEで ①パソコンの選び方 ②国内転売マニュアル ③メルカリマニュアル が記載されている「ネット物販スタートマニュアル」をプレゼントしているのでぜひ受け取ってくださいませ！