2014年4月16日水曜日

おちゃのこネットのテンプレートカスタム(裏技) ヘッダーにナビを置く方法


おちゃのこネットのテンプレートはかなり面倒・・・好きにいじれない場所が大杉です。

なんといってもHTMLを修正できないのが不便で。

cssと、ブロックごとのレイアウトを変更することでしか、改変ができません。

せめて、ヘッダーの中にHTMLを書かせてほしいです。




ということで、ヘッダーにナビがないのを、つらいなぁと諦めていたんですが、発見しました!ヘッダーナビのつくりかた。

これ発見しちゃった時はすごいぜ自分って自分を褒めたくなりました(・∀・)


2014年8月追記:おちゃのこネットでは、今年になってからHTML5のテンプレートの配布が始まり、ずいぶんと使いやすくなりました。ヘッダーのグローバルナビが標準装備されているので自由にメニュー項目を入れることができます。おちゃのこネットは、私が一番オススメしている使いやすいショッピングカートです!
このブログは、旧タイプのテンプレートを使っている方に役に立つと思います。


1)基本設定のメタタグ設定のPC番キャッチフレーズの中にHTMLを書く


>今回の事例サイトはこちら 果物でつくったワインとジュース直売農園「果物の恵み」






最初はここの位置にナビが出ます

2)cssで、ヘッダーの高さを伸ばしておいて、一番外側のテーブルにポジションrelativeを指定



table#container{
position:relative;
}


3)PC版キャッチフレーズに入れたパーツ(ナビゲーション)にスタイルをつけます



PC版キャッチフレーズは、#copyがつくので


#copy{
top:170px;
left:0;
position:absolute;  →ポジションはabsolute 外側の#containerからの位置に固定する
width:1050px;
height:24px;
}


4)フリーページは別の所にキャッチフレーズを入れる場所があります



事例にさせていただいたネットショップ「果物の恵み」さんの紹介






フルーツ王国、長野県の中でもさらにくだものの里として有名な松川町にある、老舗の農園さんです。
秋になると、りんご狩りのお客さんで渋滞が出来るほど人気の果樹園。
三代目のオーナーが運営しているネットショップでは、この農園でとれたリンゴで作ったオリジナルアップルワインが好評。
りんごやブルーベリーを使った特製ジャムやジュースなどを取り扱っています。

他では手に入らないここだけの逸品、収穫時期になったらネットショップに並びます。季節外にはほとんど売り切れてしまうので、気になる方は逃さないようにGetしてくださいね!



参考になったよ!って方はwebの森のfacebookページへイイネをしてね(v^ー゜)



キャッシュが残っているようでしたらブラウザを強制的に更新してみてください

「更新しました、ご確認お願いいたします。」
「変わっていません、変になってます」
「もしかしたらキャッシュのせいだと思うので、更新してみてください」
「更新って何ですか?」
というやりとりを毎回お客様としているので、
こんな画像を作ってみました。

これからメールするたびに添付してみようかしら・・・

このやりとりは本当にほぼすべてのお客様と毎回毎回やりとりしています。。。。。。。
イヤミになってもいけないのですがついくどく説明してしまうのですが。
やさしいお客様になると「あれ?webの森さん変更してくれたっていうけどなんだか画面が崩れていて変だなぁ」と思いつつ
遠慮されているのかそれを伝えてくれないので、ずっと変な画面のまま見ていて、こちらもそれに気がつかなくて、ずっとあとになって「あれ?こんな風にいつのまに変えてくれたんです?ずっと変だと思ってました」なんてことも・・・。



わたしのPCには、もし@という言葉で辞書登録がしてあって
-------------------------------------------
もし変わってなかったら、キャッシュを見ている可能性がありますので強制的に更新(Shift+F5)をするか、プラウザのオプションでキャッシュデータを削除お願いします
-------------------------------------------
この1行が出るようになっています。
メールにこの言葉をいつも追加しています。


2014年4月14日月曜日

長野県でシロアリに困ったら!(スマホに最適化されたランディングページの作り方)

今回はシロアリ駆除についてのランディングページの紹介です。


