fureai-kajuen.net をレシポンシブに….
今回、fureai-kajuen.net にレスポンシブなHPを展開するために、参考にし、使用させて頂いたページを備忘録として記載しておきます。
まず、HPの骨組みは
S-Hoshino.com から
テンプレート004を使用させていただきました。
またHPに使用したスライダーは
GLOW FACTORYのページから
スマホにオススメのレスポンシブスライダーFotorama使い方を使用させていただきました。
次に fureai-kajuen.net/kajuen/ から Blog の更新を貼り付けるために
ブログの最新記事を、ホームページに自動表示させる方法を参考にさせて頂きました。
このさい、fureai-kajuen.net/kajuen/ でも実施しているように最新のエントリーはサムネイル付で表示し、最近のエントリーを３個程度はリストタイプで表示させるため js ファイルを２個作成しました。
２個表示させる方法として JS ファイルの中身に feed と feed2 を書き込み、それぞれ
＜div id=”rss”＞＜span id=”feed”＞ブログ＜/span＞＜/div＞, ＜div id=”rss”＞＜span id=”feed2″＞ブログ＜/span＞＜/div＞ としておきました。
画像の要る要らないは
list += ‘＜li＞’;
list += ‘＜a href=”‘ + entry.link + ‘” target=”_blank”＞’ + gazo + ‘＜/a＞’;
list += ‘＜/li＞’;
を書き込むか、削除するかでコントロールします。
entry.contentSnippet.substring(0, 80) の 80 の数値を変更する事によって、表示する文字数をコントロールします。
（画像付の方はWEBLOG さんの方が分かりやすい）
埋め込んだgooglemap をレシポンシブにするための css は
GoogleMapの埋め込む地図をCSSでレスポンシブ対応させ伸縮させる方法を参考にさせて頂きました。
最後にメール送信ページには
PHP工房さんから
メールフォームをDLさせて頂きました。
ついでに Mozilla irefox だと Ctrl + Shift + M で 一発でレシポンシブを確認できる事にいまさら気付きました ^^;
——-01/23 追記 ———–
HML で作ったページは更新するのが面倒なので、固定化し、このBlog の新着を引っ張り込んで更新に見せかけよう ^^;と目論んだのに、レイアウト上、どうしてもその部分がトップページから切れてしまうので「最新記事」「新着情報」というボタンを付けてスライドさせる事にした ^^;
スライド機能は最初からついていたので、簡単。
ついでにページをスライドして行ったらトップに戻るボタンをニュッと出すJSを追加しておいた。
|
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 |
$(function() { var showFlag = false; var topBtn = $('#page-top'); topBtn.css('bottom', '-100px'); var showFlag = false; //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { if (showFlag == false) { showFlag = true; topBtn.stop().animate({'bottom' : '20px'}, 200); } } else { if (showFlag) { showFlag = false; topBtn.stop().animate({'bottom' : '-100px'}, 200); } } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); |
そのボタン、背景を半透明化するため CSS も少し工夫。
モバイルで見た時に記事に重なったら可愛くないもんね ^^;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*--Top へ戻る */ #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background-color: rgba( 0, 128, 0, 0.55 ); text-decoration: none; color: #fff; width: 60px; padding: 10px 0; text-align: center; display: block; border-radius: 5px; } #page-top a:hover { text-decoration: none; background-color: rgba( 0, 192, 0, 0.55 ); } |
——-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 ); } |
