• このエントリーをはてなブックマークに追加

レスポンシブって何? シンプリシティのレスポンシブちょっとだけわかった!

  • このエントリーをはてなブックマークに追加

OLYMPUS DIGITAL CAMERA

昨日、私のサイトの画面が変わってしまってビックリ!

htmlが崩れてしまったのかと思った。

というのも、右側の新着記事がなくなってしまっている(-_-;)

bikkuri-crop

この前、ブログで</div>が抜けていて、サイトが崩れてしまったことがあった。

またか、でもどうやって直したらいいんだろう?

と思っていたら、どうやらこれはこのシンプリシティの機能らしい(^_-)-☆

レスポンシブとは

プラウザの幅が狭くなるとこのように画面が変わり、幅を広くしたら、元にもどりホッとした。

そして、レスポンシブという機能のことが少しだけわかった。

サイト作成にとても便利なシリウスにも、パソコン用、モバイルの/m/、iphonの/iphon/とhtmlが3つできあがる。シリウスは自動的にこれらが生成されるので、サイトを作る側にとってはなんの不便もないけれど、

レスポンシブとは、一つのhtmlで、スクリーンのサイズ(画面の幅)を認識してcssだけを切り替えることで、レイアウトを調整することができるという技術。

勝手にやってくれる(^_-)-☆

すごい!

だから私が画面の幅を狭くしてしまったので、右側の新着記事の行が、下へ移動していた。

スマホやタブレットなどさまざまなスクリーンサイズでストレスなく見てもらえるということが可能になっているのだとわかった。

完全レスポンシブ機能にしてみたら

何もカスタマイズしなくても、シンプリシティは準レスポンシブデザインになっている。

それが、バージョンアップで完全レスポンシブデザインにできるようになったそう…

完全レスポンシブデザインにするには、

外観 カスタマイズ レイアウトの設定

resuponsive

完全レスポンシブデザインにする にチェックを入れる

サイトを見てみると、

resuponsive1

なんとアドセンス広告が一番上に来ていました。

きっとこれも調整できるのでしょうが、アドセンス広告は後で位置を変更しようと思っていたし、なんだかサイトを開いた途端アドセンス広告ではまだ気がひけるので、「完全レスポンシブデザインにする」のチェックをはずして、元の準レスポンシブデザインに戻しました。

とりあえず、今日はレスポンシブデザインについて、少し利口になった私でした!

 

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です