こちらはテキスト広告をしたときにクリックすると表示されるページ、いわゆる「ランディングページ」になっています。



このサイトの作り方は、スマホでもPCでも平等に読めるページを目指して作っています。
スマホでもPCでもタブレットでも、音声ブラウザでも誰もが平等に読めるページ、これを「レスポンシブ・ウェブデザイン」といいます。

レスポンシブ・ウェブデザインについて簡単におさらいすると、こういうことです。


ウェブサイトのスマホ対応、スマホ最適化にはいくつか方法があって、それぞれメリットデメリットあるのですが、大きく分けると二つです。

  1. PCサイトと、スマートフォン専用ページと別々に作る
  2. PCでもスマホでも問題なく見られるようなサイトを作る
今回は2番、「PCでもスマホでも問題なく見られるようなサイトを作る」で制作しています。
どちらが良いかは制作費のことや、メリットデメリットがあるので一概に言えませんが、2番を選んだ場合のメリットとして、今後更新があった場合1つのページを修正するだけで良いということがあります。
そして、もうひとつ、この2番の作り方は、Googleさんが推奨している方法だから・・ということもあります。


Googleが推奨するレスポンシブ・ウェブデザイン



「PCでもスマホでも問題なく見られる」作り方のことを「レスポンシブ・ウェブデザイン」と言います。
ここでは、Googleがウェブマスター向けに公開しているノウハウページ
スマートフォンに最適化されたサイト構築の推奨方法
これにのっとって制作してみました。


ここにきちんと書いてあります。
「レスポンシブ・ウェブデザインを使用しているサイト、こちらがGoogleの推奨する設定方法となります」

レスポンシブ・ウェブデザインの作り方はこちらに書いてあります。



シロアリ相談web(事例)の紹介

ランバーテックさんは、本社が、関東でシロアリ防除施工で40年の歴史と実績がナンバーワンの「シロアリ駆除.com」を運営している関東白蟻防除株式会社さんです。
社名は違いますが、関東白蟻防除株式会社の実績とノウハウをそのまま受け継いでいるので、膨大な量の経験・ノウハウ・実績がある会社です。

この告知ページを作るのに一番知っていただきたいのが、この「信頼感」でした。
住宅の修理やリフォーム、害虫駆除業関連で一番心配なのが、怪しい業者の言葉にのせられて、騙されているのではないか?
床下などの見えないところなので本当にこれだけの費用がかかっているのか、本当に必要な工事をしてもらえるのか、最悪の場合、施工したように見せかけて逃げてしまう詐欺の場合もあります。
シロアリ担当の倉谷さんと一緒に、どうすれば長野県のユーザーさんに信頼を持っていただけるかを何度も話し合って一緒に原稿を考えました。
そのあたりを、こんな文章で表現してみました。



リキッドデザイン


スマホは回転できる端末なので、リキッドでデザインする必要があります。
なので、タテにした場合と、横にした場合にどう表示されるのかを考えないといけません。

このように小さい写真やアイコンが横並びになる場合は、フロートで、画面のはしにきたら自動的に折り返される形が良いでしょう。


横幅いっぱいに置く画像の場合は、タグにwidthを100%にして、heightを削除すれば、このように伸縮してくれます。


ただし、かなり解像度の高い大きなモニターで見たときに、リキッドデザインだからといって、幅を指定しないでいると、情報が横に広がりすぎるのはNGです。


(リキッドデザインですが、最大幅を指定している例)



タップで電話、タップでメーラーが立ち上がる


スマホの基本、タップで電話がかけられる・・・・これはボタンを押しやすいように、大きなボタンにしておくことが大事です。
あとは、問い合わせフォームですが、予算的に可能ならスマホでも入力しやすい問い合わせフォームを作るのも一案ですが、今回はタップでメールが立ち上がるようにしました。


(電話がかけられるタグと、メールが立ち上がるタグ)


