おちゃのこネットの管理画面

いくつかの通販サイトの管理画面をさわっていますが、おちゃのこネットは本当にわかりにくくて、毎回迷子になります。

備忘録をいくつか投稿しておきます。

事例サイトはこちら　＞ゆざわ農園・果物の恵み

表紙真ん中のメイン画像の変更

表紙の真ん中メイン画像の下、新商品バナーの入れ替え

フリーページ

ずくだせ長野公開自主勉強会in松本

ネットショップの運営に興味がある皆さん、Googleアナリティクスについて興味がある皆さん、どなたでもお気軽にご参加ください。
長野県の方でも、県外の方でも、個人の方も、会社の方も、大丈夫です！

Windowsタブレットが欲しい人、ちょっと待った！

このタブレットのCM印象に残るんで購入を検討されている方もいると思いますが、実際にさわってあまりの「役に立たなさ」に愕然としました。

先日ウェブデザインの個人講習があり、その方が買ったばかりのサーフェスを持って来られたのですが
それがSurface 2（サーフェス）でした。
気をつけないといけないのは、サーフェスには２種類あり、
(1) Windows RT (含む8.1) 実売 4～５万円
(2) [Pro] 付き Windows 8.1 実売10万円以上
で、曲者なのは (1) の方で、この価格でOffice が使える事が売りです。

わたしの体験したこと

• 最初のトースト画面に「デスクトップ」がないのでその方はデスクトップがないものと思って、悲しくなりながら使っていたそうです。
  トースト画面のインターネットというボタンを押して、ネットを見ていただけだそうです。
• 私がデスクトップを表示させたら、普通の画面あるんだ・・と驚いていました。
• デフォルトでbluetoothがoffになってるので、マウスを接続しようとしたんだけど、どこにonにするスイッチがあるのか探せずかなり手間取りました
  （bluetoothっていうのは、外付けのマウスなどをケーブルなしで接続する機能です。マウスを買う時に、bluetooth対応と書いてあるものを買って来て、ペアリングといって認識させると、マウスで操作ができるようになります）
• GoogleChromeをインストールしようとしたら「このアプリはインストールできません、Windowsのストアで対応のアプリを探して下さい」となり断念
• Firefoxもだめ。
• 便利なフリーソフトを教えてあげようとして、インストールしようとしたら、このアプリはインストールできませんと出て断念
• どこか写真をとるボタンを押してしまったら、カメラのモードになってしまいそれをどうやっても終了させることができずに、（あっちこっち、タップしたり、スワイプしたり、上から下へびゅーっとスワイプしてみたんだけどだめで・・・）結局電源を切りました。
  私が単にわからなかっただけかもしれませんが、GoogleタブレットやWindowsタブレットを何台か使ってきたわたしがわからなかったんだから、初心者さんには直感的に操作できない感じにな
  っているのかも・・・
• その方は、メールの設定方法を、購入したお店で聞いて来なかったために、メールを読むことが出来ていませんでした。
  仕方ないので、プロパイダ（OCN）のウェブメールから、メールチェックをしようとしたら、javascriptが動かないのか、何なのか、いろんなボタン押してもエラー出まくり、まともにメールが読めない。
  もちろん同じOCNのウェブメールを普通のWindowsで見るとちゃんとメールが読めるのです。
  これはIE上で動くウェブシステムがいろいろ動かないことが予想されました。

Windowsタブレットといっても、機種によって様々な違いがあるので、CMだけの印象と安さで購入するのは気をつけた方が良いと思います。
安かろう悪かろうとはまさにこれ！使い物にならなかったです。

少なくとも仕事をするPCじゃありません、ウェブを閲覧する以外のことには使えません。

Windows8タブレットと、アンドロイドの違い

Windows8のタブレットがいろいろ出るようになって、いくつか使わせてもらいましたが、（私を含め）年齢による視力が衰えている方はあまりコンパクトな機種は厳しいと思います。

だって、普段デスクトップやノートパソコンで見ている、あの大きな画面がそのまんま縮小されて7インチとか8インチに収まってしまうのですよ。

