Web制作をしていると、PCだとこの順番のレイアウトでいいけれど、
スマホだとちょっと変えたほうがいいかも・・なんてことが
たまにあるかと思います。(少なくとも僕はありました)
そんな時、jQueryで簡単にその順番を変更することが可能ですので、ご紹介します。
jQueryを予めご用意の上、下に進みましょう。
beforeメソッドはその名のとおり、入れ替えたい要素をその対象要素(引数)の前に持ってくるものです。
[javascript] $(function(){ $('#1').before($('#2')); }); [/javascript]
これで#2が#1の前(上)に表示されるようになります。
逆にafterメソッドは対象要素(引数)を入れ替えたい
要素の後ろに持ってくるものです。
[javascript] $(function(){ $('#2').after($('#1')); }); [/javascript]
これも#2が#1の前(上)に表示されるようになります。
[javascript] $(function(){ $('#2').after($('#1'),$('#3'),$('#5'),$('#4'),$('#6')); }); [/javascript]
引数は複数設定することが可能です。
これで表示される順番は2,1,3,5,4,6となります。
アクセスしたデバイスが
iPod,iPhone,Androidの場合といった
条件分岐を行い、上記を挿入すれば良いです。
[javascript] if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){ //ここに書いた処理はスマホやipadで閲覧時に有効となります。 }else{ //それ以外(PC)で閲覧時に有効となります。 } [/javascript]
これらを組み合わせて書くと、
スマホでアクセスした場合と
PCでアクセスした場合の表示順を切り替えることが
可能になります。
こちらにデモをご用意しましたので、
PCとスマホでそれぞれアクセスしてみてください。
コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。
ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。
採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。
検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。
近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。
私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。
ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。
ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。
お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。
0952-20-1501(佐賀)
092-717-3446(福岡)
営業時間:9:00~17:00(休業日:土日祝)