1. Home
  2. サイト運営情報
  3. アップデート
  4. サイト表示をレスポンシブWebでスマホ用に対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
リモコン付きUSB電源LEDテープ(16色)でPCデスクをカスタマイズしよう!

リモコン付きUSB電源LEDテープ(16色)でPCデスクをカスタマイズしよう!

今回は以前紹介した最強のPCデスクである「FLEXISPOT 電動式昇降デスク E3シリーズ」をカスタマイズするためにUSB電源で動作するLEDテープをPCデスクにつけてみました。LED...

Lecone Type-C ハイレゾ対応イヤホンを使ってみた!(限定クーポンあり)

Lecone Type-C ハイレゾ対応イヤホンを使ってみた!(限定クーポンあり)

今回紹介するのはLeconeのUSB Type-Cイヤホンを紹介したいと思います。近年スマホのイヤホンジャックが廃止されつつあり、今後の主流はType-CイヤホンやBluetoothイヤホン...

VideoProcでYoutubeなどの動画をダウンロードする方法!

VideoProcでYoutubeなどの動画をダウンロードする方法!

今回はVideoProcの機能を紹介するシリーズの第三弾で、今回はVideoProcの動画ダウンロード機能についての紹介したいと思います。第一弾ではVideProcの録画機能を使ってテレ...

Lecone モバイルバッテリー&LEDライト化粧鏡を使ってみた!(クーポンコードあり)

Lecone モバイルバッテリー&LEDライト化粧鏡を使ってみた!(クーポンコードあり)

今回紹介するのはLeconeが販売している4000mAh大容量モバイルバッテリーにLEDライト付きメイクアップミラーが搭載されている「HPB0066A」です。現代社会では常にスマホなど...

Google Chrome v76からオムニバーでPWAのインストールができるように!

Google Chrome v76からオムニバーでPWAのインストールができるように!

Gooogle Chromeの最新版であるバージョン76からオムニバーでPWAのインストールができるようになりました。これによりPC版でも簡単にPWA対応サイトのPWAインストールを行う...

7時間限定で「竹書房マンガ全作品読み放題」を実施することを発表!

7時間限定で「竹書房マンガ全作品読み放題」を実施することを発表!

電子書籍サイトのBOOK☆WALKERでは、2019年8月5日(月)の19時から7時間限定で竹書房マンガ全作品読み放題キャンペーンを実施することを発表しました。竹書房といえば、ポプテ...

フォルダ内のファイルサイズを表示できる「Folder Size for Windows」!

フォルダ内のファイルサイズを表示できる「Folder Size for Windows」!

Windowsを使っていてよく不便に思うのがエクスプローラーでフォルダ内のファイルサイズの合計を表示できない点です。普通のファイルは一覧表示すればファイルサイズが出ま...

VideoProcのDVDコピー・リッピング機能で簡単にバックアップ!

VideoProcのDVDコピー・リッピング機能で簡単にバックアップ!

前回はVideProcを使ってクロマキー合成を行ってみたり、VideoProcの録画機能を中心に紹介しました。今回はVideoProcの機能を紹介するシリーズの第二弾で、今回はVideoProc...

Amazonで送料込み50円のHDMI延長コネクターを買ったみた!

Amazonで送料込み50円のHDMI延長コネクターを買ったみた!

前回の記事に引き継きAmazonで中国発送の安いものシリーズを買ってみた記事です。前回の記事ではアイマスクを送料込み50円で購入したのですが、今回はHDMI延長コネクターの...

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

Popular Article

Access Ranking

Now Loading...

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