LIFE IS ONE TIME !
人生の一時を精一杯楽しもう。LIFE IS ONE JOURNEY！ Since2007.7.17
お知らせ相互リンク申請・質問等あれば、こちらから。
当ブログ（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 | - | - | - | - |
- 2020年07月 （2）
- 2020年06月 （3）
- 2020年05月 （2）
- 2020年04月 （2）
- 2020年03月 （2）
- 2020年02月 （2）
- 2020年01月 （2）
- 2019年12月 （2）
- 2019年11月 （2）
- 2019年10月 （3）
- 2019年09月 （3）
- 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
最近のコメント相互リンクばなー！心底応援中！
バナー♪全身全霊応援中！
涼しくて快適な大会になっていた可能性・・・
＞ただし登場人物の大半がクズなので真剣には観ないほうがいいです
逆にこれで人気が出る元井 広夢インスタ9年ですインスタとかそういうのやってないし別に投稿数競ってもだしぃ(ぉ
>『レンタルカノジョ』とかこんなの利用して虚しくならないの？？
NTRできるじゃないですかと言ってカーフ 祝 13周年！コメントレス元井 広夢さん
ありがとうございます、今後とも宜しくお願いします！
＞こうしてマウントを取っていくのですね（マテ
なお、パイセン面するも華麗にスルーされる模様(ぉ
風 祝 13周年！１３周年おめっとさんです♪
＞因みに私は3年前に
こうしてマウントを取っていくのですね（マテ
＞【衝撃】彼氏にしたい職業ランキング2020がこちらｗｗｗ
結婚したい職業元井 広夢 Otome 2K20RE： 元井 広夢さん＞学生時代から使っているコートですかね・・・何年物かは年がばれるので以下自粛（マテ
コートも永遠の18歳だったりして（ﾏﾃ
＞一昔なら１作品に絶対に１ルートはありま風アインシュタインより愛を込めてRE：カーフさん＞年齢制限すると意識低く思われるからなぁ(ぉ
意識は高いという旨、注意書きが必要ですね(ﾏﾃ
＞アインシュタインがただのアイボになってる件(ぉ
アインシュタイン「まず風 祝 13周年！すごいなぁもうそんなんだとかツッコミしかできない人だったりします(^_^；；；
>スーパースターの方はアニメが主体となるので
五人に減らしてるけどアニメで追加要員カーフ Otome 2K20＞一番長く使っている物は何年物？
学生時代から使っているコートですかね・・・何年物かは年がばれるので以下自粛（マテ
＞このギャルゲーに「結婚」はちゃうんよなーっ元井 広夢リトバスVinylコメントレス元井 広夢さん
＞地元はほとんどが首都圏から持ち込まれたものでした
東北は岩手が0人ですし、首都圏との移動が無ければ全県0もあり得たエリアかもしれないですね・・・
風アインシュタインより愛を込めて年齢制限すると意識低く思われるからなぁ(ぉ
>なかなか良い感じの世界観やんけ・・・
アインシュタインがただのアイボになってる件(ぉ
>是非そのおしゃれ感を
ヲサカーフリトバスVinyl＞緊急事態宣言が解除
地元はほとんどが首都圏から持ち込まれたものでした
なお、自ら感染しに行った場合は無事にネットで晒されています（汗）←
＞祝日が全くない
なお、元井 広夢Plantronicsコメントレス元井 広夢さん
＞１週間で１日３０人超えるというお約束（汗）
緊急事態宣言が明けてから2週間後が怖いです・・・
＞都心から帰ってくる方にも怖いですしね
盆には収まっ風リトバスVinyl他のとこが落ち着いてるので東京ばかりが目立つようになりましたね（汗）
>さて、6月と言えば
サービス業としては一息つける時期ですはい(ぉ
>この圧倒的な所有感カーフPlantronics＞5/25に緊急事態宣言が解除され
１週間で１日３０人超えるというお約束（汗）
＞都心に行くのは非常に怖い
都心から帰ってくる方にも怖いですしね
＞サイドミラーの見方元井 広夢Plantronicsさっさと働け会社行けですねわかります(ぉ
>何かというとワイヤレスヘッドセットです。
しかし耐水性はなかったという闇ですね(まて
>今作も例に漏れずきっちり音カーフR.I.P. 応援バナーRE：カーフさん在宅で実質暇な人は良いんですけどね・・・
＞みんなついったーとかで楽しちゃうからなぁと(^_^;;;
RTするだけで完了とは近頃の若いｙ(ry
＞ライブドアもがんぱってるか風Sparking or Fragileコメントレス元井 広夢さん
結局どの職種でもコロナの影響はボーナス等で調整されそうですね・・・
＞ムサシさん、ダイユーエイトさん、チャンピオンさんの地元＞なお、上の三店はな風R.I.P. 応援バナー在宅できる人はいいなぁと思ってたり(ぁ
>HPやブログによる応援バナーキャンペーンが
みんなついったーとかで楽しちゃうからなぁと(^_^;;;
>FC2さん必死に耐えてほカーフSparking or Fragile＞10万円の給付金でiPad Proを買おうとしてたワイ、悔い改める
お給料が減っているのでその補填になります＞なお、就業時間は増えている模様（汗）←
＞三大ホームセンター元井 広夢Sparking or Fragileまあ地道にやってくしかないですわなコロナはと（汗）
>サガプラネッツの最新作が発表されました
もう合同キャンペーンやらないのねと(ぁっ
>果たして、青春はスパカーフ