UTF-8への文字コード変更に伴う自作CSSとJavascript修正について

Size: px

Start display at page:

Download "UTF-8への文字コード変更に伴う自作CSSとJavascript修正について"

ゆみかあみおか
5 years ago
Views:

1 UTF-8 への文字コード変更に伴う自作 CSS と Javascript 修正について Google の推奨によりお店ページの文字コードを現在の EUC-JP から UTF-8 へ変更します文字コードを UTF-8 にすることで検索結果の順位や数にプラスに働くことが期待できます今回の文字コードの変更により店舗さん自身で設置しているスタイルシートや Javascript がある場合お店ページのレイアウトが崩れるショッピングカートが機能しないなど動作に不具合が生じる可能性があります対処のために変更予定日までに修正をお願いします該当店舗以下のいずれかまたは両方に該当する場合修正が必要となります次頁を参照のうえ修正してください店舗さんご自身でスタイルシート (CSS) を設置している (2ページ A 参照 ) 店舗さんご自身で Javascript を設置している (7ページ B 参照 ) 変更予定日 2019 年 6 月 19 日 ( 水 ) 変更箇所と変更に伴う影響ショップサーブの以下の箇所の文字コードを EUC-JP から UTF-8 へ変更しますベーシックテンプレートをご利用の場合該当箇所お店ページおよびショッピングカートを変更影響お店ページショッピングカート内の崩れにより動作に不具合が起こる可能性ありカスタムテンプレートをご利用の場合該当箇所ショッピングカートを変更影響ショッピングカート内の崩れにより動作に不具合が起こる可能性ありカスタムテンプレートのお店ページの文字コードはすでに UTF-8 のため変更なし 1

2 A 店舗さんご自身でスタイルシート (CSS) を設置している場合の修正 ➊ サーバーに設置している CSS の先頭行に以下の文字コードを追加してください例文字コードを utf-8 "utf-8"; 例文字コードを euc-jp "euc-jp"; ➋ CSS の修正ができているか確認をしてくださいウェブブラウザの機能を利用して確認します Googlechrome Firefox Microsoft Edg での確認方法をご案内しています Google chrome での確認方法 1 該当のサイトを開き F12 をクリックもしくはサイト上で右クリックしメニューから検証を選択します 2

3 CSS 2 Sources タブをクリック Page の中からご自身でサーバーに設置した CSS ファイルを選択します 3 "utf-8"; "euc-jp"; が記載されていることを確認してくださいさらに表示されているソースが文字化けしていなければ問題なく修正できています先頭行に文字コードが記載されている文字化けしていない先頭行に文字コードが記載されていない文字化けしている 3

4 CSS Firefox での確認方法 1 該当のサイトを開きサイト上で右クリックしメニューからページのソースを表示を選択します 2 ご自身でサーバーに設置した CSS ファイルを選択しクリックしますソースの中から.CSS とテキストを検索すると該当の箇所が見つけやすいくなります 4

5 CSS 3 "utf-8"; "euc-jp"; が記載されていることを確認してくださいさらに表示されているソースが文字化けしていなければ問題なく修正できています先頭行に文字コードが記載されている文字化けしていない先頭行に文字コードが記載されていない文字化けしている Microsoft Edg での確認方法 1 該当のサイトを開き F12 をクリックもしくはサイト上で右クリックしメニューから要素の検査を選択します 5

CSS 2 デバッカータブをクリック表示されたファイルの中からご自身でサーバーに設置した

6 CSS 2 デバッカータブをクリック表示されたファイルの中からご自身でサーバーに設置した CSS ファイルを選択します 3 "utf-8"; "euc-jp"; が記載されていることを確認してくださいさらに表示されているソースが文字化けしていなければ問題なく修正できています先頭行に文字コードが記載されている文字化けしていない先頭行に文字コードが記載されていない文字化けしている 6 月 19 日 ( 水 ) のショップサーブのメインテナンス後に再度管理画面でお店ページの更新を行ってください 6

7 B 店舗さんご自身で Javascript を設置している場合の修正 ➊ 管理画面の各箇所に記述中の Javascript に文字コードの記述を追加してください例文字コードを utf-8 で指定する場合 <script type="text/javascript" src="/shop/js/original.js" charset="utf-8"></script> 例文字コードを euc-jp で指定する場合 <script type="text/javascript" src="/shop/js/original.js" charset="euc-jp"></script> Javascript は管理画面のHTML 記述が可能な全ての箇所に記載が可能です記述をしたと考えられるすべての箇所のご確認をお願いします <Javascript の記述が多い箇所 > デザイン設定 >ヘッダとSEOの設定 >ヘッダのバナーエリアページ編集 >センター用フリーエリア ➋ 管理画面でお店ページの更新を行ってください ➌ Javascript の修正ができているか確認してくださいウェブブラウザの機能を利用して確認します Googlechrome Firefox Microsoft Edg での確認方法をご案内しています 7

8 Javascript Google chrome での確認方法 1 該当のサイトを開き F12 をクリックもしくはサイト上で右クリックしメニューから検証を選択します 2 Sources タブをクリック Page の中からご自身でサーバーに設置した Javascript ファイルを選択します 8

9 Javascript 3 表示されている Javascript に表示されているソースが文字化けしていなければ問題なく修正できています文字化けしていない文字化けしている Firefox での確認方法 1 該当のサイトを開きサイト上で右クリックしメニューからページのソースを表示を選択します 9

10 2 ご自身でサーバーに設置した Javascript ファイルを選択しクリックします Javascript ソースの中から.js とテキストを検索すると該当の箇所が見つけやすいくなります 3 表示されている Javascript に表示されているソースが文字化けしていなければ問題なく修正できています文字化けしていない文字化けしている 10

11 Javascript Microsoft Edg での確認方法 1 該当のサイトを開き F12 をクリックもしくはサイト上で右クリックしメニューから要素の検査を選択します 2 デバッカータブをクリック表示されたファイルの中からご自身でサーバーに設置した Javascript ファイルを選択します 11

3 表示されているスタイルシートの先頭行に @charset "utf-8"; または @charset

12 3 "utf-8"; "euc-jp"; が記載されていることを確認してくださいさらに表示されているソースが文字化けしていなければ問題なく修正できています Javascript 文字化けしていない文字化けしている 6 月 19 日 ( 水 ) のショップサーブのメインテナンス後に再度管理画面でお店ページの更新を行ってください 12

ページの作成についてショッピングカート以外のすべてのページは自作できますまた一部のページだけ自作することもできますトップページだけ自作のものを用意する店舗さんも多数おられます利用テーマに合わせて文字コードを指定します制作する HTML ファイルの文字コードはショッピングカートで利用して

ページの作成についてショッピングカート以外のすべてのページは自作できますまた一部のページだけ自作することもできますトップページだけ自作のものを用意する店舗さんも多数おられます利用テーマに合わせて文字コードを指定します制作する HTML ファイルの文字コードはショッピングカートで利用して自作ページを公開する < 目次 > ページの作成について 2 作成したファイルをアップロードする 4 サーバーの仕様 CGI の利用について 5 1 / 5 ページの作成についてショッピングカート以外のすべてのページは自作できますまた一部のページだけ自作することもできますトップページだけ自作のものを用意する店舗さんも多数おられます利用テーマに合わせて文字コードを指定します制作する HTML