問い合わせフォームの場合は、できるだけ文章を入力しないで、プルダウン選んだり、チェックボックスからチェックを入れるだけで、最低限の情報を入れて送信するように計画すると良いと思います。
スマホでのフォームメールの取り扱いが面倒だからです。
その点メーラーなら敷居が低くなります。(サイト上にメールアドレスを置いておくことでスパムメールが増えるというデメリットはありますが、このアドレスはすでに何年もサイト上へ)
メリット、デメリットよく考えた上でどんな方法で、ユーザーを最終目的地へ誘導するか考えてみましょう。



デバイスの幅によって、スタイルシートを切り替える方法


これは、CSS3のMedia Queries(メディアクエリ)という方法で切り替えます。
例えば、横幅サイズが600pxより小さい場合は、背景画像はこれ・・・
900pxより大きい場合は、背景画像はこれ・・・というように、スタイルシートに記述することで切り替えることができます



その他デザインする上で考えることをランダムに・・・・


  1. スマホ用のレイアウトを作るときは画像は横幅640pxで作っておく(実際の表示イメージは半分の320pxになります)
  2. 画像やボタンのサイズは偶数pxサイズの方が1/2に縮小された時にきれい。
  3. フォントサイズも偶数値の大きさの方がきれい。大きさは12ピクセル以上にする
  4. ボタンなど指でタップすることを考慮する場合、幅を44ピクセル以上にする(アップルのガイドラインより)
  5. デバイスフォント(スマホなどに元から入っているフォント)は、Androidは機種毎にちがいますが、iPhoneがヒラギノ角ゴなので、ヒラギノでデザインすればOK
  6. テキストはできるだけデバイスフォントで組む
  7. 枠の角丸処理や、背景色のグラデーションなどはcss3で表現したほうが、画像で作るよりも表示速度が速いのでGood
  8. スマホサイトはあまり深い階層にしない。ページが長い分には上下にスライドで読めるので良いのですが、タップしつつ多くのページを移動していくのはスマホの場合は大変です。
思いつくまま書いていったので、ランダムですみませんが・・・また思いついたら付け足しておきます。

実はこのページはまだ一次工事の段階で、このデザインを元にいずれはPCサイトを作るので今後変更していく予定がありますが・・・・・現段階では、PCでもスマホでもストレスなく読めるページの作成方法として事例で取り上げさせていただきました。

事例でとりあげたランバーテックさんの紹介


長野県での住宅関連工事では縁の下の力持ちの会社として有名な「ランバーテック様」を紹介します。
松本市にある施工業者さんなのですが、木についての技術、木を活かす技術としては日本で右に出るものはいないという知る人ぞ知る会社です。
普段わたしたちは家を建てるときや、家のリフォームするときは、☆☆ホームさんとか◎◎工務店さんなどに依頼するので、このような業者さんが縁の下の力持ちとして、工事の技術を支えていることに気がつかないかもしれません。
実は長野県では大変多くの工務店や住宅メーカーさんとの取引があり、「腐らない木材」を加工して納入していることで有名な会社です。
元(東京の本社)はシロアリ駆除やシロアリ防除のプロ、そしてシロアリ防除から培った技術を土台にして、腐らない木材の開発と、断熱壁の技術で、建物の省エネや、健康診断を得意としている会社なのです。
木を愛する人々、木の家にこだわる皆さんにとって「お家のお医者さん」のような存在です。
そんなランバーテックさんの信頼ある技術で、
「家を末永く持たせたい」と思われる方は、家の健康診断を依頼してみてはいかがでしょうか?




参考事例のサイトはこちら http://www.lumbertech.jp/siroari/sp/




2014年4月6日日曜日

サファリで、iPhoneサイトのデザインを確認する方法

サファリで、iPhoneサイトのデザインを確認する方法


1)Safariの右上の「歯車(設定)マーク」⇒「設定」から設定画面を開きます。
2)「詳細」タブを開き、一番下の「メニューバーに”開発”メニューを表示」にチェックを入れる。
 そうするとメニューバーに「開発」が追加されます。







 3)そこから「開発」⇒「ユーザーエージェント」で、「Safari iOS iPhone」や「Safari iOS - iPad」などが選択できます。




キャプチャをとりました。こんなふうに見えます


こちらが元の画面です



見本サイトはこちら 車売るなら買うならポッキリ屋!

webの森のFBページへも来て下さい