LIFE IS ONE TIME !
人生の一時を精一杯楽しもう。LIFE IS ONE JOURNEY！ Since2007.7.17
お知らせ
相互リンク申請・質問等あれば、こちらから。
当ブログ（LIFE IS ONE TIME !）は管理人「風（かぜ）」に因る趣味主体の ブログです。
2次元(ゲーム・アニメなど)・音楽（Reggae） 等に就いて書いています。
ゲームレビュー
バナーはこちらになります。 詳しくは、「About LINK」からどうぞ！
当ブログ（LIFE IS ONE TIME !）は管理人「風（かぜ）」に因る趣味主体の ブログです。
2次元(ゲーム・アニメなど)・音楽（Reggae） 等に就いて書いています。
ゲームレビュー
ココロ@ファンクション! 体験版
カルマルカ*サークル 体験版
天色*アイルノーツ 体験版
D.C.Ⅲ
リアル妹がいる大泉くんのばあい
ねこ☆こい～猫神様とネコミミのたたり～
ほしうた～Starlight Serenade～
夏ノ雨
ナツユメナギサ
終わりなき夏 永遠なる音律
花と乙女に祝福を
天神乱漫
ツンな彼女デレな彼女
Flyable Heart
ほしうた
D.C.ⅡP.C.
さかあがりハリケーン
かみぱに
リトルバスターズ！エクスタシー
カルマルカ*サークル 体験版
天色*アイルノーツ 体験版
D.C.Ⅲ
リアル妹がいる大泉くんのばあい
ねこ☆こい～猫神様とネコミミのたたり～
ほしうた～Starlight Serenade～
夏ノ雨
ナツユメナギサ
終わりなき夏 永遠なる音律
花と乙女に祝福を
天神乱漫
ツンな彼女デレな彼女
Flyable Heart
ほしうた
D.C.ⅡP.C.
さかあがりハリケーン
かみぱに
リトルバスターズ！エクスタシー
バナーはこちらになります。 詳しくは、「About LINK」からどうぞ！
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| - | 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | - | - | - | - |
- 2019年09月 （2）
- 2019年08月 （1）
- 2019年07月 （5）
- 2019年06月 （6）
- 2019年05月 （2）
- 2019年04月 （30）
- 2019年03月 （4）
- 2019年02月 （4）
- 2019年01月 （4）
- 2018年12月 （5）
- 2018年11月 （7）
- 2018年10月 （1）
- 2018年09月 （1）
- 2018年08月 （4）
- 2018年07月 （4）
- 2018年06月 （4）
- 2018年05月 （1）
- 2018年04月 （2）
- 2018年03月 （1）
- 2018年02月 （1）
- 2018年01月 （1）
- 2017年12月 （2）
- 2017年11月 （2）
- 2017年10月 （4）
- 2017年09月 （2）
- 2017年08月 （1）
- 2017年07月 （2）
- 2017年06月 （1）
- 2017年05月 （1）
- 2017年04月 （1）
- 2017年03月 （1）
- 2016年12月 （1）
- 2016年11月 （1）
- 2016年05月 （1）
- 2016年04月 （1）
- 2016年03月 （1）
- 2016年02月 （2）
- 2016年01月 （2）
- 2015年12月 （5）
- 2015年11月 （3）
- 2015年10月 （2）
- 2015年09月 （3）
- 2015年08月 （5）
- 2015年07月 （5）
- 2015年06月 （1）
- 2015年05月 （2）
- 2015年04月 （1）
- 2015年03月 （1）
- 2015年02月 （7）
- 2015年01月 （8）
- 2014年12月 （12）
- 2014年11月 （10）
- 2014年10月 （9）
- 2014年09月 （7）
- 2014年08月 （10）
- 2014年07月 （7）
- 2014年06月 （15）
- 2014年05月 （10）
- 2014年04月 （22）
- 2014年03月 （13）
- 2014年02月 （15）
- 2014年01月 （15）
- 2013年12月 （18）
- 2013年11月 （21）
- 2013年10月 （26）
- 2013年09月 （23）
- 2013年08月 （31）
- 2013年07月 （23）
- 2013年06月 （30）
- 2013年05月 （26）
- 2013年04月 （30）
- 2013年03月 （31）
- 2013年02月 （25）
- 2013年01月 （25）
- 2012年12月 （31）
- 2012年11月 （30）
- 2012年10月 （29）
- 2012年09月 （26）
- 2012年08月 （20）
- 2012年07月 （11）
- 2012年06月 （15）
- 2012年05月 （17）
- 2012年04月 （14）
- 2012年03月 （15）
- 2012年02月 （19）
- 2012年01月 （5）
- 2011年12月 （4）
- 2011年11月 （4）
- 2011年10月 （5）
- 2011年09月 （15）
- 2011年08月 （21）
- 2011年07月 （15）
- 2011年06月 （19）
- 2011年05月 （17）
- 2011年04月 （22）
- 2011年03月 （19）
- 2011年02月 （13）
- 2011年01月 （20）
- 2010年12月 （23）
- 2010年11月 （30）
- 2010年10月 （18）
- 2010年09月 （27）
- 2010年08月 （26）
- 2010年07月 （21）
- 2010年06月 （28）
- 2010年05月 （26）
- 2010年04月 （30）
- 2010年03月 （30）
- 2010年02月 （26）
- 2010年01月 （30）
- 2009年12月 （30）
- 2009年11月 （32）
- 2009年10月 （32）
- 2009年09月 （31）
- 2009年08月 （37）
- 2009年07月 （23）
- 2009年06月 （24）
- 2009年05月 （26）
- 2009年04月 （23）
- 2009年03月 （19）
- 2009年02月 （7）
- 2009年01月 （20）
- 2008年12月 （31）
- 2008年11月 （29）
- 2008年10月 （38）
- 2008年09月 （29）
- 2008年08月 （18）
- 2008年07月 （9）
- 2008年06月 （12）
- 2008年05月 （9）
- 2008年04月 （5）
- 2008年03月 （10）
- 2008年02月 （4）
- 2008年01月 （10）
- 2007年12月 （13）
- 2007年11月 （5）
- 2007年10月 （14）
- 2007年09月 （3）
- 2007年08月 （4）
- 2007年07月 （9）
ホーム > アーカイブ － 2019年04月
2019年04月06日
- 2019/04/06 レスポンシブWebデザインに対応しました
レスポンシブWebデザインに対応しました
表題の通りですが、
１ヶ月程、構想を練るところから試行錯誤を重ね、ようやくレスポンシブデザインに対応することができました。
レスポンシブデザインとは、デバイス(PC,タブレット,スマートフォン)によって、それに合った見やすいデザインに勝手に切り替わって表示されるデザインのことです。
勝手に切り替わるのがポイントで、URLが変わることはありません。
最近は、時代の流れでスマートフォンでネットを見る人が多いので、スマートフォン用に見やすいデザインに変えるHPやブログが増えています。
また、ちょうど昨年からGoogleがモバイルファーストインデックス(スマホで見やすいデザインを採用しているサイトを検索の上位に表示させる)を採用しました。
ちなみにスマホで見やすいデザインのことをモバイルフレンドリーといいます。
いつまでたってもPC用のデザインを目一杯縮小してスマートフォンに表示させるわけにはいかないということですね。
これに当ブログもいよいよ対応したということです。
ブログを構成・制御している基本的なコードはHTMLですが、これらのデザイン(文字の大きさや色、配置など)を別で制御しているものがCSSになります。
HTMLは1つで、この表示の仕方をCSSにてPC用とスマホ用にカスタマイズするわけですね。
サイトにアクセスするとそのデバイスの解像度を取得し、PC用かスマホ用のどちらかのCSSを採用することになります。
ちなみにレスポンシブデザインに移行する前はこのようなデザインでした。
スマホでアクセスしたとしても、このデザインをスマホの画面に縮小して表示していましたので文字が小さく見づらかったですね。
さて、PC版でも若干変わっている箇所があります。
① ブログのタイトルの文字が大きくなった
存在感がなかったので以前よりも少しだけ大きくしました。
② ヘッダーメニューが消えた
TOP画像のすぐ上にあるグレーのメニューですね。
これらのメニューは同じものが右カラムにありますので思い切って削除しました。
③ TOP画像とその下のコンテンツの間に空白を設けた
以前は空白がありませんでしたが、少し窮屈なので空けました。自分の好みです。
④ お知らせエリアの文章の左側に空白を設けた
以前は枠線ギリギリでしたので空白を設けました。
⑤ ハイパーリンクが設定された文字の色を青→ロイヤルブルーに変更、オンマウスで赤・下線追加
以前は青の下線付きでオンマウスでも変化がなく、圧迫感がありダサかったですが、
今回は優しい色ながらも、オンマウスでの変化がありますのでボタンとしても存在感が高まりました。
⑥ 「TOPに戻る」ボタンを追加
右下に薄いですが、ブログの一番上に移動するボタンが登場しています。
TOPでは表示されず少し下にスクロールすると表示されるようになります。
⑦ コメント投稿・編集のテキストボックスの大きさを最適化
コメントのテキストボックスの大きさを最適にしました。
あまり機会はありませんが、以前の「コメント編集」の際のテキストボックスは大きすぎて
右のカラムに被っていましたので早急に修正するべき箇所でした。
以上です。⑤と⑥が目玉でしょうか。
さて、レスポンシブデザインのメインはスマートフォン版のデザインです。
以下のサイトから、様々なデバイスで当ブログを閲覧した際のデザインを実際に見たり触ったりできます。
http://lqd.jp/lab/rwd.html?url=http%3A%2F%2Fsounannnokaze.blog113.fc2.com%2F
こちらはiPhone6 Plusで閲覧した時のデザインになります。
上記のサイトにて実際にいじっていただくと分かるかと思いますが、変更点は以下になります。
① 左右カラムを削除し、右上のドロワーメニューに必要なコンテンツのみ表示
左右のカラムが完全になくなりましたので、右上にメニューを作り、
相互リンクや記事・コメントの一覧などの主要コンテンツを格納しています。
また、左カラムにあった、カレンダーや月別アーカイブ、
アクセスカウンターなどは真ん中の「お知らせ」の下に続けて表示させています。
② 文字の大きさを少し大きくした
スマートフォンなので文字を少し大きくして見やすくしました。
ということで、メインは右上のドロワーメニューだと思います。
スマホでは必要なコンテンツだけ絞り、シンプルにしました。
また、TOPに戻るボタンもスマホでの使用を想定して設置しています。
あると便利な機能です。
このほか、様々な改良点がありますが、注意点は、過去の記事によってはレイアウトが崩れることもあるということです。
それぞれの記事自体を修正する必要が出てくるため、昔のものは仕方がないということにします。
特に動画の埋め込みには対応できていませんので、
動画の埋め込みがある記事を表示させると左右のスクロールが発生することになります。
今後の記事では、動画の方もスマホ用に最適化されるように設定していきます。
このような形で、Googleでもモバイルフレンドリーに認定されています。
(ただしFC2の標準のスマホ版テンプレートを設定していてもモバイルフレンドリーと認定されることもあるが)
ということで、デザインが良くなったのでこれからもよろしくお願いします。
１ヶ月程、構想を練るところから試行錯誤を重ね、ようやくレスポンシブデザインに対応することができました。
レスポンシブデザインとは、デバイス(PC,タブレット,スマートフォン)によって、それに合った見やすいデザインに勝手に切り替わって表示されるデザインのことです。
勝手に切り替わるのがポイントで、URLが変わることはありません。
最近は、時代の流れでスマートフォンでネットを見る人が多いので、スマートフォン用に見やすいデザインに変えるHPやブログが増えています。
また、ちょうど昨年からGoogleがモバイルファーストインデックス(スマホで見やすいデザインを採用しているサイトを検索の上位に表示させる)を採用しました。
ちなみにスマホで見やすいデザインのことをモバイルフレンドリーといいます。
いつまでたってもPC用のデザインを目一杯縮小してスマートフォンに表示させるわけにはいかないということですね。
これに当ブログもいよいよ対応したということです。
ブログを構成・制御している基本的なコードはHTMLですが、これらのデザイン(文字の大きさや色、配置など)を別で制御しているものがCSSになります。
HTMLは1つで、この表示の仕方をCSSにてPC用とスマホ用にカスタマイズするわけですね。
サイトにアクセスするとそのデバイスの解像度を取得し、PC用かスマホ用のどちらかのCSSを採用することになります。
ちなみにレスポンシブデザインに移行する前はこのようなデザインでした。
スマホでアクセスしたとしても、このデザインをスマホの画面に縮小して表示していましたので文字が小さく見づらかったですね。
さて、PC版でも若干変わっている箇所があります。
① ブログのタイトルの文字が大きくなった
存在感がなかったので以前よりも少しだけ大きくしました。
② ヘッダーメニューが消えた
TOP画像のすぐ上にあるグレーのメニューですね。
これらのメニューは同じものが右カラムにありますので思い切って削除しました。
③ TOP画像とその下のコンテンツの間に空白を設けた
以前は空白がありませんでしたが、少し窮屈なので空けました。自分の好みです。
④ お知らせエリアの文章の左側に空白を設けた
以前は枠線ギリギリでしたので空白を設けました。
⑤ ハイパーリンクが設定された文字の色を青→ロイヤルブルーに変更、オンマウスで赤・下線追加
以前は青の下線付きでオンマウスでも変化がなく、圧迫感がありダサかったですが、
今回は優しい色ながらも、オンマウスでの変化がありますのでボタンとしても存在感が高まりました。
⑥ 「TOPに戻る」ボタンを追加
右下に薄いですが、ブログの一番上に移動するボタンが登場しています。
TOPでは表示されず少し下にスクロールすると表示されるようになります。
⑦ コメント投稿・編集のテキストボックスの大きさを最適化
コメントのテキストボックスの大きさを最適にしました。
あまり機会はありませんが、以前の「コメント編集」の際のテキストボックスは大きすぎて
右のカラムに被っていましたので早急に修正するべき箇所でした。
以上です。⑤と⑥が目玉でしょうか。
さて、レスポンシブデザインのメインはスマートフォン版のデザインです。
以下のサイトから、様々なデバイスで当ブログを閲覧した際のデザインを実際に見たり触ったりできます。
http://lqd.jp/lab/rwd.html?url=http%3A%2F%2Fsounannnokaze.blog113.fc2.com%2F
こちらはiPhone6 Plusで閲覧した時のデザインになります。
上記のサイトにて実際にいじっていただくと分かるかと思いますが、変更点は以下になります。
① 左右カラムを削除し、右上のドロワーメニューに必要なコンテンツのみ表示
左右のカラムが完全になくなりましたので、右上にメニューを作り、
相互リンクや記事・コメントの一覧などの主要コンテンツを格納しています。
また、左カラムにあった、カレンダーや月別アーカイブ、
アクセスカウンターなどは真ん中の「お知らせ」の下に続けて表示させています。
② 文字の大きさを少し大きくした
スマートフォンなので文字を少し大きくして見やすくしました。
ということで、メインは右上のドロワーメニューだと思います。
スマホでは必要なコンテンツだけ絞り、シンプルにしました。
また、TOPに戻るボタンもスマホでの使用を想定して設置しています。
あると便利な機能です。
このほか、様々な改良点がありますが、注意点は、過去の記事によってはレイアウトが崩れることもあるということです。
それぞれの記事自体を修正する必要が出てくるため、昔のものは仕方がないということにします。
特に動画の埋め込みには対応できていませんので、
動画の埋め込みがある記事を表示させると左右のスクロールが発生することになります。
今後の記事では、動画の方もスマホ用に最適化されるように設定していきます。
このような形で、Googleでもモバイルフレンドリーに認定されています。
(ただしFC2の標準のスマホ版テンプレートを設定していてもモバイルフレンドリーと認定されることもあるが)
ということで、デザインが良くなったのでこれからもよろしくお願いします。
プロフィール
カレンダーPSP CONTENTS
PSPで「夏☆Kanon」を起動しよう！
PSPの液晶交換♪
PSPの液晶交換♪
リンク2
「LIFE IS ONE TIME !」バナー
是非使ってやって下さい（≧∀≦）
是非使ってやって下さい（≧∀≦）
<同盟>
<個人>
<企業・公式等>
ばなー♪
検索フォームCONTENTS
最近のコメント
相互リンクばなー！心底応援中！
バナー♪全身全霊応援中！
＞フラグですね、わかります（マテ
観る前に嫁に消されるところでした(ぁ
＞偶然ですね、私もそこで止まってます（ぁ
アイルノーツ「この先には行かせん」風Stella＞録画しているのでいつでも観られますが
フラグですね、わかります（マテ
＞柚子の最新作は天色アイルノーツで止まっています
偶然ですね、私もそこで止まってます（ぁ
元井 広夢Stella月初めに更新しておけば安心できると(ぁ
>録画しているのでいつでも観られますが
積み録画ってヤツですねここから死蔵録画になります、よくあることです(ぉ
>ゆずカーフAugustusコメントレス元井 広夢さん
冷蔵庫が普通だと思っていたのですが冷凍庫派も一定数居るんですかね・・・
＞私もこれなのでキャンディを食べるように溶かしながらいただいてます
取り敢風12年前のSOS 〜Pray For It〜コメントレス元井 広夢さん
是非皆で戦いましょう(ﾏﾃ
＞・・・違いの分からない漢がここに（ぁ
写ってるものが分かれば十分ですからね(ぁ
＞問題は寿命というものがいつまでと断言で風Augustus＞チョコレートを冷凍庫で冷やすこだわりがあるのですが
こだわりはないですが冷蔵庫で冷やす派です
＞歯が悪い・知覚過敏ワイとしてやめてほしい
私もこれなのでキャンデ元井 広夢Augustus盆はみんなどっかに帰るんだなぁと実家住まいの人が(ぁ
>大阪土産ってあまりピンと来るものがなく
冷凍品が多くなってしまう罠が(^_^；；；
>架空の美少女ゲーム「カーフAugustus久しぶりにコメントするやで。
珈琲チェーンの話題だけど、東京に行ったときにプロントのモーニングでホットコーヒーを頼んだけど、店員もせっせこせっせこ働いてたし、実まさゆき12年前のSOS 〜Pray For It〜＞私のブログで十分倒せる相手
その発想だと私のブログでも倒せることに（ぁ
＞画質が全然違いますね
・・・違いの分からない漢がここに（ぁ
＞これからまだまだ10年後20元井 広夢12年前のSOS 〜Pray For It〜人間余裕を持って生きたいわけですよねええ(：^-^)
>今の小学生は私自身はおろか私のブログよりも年下
時代の流れって怖いってことですよええ(笑)
>これが当時の記カーフ祝 12周年！コメントレス元井 広夢さん
消さない限り継続扱いになりますので(ぁ
＞信者の方が把握している説（ぁ
個人サイトの方が解説がしっかりしている説(ぁ
＞私、永遠の18歳の当時にそのよ風Which Do You Like Better, i or i？コメントレス元井 広夢さん
＞２代前のパソコンのマウスをずっと使い続けているために長年、使い続けているので壊れると困ります（汗）
パソコンの周辺機器は多いのでそれぞれが壊れ始風祝 12周年！＞当ブログは開設12周年
継続は力なりですね
＞これ公式でもちゃんと把握できてんのかな(ぁ
＞できてないでしょうね(ぁ
信者の方が把握している説（ぁ
＞中学時代女の子元井 広夢祝 12周年！12年というと小学卒業できるぐらいですからすごいなぁと(^_^；；；
>常に半額セールといった感じで
曲芸商法は不滅ですから(ぁっ
>『からかい上手の高木さん 2期』カーフWhich Do You Like Better, i or i？２代前のパソコンのマウスをずっと使い続けているために長年、使い続けているので壊れると困ります（汗）
＞今回のギャラリー更新ですが、背景だけｗ
背景で勝負するので元井 広夢Which Do You Like Better, i or i？マウスって何だろというトラックパッドしか使ったことない人です(ぁ
>今回のギャラリー更新ですが、背景だけｗ
更新ネタの節約ですねわかります(ぁ
>貧乏人の好むカーフHand in Handコメントレス元井 広夢さん
＞ホットプレートではなくたこ焼き機だったと
たこ焼き器にもなるのですが、たこ焼きがメインになってしまうかもしれないですね
＞まだ手を出していない輩風Birth Monthコメントレス元井 広夢さん
＞子ども２人に体力を吸われた説
自分が産んだわけではないのですが影響があったのね(ぁ
＞両立できるのが一番いい形ですね
ここから一気に形勢逆転して趣風Hand in Hand＞個人的には早くたこ焼きが作りたい
ホットプレートではなくたこ焼き機だったと
＞【ラブライブ！】初めてラブライブを知ったときの感想挙げてけ
まだ手を出していない輩元井 広夢Hand in Hand二回使ったら押し入れにしまい込むフラグアイテムだ(まて
>何かと思えばホットプレートです(ぇ
>初めてラブライブを知ったときの感想挙げてけ
先生出番ないのかこれカーフ