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 | - | - | - | - |
- 2019年11月 （1）
- 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
最近のコメント
相互リンクばなー！心底応援中！
バナー♪全身全霊応援中！
＞最近祝日など休みが多かったわけですが
サービス業には関係ないので【白目】
＞ガンダムメインではなくラブライブメイン元井 広夢お台場 #LoveLiveそしてすぐに年末が来るのですよと(ぉ
>たまたま通りかかっただけや
通りすがりのレゲエマスターですねわかります(まて
>何人かがこちらを見てきてますね(ぇ
監視カーフアナログミキサーが好きな人コメントレス元井 広夢さん
そうですね、近年は夏の後秋が無くてすぐに冬になる印象なので気をつけたいですね～
＞散財しまくりで大変なことになりそう（ぁ
イベントなどに行けすぎて風アナログミキサーが好きな人寒暖差が激しいので体調管理が難しいですよね＞挨拶
＞秋葉原の近くに住んでるけど
散財しまくりで大変なことになりそう（ぁ
＞【朗報】『私がモテないのはどう考えても元井 広夢アナログミキサーが好きな人アナログミキサーはジュースとかで使うけど出番が(それ違うミキサー
>秋葉原の近くに住んでるけど電車でわざわざ来てるやつ見ると
歩いて来いってわけですね電車なんてカーフKey Of 1 Million Timesコメントレス元井 広夢さん
＞・・・ない（ぁ
強いて言うなら今流行りの税金と年金じゃないですかね(ぉ
＞しかも１位だけという圧倒的な存在の件（汗）
大体女どもは沢山居すぎて違い風東京 - 新越谷RE：元井 広夢さん＞ごきげん麻衣茶ん（ぁ＞なお、お茶は飲まない模様
大体茶は茶以外の意味で使われるものですよね(ぇ
＞奇遇ですね、私も最近のは知りません（ぁ
今の時代にブログをやっ風Key Of 1 Million Times＞これだけはお金をかける！というものはありますか？
・・・ない（ぁ
＞鍵(key)キャラ総選挙の結果が発表される！！ エロゲーなのに1位が女キャラじゃない！！！
しかも元井 広夢Key Of 1 Million Timesとりあえずくいものにしておけば安心だと(ぁ
>高木さんアニメ製作委員会め
高木さん「計画通りね」(ぁ
>鍵(key)キャラ総選挙の結果が発表される！！
緑川効果さすカーフSuccessiveコメントレス元井 広夢さん
＞時代も変わったなぁ・・・と思いつつ現実は厳しいということでしょうか？（汗）
昔に比べるとやはり厳しいでしょうね。スマホでの手軽なゲームも増えまし風東京 - 新越谷＞好きなお茶はなんですか？
ごきげん麻衣茶ん（ぁ＞なお、お茶は飲まない模様
＞自分は情報がストップしてて
奇遇ですね、私も最近のは知りません（ぁ
＞高木さんが終わ元井 広夢Successive＞エロゲも投資
時代も変わったなぁ・・・と思いつつ現実は厳しいということでしょうか？（汗）
＞これが『歴代 高評価アニメ一覧』だぞ！！ 全部見てないやつはアニオタ元井 広夢Successive三重名物と言っても(ny
>クラウドファンディング支援金総額・約『3900万円』
どこかのDMMゲーは何億とかいってたなぁとおもいだす(殴)
>なんとクラウドファンディカーフStellaコメントレス元井 広夢さん
＞フラグですね、わかります（マテ
観る前に嫁に消されるところでした(ぁ
＞偶然ですね、私もそこで止まってます（ぁ
アイルノーツ「この先には行かせん」風Stella＞録画しているのでいつでも観られますが
フラグですね、わかります（マテ
＞柚子の最新作は天色アイルノーツで止まっています
偶然ですね、私もそこで止まってます（ぁ
元井 広夢Stella月初めに更新しておけば安心できると(ぁ
>録画しているのでいつでも観られますが
積み録画ってヤツですねここから死蔵録画になります、よくあることです(ぉ
>ゆずカーフAugustusコメントレス元井 広夢さん
冷蔵庫が普通だと思っていたのですが冷凍庫派も一定数居るんですかね・・・
＞私もこれなのでキャンディを食べるように溶かしながらいただいてます
取り敢風12年前のSOS 〜Pray For It〜コメントレス元井 広夢さん
是非皆で戦いましょう(ﾏﾃ
＞・・・違いの分からない漢がここに（ぁ
写ってるものが分かれば十分ですからね(ぁ
＞問題は寿命というものがいつまでと断言で風Augustus＞チョコレートを冷凍庫で冷やすこだわりがあるのですが
こだわりはないですが冷蔵庫で冷やす派です
＞歯が悪い・知覚過敏ワイとしてやめてほしい
私もこれなのでキャンデ元井 広夢Augustus盆はみんなどっかに帰るんだなぁと実家住まいの人が(ぁ
>大阪土産ってあまりピンと来るものがなく
冷凍品が多くなってしまう罠が(^_^；；；
>架空の美少女ゲーム「カーフ