1. Home
  2. サイト運営情報
  3. アップデート
  4. サイト表示をレスポンシブWebでスマホ用に対応させました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
コスパ最高なドライブレコーダーAPEMAN C550を使ってみた!

コスパ最高なドライブレコーダーAPEMAN C550を使ってみた!

ここ近年では車を運転中のトラブルなどがよく話題になっていますよね。あおり運転など危険な運転をされたときのためにもドライブレコーダーはあったほうがいいです。ドライ...

新色ブルーが発売!Tribit StormBoxスピーカーを2台ペアリングして使ってみた!

新色ブルーが発売!Tribit StormBoxスピーカーを2台ペアリングして使ってみた!

ちょっと前の記事で完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!という記事でTribit StormBoxスピーカーについてのレビュー記事を書きました...

Zhiyun Crane-M2が更に値引き!ジンバルが届いたので確認してみた!

Zhiyun Crane-M2が更に値引き!ジンバルが届いたので確認してみた!

先日の記事でアメリカのAmazonでZhiyun Crane-M2の新品同様品が激安で販売されているという記事を書きましたが、なんとさらに値引きされて129ドルで販売されています。価格...

BOOK☆WALKERで50%還元の春のホン祭りキャンペーンを実施中!初回購入は100%還元!

BOOK☆WALKERで50%還元の春のホン祭りキャンペーンを実施中!初回購入は100%還元!

BOOK☆WALKERでは、春からの新生活、本のある暮らしを楽しんでもらいたいというそんな思いを込めて、「春のホン祭り!全会員コイン50%還元キャンペーン」を実施しています...

激安ShopDDにAmazonタイムセール検索機能などを追加するアップデートを実施!

激安ShopDDにAmazonタイムセール検索機能などを追加するアップデートを実施!

激安特価情報サイトの激安ShopDDが公開してから一ヶ月ちょっと経ちましたが、今回Amazonのタイムセールの検索機能を追加しました。Amazonのタイムセールって結構安いのもあ...

3軸ジンバルのZhiyun CRANE M2を安く購入する方法!

3軸ジンバルのZhiyun CRANE M2を安く購入する方法!

最近カメラ関連でジンバルが欲しくて色々探していたのですが、持ち運びもしやすいサイズ感でミラーレス一眼もスマホもアクションカメラも載せられる優秀なジンバルを見つけ...

メルカリ・メルペイ新規登録の招待コードで最大1500ポイントをもらう方法!

メルカリ・メルペイ新規登録の招待コードで最大1500ポイントをもらう方法!

最近メルカリを初めて使う機会があったのですが、その際にメルカリとメルペイに新規登録する際に招待コードを使うと最大1500ポイント(1500円分)をもらえたので、その方法に...

ジャンプやコロコロなどのバックナンバーを無料配信!臨時休校の影響を受け

ジャンプやコロコロなどのバックナンバーを無料配信!臨時休校の影響を受け

先日政府による新型コロナウイルス感染拡大防止策として、全国の学校の臨時休校が決定したばかりですが、それに伴い集英社は「週刊少年ジャンプ」、小学館は「コロコロコミ...

コマンドプロンプトでIPアドレスとMACアドレスのリストを表示する方法!

コマンドプロンプトでIPアドレスとMACアドレスのリストを表示する方法!

今回はローカルネットワーク内にある端末をコマンドプロンプトを使って、IPアドレスとMACアドレスをリスト化して表示する方法を紹介したいと思います。表示可能なのは同一...

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