fureai-kajuen.net をレシポンシブに2
カスタマイズした部分をダラダラ付け加えて行ったら長くなり過ぎたので別書き込みとして見た ^^;
——-01/24 追記 ——–
PC上でしか確認していなかったので、気付きませんでしたが、メール送信ページの、送信エラーや、無事完了メッセージがスマホで見ると小さい ^^;
mail.php に
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<meta name="viewport" content="width=device-width,initial-scale=1"> @media screen and ( max-width:479px ) { #formWrap{ width:100%; font-size:10px; margin:0 auto; } } 完了部分に @media screen and ( max-width:479px ) { body{ width:100%; padding-top:50px; font-size:10px; margin:0 auto; } } |
などを追加して何とかOKかな?
——-01/29 追記 ——–
メニューとタイトルにアイコンフォントを使ってちょっとオサレにして見た ^^;
やりかたは
アイコンをWebフォントで表示! Font Awesomeの使い方で教えてもらいました。
——-01/30 追記 ——–
スライダーナビがウザイので、あてずっぽうに
data-nav=”false” とやったらビンゴ! ^^;
加えて、標準についているキャプションがスマホで見た時には邪魔になるので、公開はしてないが index3.html に強引な形で作って見たらなんとか動いているみたい ^_^
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="fotorama" data-autoplay="true" data-loop="true" data-transition="crossfade" data-nav="false" data-width="100%" style="font-size: 100%; color:#808080;"> <div data-img="img/yuki0.jpg"><div class="txt">寒い季節に耐え、やがて花咲く春を待ち続けています</div></div> <div data-img="img/tubomi0.jpg"><div class="txt">つぼみが膨らみ、開花も間近です</div></div> <div data-img="img/hana0.jpg"><div class="txt">満開です 果樹園の中はいい香りでいっぱいです</div></div> <div data-img="img/tanjo0.jpg"><div class="txt">花も散り 小さなリンゴの誕生です</div></div> <div data-img="img/koringo0.jpg"><div class="txt">リンゴ達はスクスクと日々成長しています</div></div> <div data-img="img/kogyoku0.jpg"><div class="txt">紅玉が鈴なりです やがて美味しいアップルパイ?</div></div> <div data-img="img/kagayaki0.jpg"> <div class="txt">たわわなふじと岩手で生まれたもりのかがやき</div></div </div> cssに .txt{ background-color: rgba( 255, 255, 255, 0.75 ); } |
«「fureai-kajuen.net をレシポンシブに….」前の記事へ 次の記事へ「レシポンシブなページ3」»