JavaScript,jQuery [InstagramGraphAPI4.0対応] Instagramの写真を埋め込む方法
※InstagramGraphAPIが5.0になりました。以下記事を参考下さい。気付いたらInstagram Grap APIのバージョンが4.0になっていました。ということで、これを使ってウェブサイトにInstagramの写真を自動更新表...
JavaScript,jQuery 
ビンゴカード スマホでビンゴカードの☆部分に画像アップロード機能を追加しました
スマホでビンゴカードの☆部分に、画像をアップロードできる機能を追加しました。ファイルを選択で、ローカルから画像を選ぶと、自動的に下画像のように☆部分に画像が円形にトリミングされて表示されます。canvasで描画しているだけなので、何かに使用...
その他 .htaccessでIPアドレスの制限をかける方法と海外ブロック＋検索BOTだけ許可しない理由
たまにお客様から、変なIPからの大量アクセスでサイト見れなくしたよ、ってサーバー会社から連絡が来たんですけどどうすれば？！と連絡を頂きます。そういうときは、とりあえずログから調査して、該当のIPを.htaccessに以下のように記述をしてブ...
ビンゴカード スマホでアクセスするだけでビンゴカードとして利用できます
以前に別ドメインで作っていたビンゴカードサイトを、こちらのドメインに統合することに致しました。たまにアクセスがグーンとあったりはしますが、基本的には閑古鳥なサイトなため、ドメイン費用節約のため、利用されていた方々には申し訳ないですが、こちら...
HTML/CSS 古いウェブサイトに手を加える際はまずmetaタグを見る
リニューアルするような予算もやる気もないサイト、よくあります。そんな古ーいウェブサイトを更新する際には注意が必要な時があります。IEでflexが効かない！ググって解決方法試しても全然ダメ！metaタグでIEのレンダリングモードを指定している...
HTML/CSS 親要素から子要素をはみ出して画面幅いっぱいにする方法
下の画像の【A】を親要素からはみ出して横幅を画面幅いっぱいにしたい、というときには、以下CSSを適用します。<div class="c-box--1"> <div class="c-box--1__child">はみ出したい子要素</div...
HTML/CSS SVG画像を背景指定した際にサイズ指定が反映されない場合の解決方法
SVG画像を背景に設定し、CSSでbackground-sizeを指定しても反映されない場合は、以下コードをSVGファイルの<svg>タグに追記すると解決します。preserveAspectRatio="none"SVG画像、超便利ですよね...
JavaScript,jQuery bxSliderで縦スワイプを無効にする方法
たまにややこしい要望があるときはスライダーを自作しますが、基本的には「bxSlider」を使用しています。ただ、1つ問題なのは、スマホ時にスワイプしていっていると、スライダーの上でスワイプが効かなくて、イーッ！となります。ファーストビューで...
HTML/CSS Google Material Iconsの使い方と疑似要素で使う方法（IE11対応）
Googleが提供しているアイコンフォトで、Google Material Iconsというものがあります。Fontawesomeが登録制となってしまったので、登録とかの手間が面倒だという方は、ちょっと数が少なめですがこちらを使うのもよいか...
HTML/CSS svgをuseタグで読み込んだ時にpath毎に色を変える方法（※IE以外）
svgをuseタグで読み込んだときに、なんとかpath毎に色が変えたくて試行錯誤していたところ、大変素晴らしい記事を見つけました。参考：SVGアイコンをCSS変数とか併せて良さげに使う<svg xmlns="" class="test-sy...