1. Home
  2. サイト運営情報
  3. アップデート
  4. サイト表示をレスポンシブWebでスマホ用に対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
ロジクールのSetPointを拡張する「SetPointPlus」で様々な機能を追加しよう!

ロジクールのSetPointを拡張する「SetPointPlus」で様々な機能を追加しよう!

ロジクールのマウスのボタン設定などを行うソフトであるSetPointですが、このSetPointを拡張して様々な機能を追加することが出来る「SetPointPlus」を紹介したいと思います...

日本未発売のコスパ最高Android Oneスマホの「Xiaomi Mi A1」を使ってみた!

日本未発売のコスパ最高Android Oneスマホの「Xiaomi Mi A1」を使ってみた!

前々から気になっていたAndroid Oneを入手したのでレビューを書きたいと思います。ちなみに今回のAndroid Oneスマホは日本では未発売でコスパ最強の「Xiaomi Mi A1」です。...

GearBest.comを使って海外からスマホやガジェットなどを安く買い物をする方法!

GearBest.comを使って海外からスマホやガジェットなどを安く買い物をする方法!

海外からスマホやガジェットなどを安く輸入したいときに便利なサイトのGearBestを紹介したいと思います。日本では売っていないような珍しいスマホやタブレット、周辺機器な...

サイトのデザインをVer3.5にアップデートしました!

サイトのデザインをVer3.5にアップデートしました!

本日よりShopDDのテンプレートデザインをVer3.5にアップデートしました。今回のアップデートでは見た目はあまり変化がないですが、内部コンテンツを大幅に書き直して高速化...

radikoや超!A&G+など様々なネットラジオを録音できるソフト「AnGe4u」がすごい!

radikoや超!A&G+など様々なネットラジオを録音できるソフト「AnGe4u」がすごい!

今はラジオもネット進出している時代で、昔以上にラジオは身近な存在になっています。そんな中でもリアルタイムで聞くのは難しいことも多々あり、録音してあとで聞きたいと...

ブラウザ上で簡単にロゴをデザインできるサイト「DesignEvo」が便利!

ブラウザ上で簡単にロゴをデザインできるサイト「DesignEvo」が便利!

DesignEvoは、誰でも簡単に魅力的でユニークなロゴを創り出すために、4000以上のテンプレートを備えた無料のオンラインロゴ製作サイトです。ブラウザを使ってWebサイト上で...

コピー禁止の保護されたPDFファイルから簡単にテキストをコピーする方法!

コピー禁止の保護されたPDFファイルから簡単にテキストをコピーする方法!

PDFファイルと言えば幅広く使われているファイル形式ですが、中にはセキュリティ保護によって内容をコピーできないPDFも存在します。今回はPDFセキュリティ保護の「内容の...

Amazonプライム特典の「Twitch Prime」で毎月無料でゲームをもらう方法!

Amazonプライム特典の「Twitch Prime」で毎月無料でゲームをもらう方法!

Amazonプライム会員の特典として提供されている「Twitch Prime」では、追加料金なしで毎月ゲームが無料で手に入る会員限定のまったく新しいキャンペーン、「Primeでゲーム...

コスパ最強のdtab d-01JがついにAndroid 7.0へアップデートされました!

コスパ最強のdtab d-01JがついにAndroid 7.0へアップデートされました!

昨年購入したコスパ最強タブレットのdtab Compact d-01JがついにAndroid 7.0 Nougat(ヌガー)へアップデートが開始されました。タブレットの場合は画面も大きいのでスマホ以...

PS3のコントローラーをXInput Wrapper for DS3でパソコンに簡単に接続する方法!

PS3のコントローラーをXInput Wrapper for DS3でパソコンに簡単に接続する方法!

以前このブログではパソコンとPS3コントローラーをBluetooth接続して遊べるMotionJoy!という記事で紹介した通り、MotioninJoyを使ったPS3コントローラーをパソコンで使う...

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...