デスクトップもブラウザも文字も、全部が３分の１くらいに小さくなってしまい、そのたびに近視のわたしは眼鏡をはずさないと見えなくて大変です。

ところが、iPhoneもそうだと思いますがアンドロイドは、タブレット用に開発されたOSだから・・？なんですかね。

文字のサイズがある程度確保されてるので、視力に自信がないわたしたちの年代でも扱えます。

対応のアプリもみんなが、タブレットサイズ、スマホサイズを意識して作られているので、使いやすいです。

つまり、外出先でさっと取り出してメールチェックしたり、facebookに投稿したり、LINEで家族と会話したり、ベッドに寝転がったまま読書したりする程度ならアンドロイドがやっぱり便利。私は大きくて楽なのでネクサス7を使っていますが、

娘はネクサス5です。

（iPadminiくらいの大きさがネクサス7で、iPhoneくらいの大きさがネクサス5と思ってください）

ところが、アンドロイドで仕事をしようとするとやっぱりきついのです。

アプリを駆使して工夫しないといけなくて、bluetoothでキーボード対応させたりしても、荷物が増えるばかりで、キーボードも相性が悪いのを選んでしまうと誤動作が大きいし、普段使い慣れているキーボードと違うのでミスタッチしてしまいます。

Windows8のタブレットを買って良かったと思う時

• 仕事先でパソコン立ち上げて、ウェブの画面を見ながら打ち合わせする
  （Windows8のタッチキーボードは画面の半分をどーんと隠してしまうので、仕事にならず、Bluetoothのキーボードをつけると初めて仕事がはかどります。）
• セミナー等に持ち込んで、記録をとったり、実習したりする
  （写真も撮れるし、音声もとれるし、便利ですよね）
• カフェに入ってちょっとの間に仕事
  （わりと重い電源、wifiルーター、キーボードをじゃらじゃらと一式持っていくので結局荷物は増えます）
• 外付けHDDにデータを入れ、キーボードとマウスとモニターをつないで自宅で普通に仕事する
  （WindowsXPがネットにつなげなくなったので、買い換えを検討している方はこちらの方法をとるのも一案と思いますが、だったらサーフェス2のような安い方を買わない方が良い）

こんな使い方をするならやっぱりWindows8の方がいいなぁと思いました。

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

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

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

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

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

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




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

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

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

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

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






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

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

table#container{
position:relative;
}

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

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


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


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

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






フルーツ王国、長野県の中でもさらにくだものの里として有名な松川町にある、老舗の農園さんです。

秋になると、りんご狩りのお客さんで渋滞が出来るほど人気の果樹園。

三代目のオーナーが運営しているネットショップでは、この農園でとれたリンゴで作ったオリジナルアップルワインが好評。

りんごやブルーベリーを使った特製ジャムやジュースなどを取り扱っています。

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

 果物の恵み｜果物でつくったワインとジュース直売農園　Fruit&Forestゆざわ


＞おちゃのこネットを試用してみたい方はこちらからどうぞ

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

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

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

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

このやりとりは本当にほぼすべてのお客様と毎回毎回やりとりしています。。。。。。。
イヤミになってもいけないのですがついくどく説明してしまうのですが。

やさしいお客様になると「あれ？webの森さん変更してくれたっていうけどなんだか画面が崩れていて変だなぁ」と思いつつ
遠慮されているのかそれを伝えてくれないので、ずっと変な画面のまま見ていて、こちらもそれに気がつかなくて、ずっとあとになって「あれ？こんな風にいつのまに変えてくれたんです？ずっと変だと思ってました」なんてことも・・・。

わたしのPCには、もし＠という言葉で辞書登録がしてあって

-------------------------------------------

もし変わってなかったら、キャッシュを見ている可能性がありますので強制的に更新（Shift＋F5）をするか、プラウザのオプションでキャッシュデータを削除お願いします

-------------------------------------------

この１行が出るようになっています。

メールにこの言葉をいつも追加しています。

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

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

