PageSpeed Insightsでカラーミーサイトを改善する
PageSpeed Insightsで、ページの表示速度とパフォーマンスを分析、改善方法を紹介。カラーミーのSEO対策にどうぞ！
Webフォントの利用方法とアップロードして使う際のCORS対応
通信環境の向上もあって、Webフォントは以前よりも使いやすくなっています。自サイトで使う場合について、ホスティングサービスのフォント（Google Fonts、Adobe Fonts）を利用する方法と、自分でアップロードして利用するフォントの二通りについて、まとめました。
iframeで埋め込み元の高さ計算して埋め込み先に反映させる方法
HTMLのインラインフレーム要素（iframe）で、他サイトのページを埋め込むアイデアはわりとよく使われます。たとえば、カラーミーショップ（EC）にWordPressのコンテンツを埋めこんだり。やってみると下の表示が切れる場面に遭遇しますが、高さ調整が重要です。
iframeで埋め込むときのレスポンシブ対応について
GoogleマップやVimeo、Youtube動画のような外部サービスを埋め込みたいことがよくあります。昨今はレスポンシブ対応でサイトを作っていることが多いので、ブラウザ横幅に応じて、埋め込み部分も可変する必要があります。コードを紹介しながら解説します。
画像を拡大するプラグイン PhotoSwipe v5を紹介します
Lightbox系の、高機能で使いやすいPhotoSwipe v5の紹介です。タップ、ピンチアウト・ピンチインで操作できます。
多機能スライダーSwiperの機能を紹介します
多機能スライダー「Swiper ver.9」の機能を紹介。仕事で使いそうなサンプルコードを多めに用意しました。簡単に設置できます。
Swiperのデモを作ってみました（サンプルコードあり）
Swiperは、いじっていると結構はまりやすい気がします。ということで、勉強がてら仕事で使えそうなコードを書きました＋デモあり。
移転したページはSEOのためにもリダイレクトしましょう
移転元ページ→移転先ページへ飛ばすことをリダイレクトといいます。リダイレクトしなければいけない状況というのもあまり遭遇しませんが、仕事としてはときどき相談されます。リダイレクトする理由は、お客様を逃さないこととSEOにあります。
スマホメニューでページ内リンクをタップするとメニューが閉じないとき
スマホメニューのコードを一から書くことはあまりありません。他ページのコードを参考にスマホメニューを設置した場合に、ページ内リンクをタップしたときにメニューを閉じないことがあります。困っている方へ解決法を紹介します。
Amazonぽい画像拡大機能「SergeLand Image Zoomer」の使い方
ときどき「Amazonみたいな画像拡大を入れてほしい」と頼まれることがあります。「SergeLand Image Zoomer」というjQueryプラグインがよく似ています。ここでは実装方法とオプションの説明をします。簡単に実装できますので参考どうぞ。