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年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
最近のコメント相互リンクばなー！心底応援中！
バナー♪全身全霊応援中！
>やはりOSのアップグレードというのは
ものによってはBIOSから直に書き換えないとできないのまでありまカーフ2K20 JUST START！なにまだ小正月は来ていないから(ぉ
>普段は大体エロゲのバナーばっかりやから
えろい人と定義されたくないわけですね(ぉ
>【理系が恋に落ちたので証明してみた。(カーフ2019大晦日～今年の「#今日の1曲」まとめなどコメントレス元井 広夢さん
一般の人からするとただの平日ですからね、ましてやシフト変わってとか言われる始末(ぁ
本年もよろしくお願いします！
カーフさん
所詮各業界の風近況〜秋葉原・水戸RE:カーフさんアニメが無くても生きられるもんなんですよね(ぁ
＞写真撮った苦労をわかって欲しいですねええ(ぁ
そうですね、そしてブログにアップロードする苦労も分かってほしいです(風CUBE ～To you like goddess～RE:カーフさん〉なんかすごく探偵ものっぽい感じが(ぁ
おつぱいしか見てなかったのでさっぱり内容は分かってませんでした(ﾏﾃ
〉看板絵師ってものは基本ですからねぇ
CUBEというか寧ろカ風2019大晦日～今年の「#今日の1曲」まとめなど＞FC2 トラックバックテーマ:「子供のころのクリスマスの思い出は？」
クリスマスなんて上級国民のイベントでした・・・（遠い目）
今年もお世話になりました、来年も宜し元井 広夢2019大晦日～今年の「#今日の1曲」まとめなどクリスマス用ギフトセットなんてのもありますからねぇ(笑)
>至る所にでかいアンパンマンが
そして時々頭がなくなったアンパンマンが(ぇ
>上級会員のプラチナになっカーフ近況〜秋葉原・水戸世の中働かないと生きられないですからね(^_^；
>折角撮ったのに上げる機会が無いのは
写真撮った苦労をわかって欲しいですねええ(ぁ
>ガルパン関係のものがまだあカーフCUBE ～To you like goddess～なんかすごく探偵ものっぽい感じが(ぁ
>CUBEの最新作が公開されました
>カントクがおらなはじまらへん
看板絵師ってものは基本ですからねぇ(笑)カーフお台場 #LoveLiveコメントレス元井 広夢さん
11月入ったら余計に早く感じるんですよね～
＞サービス業には関係ないので【白目】
盆とか年末年始にも休めないのは大変ですよね・・・
＞そして、消えた風お台場 #LoveLive今年もあっという間に終わりそう・・・＞挨拶
＞最近祝日など休みが多かったわけですが
サービス業には関係ないので【白目】
＞ガンダムメインではなくラブライブメイン元井 広夢お台場 #LoveLiveそしてすぐに年末が来るのですよと(ぉ
>たまたま通りかかっただけや
通りすがりのレゲエマスターですねわかります(まて
>何人かがこちらを見てきてますね(ぇ
監視カーフアナログミキサーが好きな人コメントレス元井 広夢さん
そうですね、近年は夏の後秋が無くてすぐに冬になる印象なので気をつけたいですね～
＞散財しまくりで大変なことになりそう（ぁ
イベントなどに行けすぎて風アナログミキサーが好きな人寒暖差が激しいので体調管理が難しいですよね＞挨拶
＞秋葉原の近くに住んでるけど
散財しまくりで大変なことになりそう（ぁ
＞【朗報】『私がモテないのはどう考えても元井 広夢アナログミキサーが好きな人アナログミキサーはジュースとかで使うけど出番が(それ違うミキサー
>秋葉原の近くに住んでるけど電車でわざわざ来てるやつ見ると
歩いて来いってわけですね電車なんてカーフKey Of 1 Million Timesコメントレス元井 広夢さん
＞・・・ない（ぁ
強いて言うなら今流行りの税金と年金じゃないですかね(ぉ
＞しかも１位だけという圧倒的な存在の件（汗）
大体女どもは沢山居すぎて違い風東京 - 新越谷RE：元井 広夢さん＞ごきげん麻衣茶ん（ぁ＞なお、お茶は飲まない模様
大体茶は茶以外の意味で使われるものですよね(ぇ
＞奇遇ですね、私も最近のは知りません（ぁ
今の時代にブログをやっ風Key Of 1 Million Times＞これだけはお金をかける！というものはありますか？
・・・ない（ぁ
＞鍵(key)キャラ総選挙の結果が発表される！！ エロゲーなのに1位が女キャラじゃない！！！
しかも元井 広夢Key Of 1 Million Timesとりあえずくいものにしておけば安心だと(ぁ
>高木さんアニメ製作委員会め
高木さん「計画通りね」(ぁ
>鍵(key)キャラ総選挙の結果が発表される！！
緑川効果さすカーフSuccessiveコメントレス元井 広夢さん
＞時代も変わったなぁ・・・と思いつつ現実は厳しいということでしょうか？（汗）
昔に比べるとやはり厳しいでしょうね。スマホでの手軽なゲームも増えまし風