参考サイト＞長野県でシロアリ駆除なら、40年の実績！株式会社ランバーテック

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

このサイトの作り方は、スマホでもPCでも平等に読めるページを目指して作っています。

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

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

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

1. PCサイトと、スマートフォン専用ページと別々に作る
2. PCでもスマホでも問題なく見られるようなサイトを作る

今回は２番、「PCでもスマホでも問題なく見られるようなサイトを作る」で制作しています。
どちらが良いかは制作費のことや、メリットデメリットがあるので一概に言えませんが、２番を選んだ場合のメリットとして、今後更新があった場合１つのページを修正するだけで良いということがあります。

そして、もうひとつ、この２番の作り方は、Googleさんが推奨している方法だから・・ということもあります。

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

「PCでもスマホでも問題なく見られる」作り方のことを「レスポンシブ・ウェブデザイン」と言います。

ここでは、Googleがウェブマスター向けに公開しているノウハウページ

スマートフォンに最適化されたサイト構築の推奨方法

これにのっとって制作してみました。

ここにきちんと書いてあります。

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

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

スマートフォン向けウェブサイトの構築 - Webmasters — Google Developers

シロアリ相談web（事例）の紹介

ランバーテックさんは、本社が、関東でシロアリ防除施工で40年の歴史と実績がナンバーワンの「シロアリ駆除.com」を運営している関東白蟻防除株式会社さんです。

社名は違いますが、関東白蟻防除株式会社の実績とノウハウをそのまま受け継いでいるので、膨大な量の経験・ノウハウ・実績がある会社です。

この告知ページを作るのに一番知っていただきたいのが、この「信頼感」でした。

住宅の修理やリフォーム、害虫駆除業関連で一番心配なのが、怪しい業者の言葉にのせられて、騙されているのではないか？

床下などの見えないところなので本当にこれだけの費用がかかっているのか、本当に必要な工事をしてもらえるのか、最悪の場合、施工したように見せかけて逃げてしまう詐欺の場合もあります。

シロアリ担当の倉谷さんと一緒に、どうすれば長野県のユーザーさんに信頼を持っていただけるかを何度も話し合って一緒に原稿を考えました。

そのあたりを、こんな文章で表現してみました。

リキッドデザイン

スマホは回転できる端末なので、リキッドでデザインする必要があります。

なので、タテにした場合と、横にした場合にどう表示されるのかを考えないといけません。

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

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

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

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

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

スマホの基本、タップで電話がかけられる・・・・これはボタンを押しやすいように、大きなボタンにしておくことが大事です。

あとは、問い合わせフォームですが、予算的に可能ならスマホでも入力しやすい問い合わせフォームを作るのも一案ですが、今回はタップでメールが立ち上がるようにしました。

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

問い合わせフォームの場合は、できるだけ文章を入力しないで、プルダウン選んだり、チェックボックスからチェックを入れるだけで、最低限の情報を入れて送信するように計画すると良いと思います。

スマホでのフォームメールの取り扱いが面倒だからです。

その点メーラーなら敷居が低くなります。（サイト上にメールアドレスを置いておくことでスパムメールが増えるというデメリットはありますが、このアドレスはすでに何年もサイト上へ）

メリット、デメリットよく考えた上でどんな方法で、ユーザーを最終目的地へ誘導するか考えてみましょう。

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

これは、CSS3のMedia Queries（メディアクエリ）という方法で切り替えます。

例えば、横幅サイズが600pxより小さい場合は、背景画像はこれ・・・

900pxより大きい場合は、背景画像はこれ・・・というように、スタイルシートに記述することで切り替えることができます

参考サイト　＞[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例 | コリス

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

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

思いつくまま書いていったので、ランダムですみませんが・・・また思いついたら付け足しておきます。

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

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

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

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

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

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

１）Safariの右上の「歯車（設定）マーク」⇒「設定」から設定画面を開きます。

２）「詳細」タブを開き、一番下の「メニューバーに”開発”メニューを表示」にチェックを入れる。

 そうするとメニューバーに「開発」が追加されます。

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

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

こちらが元の画面です

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