JavaScript

仙台・宮城の皆さんこんにちは！ 今日は、JavaScriptで「リファラ」を取得する方法について解説します。 リファラって何？ 確認のためにも、最初にリファラについて簡単に触れておきます。リファラというのは「ユーザーが直前に表示していたページのURL」ということです。 つまり、このリファラを取得すれば、 検索エンジンから流入してきたユーザーだけに、広告を表示！ サイト内の特定のページから移動してきた人だけに、テキストを表示！ みたいなことができるようになります。では具体的な方法を解説していきます。 document.referrerでリファラを取得する javaScritpでは、document.referrerでリファラを取得することがきます。 document.referrer 実際に使う場合は、以下のような感じで使用します。 window.onload = function() { var ref = document.referrer; if(ref.match(/google/)) { //google経由のユーザー向け } else { //それ以外 } }; これは「goole経由でサイトに来てくれた人に特定の処理をしたい！」という場合のコードになります。それでは、1つづつポイントを解説していきます。 まず2行目をご覧ください var ref = document.referrer; document.referrerを変数refに格納しています。 そして肝になるのがこの3行目のref.match(/google/))という条件分岐で使用しているmatchです。 if(ref.match(/google/)) { matchは引数に指定した文字列が含まれていた場合はtrueとなり「配列」を返します。 例では、リファラを格納したrefという変数に「google」という文字列が含まれていたらtrue（配列）を返すという命令です。 /google/の部分の正規表現については、奥が深いので解説は省略しますが、もちろんもっと複雑な条件を使用することもできます。 まとめ リファラを取得すると例で挙げたような処理が可能になります。他には、、、正直使う場面は少ないですが、JavaScriptで「ユーザーが直前に表示していたページのURLを取得できるんだぞ」と覚えておくと何かの時にいろいろなコードと組み合わせて実現したい処理が可能になるかもしれません。知識として覚えておいてもらえると嬉しいです。 それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！

仙台・宮城の皆さんこんにちは！ 今夜はbxSliderのリンクが反応しない時の解決方法です！「bxSlider」はすごく簡単にスライドショーを作成することができます。有名なjQueryのプラグインなのでご存じの方も多いと思います。 このページに辿りついた人は以下のようなhtmlになっていると思います。 <ul class="bxslider"> <li><img src="img/img01.jpg"></li> <li><a href="/service"><img src="img/img02.jpg"></a></li> <li><img src="img/img03.jpg"></li> </ul> いろいろ検証すると、どうやらデスクトップのChromeだけ、このaにタグが全く反応しないことが解りました。 解決方法 反応しなくなってしまったら、応急処置としてとりあえず以下のようにjavascript部分に1行加えてください。 $(function(){ $('.bxslider').bxSlider({ auto: true, slideWidth: 640, minSlides: 3, touchEnabled: false //変更点 }); }); touchEnabledは初期値ではtrueになっていますが、これをfalseに変更します。これで反応するようになると思います。 ヒント！ touchEnabledは左右のスワイプでの画像切替について設定するためのオプションです。PCの場合はドラッグになります。 これでも反応しなかったら… 最新版をダウンロード bxSliderの公式サイトから最新バージョンをダウンロードして差し替えることで解決する場合が多いです。 slickに切り替えちゃう 同じjQueryのスライダー系のプラグインに「slick」というものがあります。現在はbxSliderよりもポピュラー存在になっている気がします。この機会にslickに切り替えるというのも手です。 まとめ いかがでしたか？今回はChromeのバージョンアップで突然動かなくなったのではないかと推測しています。もし以前に作ったサイトでbxSliderを実装しているサイトがあるならChromeでも正常に動くか試してみてください。リンクが動かないことによって大きな機会損失に繋がっているかもしれません！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！

仙台・宮城の皆さんこんにちは！今日はページ内リンクで特定の場所までスムーススクロールさせる方法について解説します。 当サイトも利用してますが、「ページトップ」や「記事の目次」などでよく利用するすることになりますね。 基本的なスクリプト これが基本的なJavaScriptです。2行目の$('a[href^="#"]').click(function()に注目してください。 これは「先頭に#のついたaタグがクリックされたら…」という命令になります。 $(function(){ $('a[href^="#"]').click(function(){ //スクロールのスピード var speed = 500; //リンク元を取得 var href= $(this).attr("href"); //リンク先を取得 var target = $(href == "#" || href == "" ? 'html' : href); //リンク先までの距離を取得 var position = target.offset().top; //スムーススクロール $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); htmlは以下のような感じで先頭に#をつけてdivタグの名前を設定すれば、いいだけです。 <div id="header">ヘッダー</div> 略 <div id="footer"> <a href="#header">トップに戻る</a> </div> もちろんブラウザの一番上に戻る時だけ使うだけじゃありません。 目次などで、ページ内の途中にスクロールさせる場合でも、使用することができます。 <div id="mokuji"> <ul> <li><a href="#contents1">コンテンツ1</a></li> <li><a href="#contents2">コンテンツ2</a></li> <li><a href="#contents3">コンテンツ3</a></li> </ul> </div> <div id="contents1"> コンテンツ1の内容 </div> <div id="contents2"> コンテンツ1の内容 </div> <div id="contents3"> コンテンツ1の内容 </div> ヘッダーが固定の場合 当サイトもそうですが、ヘッダーが固定して表示される場合は上記の方法だと、先頭の部分がヘッダーと重なって隠れてしまいます。 ということは、ヘッダーの高さを引いて距離を取得する必要があります。 $(function(){ $('a[href^="#"]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); //ヘッダーの高さを取得 var header = $('header').height(); //ヘッダーの高さを引く var position = target.offset().top - header; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); 9行目でpositionに目標を代入する際にtarget.offset().top - headerでヘッダーの高さを引いてから代入しています。 まとめ ページ内をアンカーリンクで移動させる場合、パっと移動させるよりもスムーズにスクロールさせて移動する方が、ユーザビリティの観点からも親切だと思います。 導入していない方は、是非この機会に検討してください！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！