先日からシコシコ作り続けていたページ….。
Google 先生に採点してもらったら｢75点｣しか貰えませんでした ^^;
まだまだ修行が足りないわなぁ…..
カスタマイズした部分をダラダラ付け加えて行ったら長くなり過ぎたので別書き込みとして見た ^^;
——-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 にレスポンシブな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 追記 ———–
詳細はこちら
孫娘の幼稚園は１５日スタートで、近隣の小学校は１９日からの新学期。
毎年、冬休みが終ると雪が降り出すんですよねぇ….^^;
でもって、近くの交差点で「行ってらっしゃい！」と声をかける人を２日やりました。
果樹園の中は、積雪5cm ほどですかねぇ….
今の時間、道路はもう溶けだしてグチャグチャですけど。
「今時は、モバイルにフレンドリーなHPが常識なんざーますよ…奥様ぁ」
ってな事で、夜なべ仕事でシコシコやって見ています ^^;
いつも通り、骨組みは親切な方のテンプレを落とし込んで、部分的に手を加えて見たのですが、昔に比べると親切な方がいっぱいいて、色々教えてくれるので、便利になったもんです。
メール送信の仕組みも今時は cgiじゃなくって php でやった方が簡単なんですねぇ。
Blog の最新記事をHPにサムネイル付で呼び込むなんて手段もいとも簡単に出来てしまいます。
自分の借りているサーバーの中には1997からのHPが残っていたりしますが、隔世の感がありますねぇ。
「お前のHPはリンゴを売る気が有るんだか無いんだか….」
と、よく言われますので、「リンゴ買っ！て買って！」的なページに仕立ててやろうかと思っています ^^;
【Blog更新】 みず木団子: あっという間に松も取れ、今年も半月が過ぎようとしています。 この地域では小正月にみづ木団子を作ると言う風習が有ったりします。 団子をリンゴに見立てて、今年の豊作を願ってみず木に刺して飾りま… https://t.co/oaDHDe3iEp
— ふれあい果樹園 (@Kumagai) 2016, 1月 13
すみません ^^;
最近 Twitter はほとんど覗いてなくて、ここの投稿を自動で投げているだけです ^^;
いつの間にやらTwitter も「いいね！」出来たり、ずいぶんと変わってますね。
もうちょっと、使い道を考えて見ようかしらん？
あっという間に松も取れ、今年も半月が過ぎようとしています。
この地域では小正月にみづ木団子を作ると言う風習が有ったりします。
団子をリンゴに見立てて、今年の豊作を願ってみず木に刺して飾ります。
今年も婆さんと孫とで一生懸命作っていました。
中には、リンゴ以外の物も混じっているようですが…^^;
今日で松も取れ、いつまでもお正月気分ではいられないのですが、まだまだグータラな日々を送っております ^^;
今日で２つの新年会をこなし１つの会議が終りました。
新年会はあと２つ。
会議が１つ。
その間に、神社の決算とどんと祭が待っています。例年、剪定に取り掛かるのが遅くなり、あとでおお慌てするのですが、今年こそ早めに取り掛かれれば良いなぁ…と。
それにしても気温が高く、部屋に取り入れた花が、まだまだ綺麗に咲き誇っています。
