1. Home
  2. サイト運営情報
  3. アップデート
  4. サイト表示をレスポンシブWebでスマホ用に対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
PainterやVEGASなどが最大91%OFFのVEGAS&Corel全製品値下げキャンペーンを実施中!

PainterやVEGASなどが最大91%OFFのVEGAS&Corel全製品値下げキャンペーンを実施中!

現在ソースネクストの公式サイトでは、PaintShop、WinDVD、Painter、VideoStudio、CorelDRAWなどのCorel全製品とVEGAS Pro、ACID Pro、SOUND FORGE、SPECTRALAYERSなどのVE...

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

今回はYouTubeで出くわしたHTTP Error 400(Bad Request)が出て、YouTubeにアクセスできなくなってしまった時の解決方法を紹介したいと思います。この現象が発生してしまう...

日本郵便が無償で提供する年賀状ソフト「はがきデザインキット2019」がおすすめ!

日本郵便が無償で提供する年賀状ソフト「はがきデザインキット2019」がおすすめ!

今年も残すところあと30日間を切り、もうそろそろ年賀状を用意して送らないといけない時期ですね。そこで今回は年賀状作成ソフトについて書きたいと思います。ちなみにみな...

ついにFC2ブログの独自ドメインがSSL対応したのでSSL化しました!

ついにFC2ブログの独自ドメインがSSL対応したのでSSL化しました!

ついにFC2ブログで独自ドメインを使ってるブログもSSLに対応しました。FC2のサブドメインを使っているブログは2017年10月からSSL化されていましたが、有料プランである独自...

CASIO G-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスからしてみた!

CASIO G-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスからしてみた!

今回はCASIOの時計のG-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスから申請した時の流れを書きたいと思います。G-SHOCKタフソーラーの二次電池の場合は普通の時...

KADOKAWAの電子書籍が半額でさらにポイント50倍のニコニコカドカワ祭りがものすごい!

KADOKAWAの電子書籍が半額でさらにポイント50倍のニコニコカドカワ祭りがものすごい!

現在電子書籍ストアのBOOK☆WALKERで開催されているニコニコカドカワ祭り2018でものすごいキャンペーンを実施中です。KADOKAWA作品が19000点が半額でさらに45000点がコイン5...

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

以前に海外のAmazonを有効活用して安く買い物をしよう!という記事で簡単に海外のAmazon.comから輸入する方法を紹介しましたが、今回は海外Amazonで購入したものが不良品だ...

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

WonderFox Soft, Inc.は同社製品である新しいWonderFox HD Video Converter Factory Proを含む合計8製品のライセンスキーを無料配布するWonderFox 2018 Back to School Par...

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

みなさんもよく使っているであろうブラウザのChromeですが、タブを沢山開いているとメモリの消費量がすごいことになることがよくありますよね。そんな時におすすめなのがCh...

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

今回はWindows・Macどちらでも使える無料で使える3DキャラメイカーのVRoid Studioを紹介したいと思います。3D制作の知識がなくても誰でも簡単に自分だけのオリジナル3Dのキ...

NetaGear RSS News

Now Loading

Article

サイト表示をレスポンシブWebでスマホ用に対応させました!

SPmode_site_design_000.png

このサイトもここ最近ではスマホでのアクセスが増えてきたということもあり、今さらながら現在のサイトデザインをスマホ用デザイン(レスポンシブWebでブラウザの表示領域で変化)に対応しました。年末から少しずつ時間を作って制作していたのですが、やっとのこと完成したのでついに公開です。

以前までもタブレット用の表示はあったのですが、スマホからこのタブレットモードの表示を見るとちょっと見にくいという問題があったのでそれを解決しました。これによりPC用、タブレット用、スマホ用の表示が可能になり、より閲覧端末に合わせた見やすい表示が可能になりました。
どのモードから見てもコンテンツを削ることなく、可能な限り同じ表示ができるように心がけました。たまにスマホ用にすると表示が減っていたりするサイトがあったりするのですが、それは避けたかったので結構無理やり作っている部分もあります。表示は以下の3つです。

PC


SPmode_site_design_003.png

これはPCモードです。パソコンで見る場合は通常このPCモードでの閲覧になると思います。

Tablet


SPmode_site_design_002.png

これはタブレットモードです。タブレットがメインになりますが、それ以外にもブラウザのサイズが小さい状態でPCから見た場合やスマホを横で表示した場合などもこちらの表示になります。

SmartPhone


SPmode_site_design_001.png

これは今回新しく追加されたスマホモードです。スマホの閲覧用に小さいサイズに対応しているので、今まで以上にモバイル端末からの閲覧がしやすくなっています。左がトップ画面で、右が記事画面です。タブレットモードよりも幅が狭く文字の大きさ的にも以前より見やすくなっていると思います。

今回の個人的感想




ついにスマホ表示を実装しました。本来はスマホモードの実装はもっと早く行う予定だったのですが、思いのほか時間がかかってしまいました。予定ではデザインを一新したときに対応する予定だったのですが、レスポンシブWebでの実装が思いのほか面倒だったので、PCとタブレット表示だけしか実装せず公開して、スマホ表示は放置してしまいました。

しかし、スマホ表示をいつまでも放置するわけにもいかないので、やっと実装に踏み切ったのですが、ここ最近リアルが忙しいこともあり、思いのほか時間がかかってしまいました。でも、これでスマホで見てもちゃんとしたサイズで見ることができるようになったので良かったです。

今後はぜひスマホからもShopDDをご活用ください。

Related article

COMMENT TO THIS ENTRY

自分だけの環境かもしれませんが、windowsのFirefoxだと「今回の個人的感想」あたりから途切れて最後まで読めなくなってます。そしてコメントもカケナイです。
一応セーフモードで確認してみたんですが同様の症状なのでアドオンは関係ないかと思います。

10673

>>10673さん
Firefoxでの表示バグ問題のご報告ありがとうございます。現在は修正済みなので正常通り表示されていると思います。また何か問題がございましたら気軽にコメントを頂けると幸いです。

10674

Most Popular

Now loading...

Social Links

Sponsored Link

MENU

NetaGear

Pure Css Design

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位50位が表示されます。今ならリンクするだけで簡単に上位に表示されます。

Amazon

Now Loading...