WEB制作の現場で役に立つTIPSを備忘録的に残す記事【随時更新】

WEBサイトを制作するプロセスの中で困って調べたり、教えてもらったのに、忘れてしまいがちなことを備忘録的にメモしておく記事です。これは！と思ったときに加筆修正をしていこうと思います。

表示関連

SVGファイルが表示されない時には、ブラウザのヘッダー情報でMIMEタイプを確認する。

Chromeで画面を右クリックでして「検証」から「Network」のタブを開き、該当するSVGファイルのTypeをチェック。

本来であれば、Content-Type:image/svg+xmlとなるべきところが、Content-Type:text/plainとなっていたら正しく認識されていない。

SVGファイルのURLを直接開いてみてみると文字列で画面が埋め尽くされてしまうはず。

そんなときは、サーバーの設定でhtaccessに下記のようにMIMEタイプを追加してみる。

AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz

MIMEタイプを追加した後にキャッシュをクリアしてから画面をリロードして表示されれば解決。

WEBサイトの表示が遅かったり、動作がもっさりとしている場合には、次のことを疑う。

プラグインは便利な反面、WordPressの挙動や表示に影響を与えることもあります。デザインやレイアウトにかかわるものは、処理を重たくすることが多いようです。

WEBフォントや外部サービスとの連携のためのタグは、読み込みに影響を与えます。読み込みのタイミングを変えたり、重要ではないものは外すことで解消することがあります。

今回はまったのはこれです。プラグインも外部ファイルも極力シンプルにしたにもかかわらず、動作の遅さをなかなか解消できなかったのですが、念のためと思ってサーバーのスペックを調べたところ、動作させるにはかなり見劣りするスペックとなっていました。

レンタルサーバーのホームページに書いてあるスペックは最新のサーバーのものだったのですが、実際に運用していたのは数年前に契約をした際のスペックのままになっていました。サーバーを移転して安定稼働。

サービスページで把握するだけはなく、実際の環境をチェックすることは大切ですね。

オフィシャルブログは情報の量、質ともに充実しています。

Shopifyの情報だけではなく、ECサイトの運営のヒントとなる情報のインプットもできます。

運営されている方はブックマークに入れておくとよいでしょう。

Macでは範囲を指定してスクリーンショットをに慣れ親しんでいたのですが、Windowsにもあるんですね。

「Windows」+「Shift」+「S」

のキーの組み合わせで範囲を指定してスクリーンショットを撮ることができます。正確にはクリップボードに保存されます。

今さらではありますが、キーコンビネーションを忘れがちなのでメモしておきます。

Google Analyticsで自社のIPを除外しているにもかかわらず、アクセスとしてカウントされてしまうことがあります。設定は間違っていないはずなのに…そんな時はきっと設定が足りない可能性があります。

もしかしたら、あなたの会社はIPv6でネットに接続しているのかもしれません。

などのサイトで、自社がIPv4とIPv6のどちらで接続しているを調べることができます。IPv6で接続しているのに、IPv4の除外設定しかなければ除外されません。IPv6の設定も加えましょう。

橋本敬（はしもとたかし）: プロデューサー・クリエイティブディレクター。早稲田大学政治経済学部卒業。リクルートグループ、オン・ザ・エッヂ、ミツエーリンクス、博報堂アイ・スタジオを経て独立、株式会社ブリッジを設立。徹底的なユーザー視点でのWEBサイトの構築やコンテンツ制作を通じて事業課題の解決を支援している。