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

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

表示関連

SVGファイルが表示されない

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

サーバースペック

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

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

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

ECサイト関連

Shopifyの公式ブログ

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

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

Shopifyブログ

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

PCの操作・機能関連

Windowsで範囲を指定してスクリーンショットを撮る方法

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

「Windows」+「Shift」+「S」

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

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

アクセス解析関連

Google Analyticsで自社のIPを除外設定が効かない

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

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

あなたの IPv6 接続性をテストしましょう。

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