WordPressテーマTwenty Twelveでレスポンシブデザイン（飯田市の寝具のお店ホームページ）

飯田市の寝具店、もりたけ布団店さんのホームページリニューアルをさせていただきました。

WordPressのテーマTwenty Twelveを使い、必要部分をカスタムしました。

元のテーマからそれほど大きなカスタムはしてないので、ほぼTwenty Twelveにデザインをくっつけた程度です。

１）テーマTwenty Twelveを適用した状態

これは、固定ページに表紙用の記事を入力し、設定で表紙に表示されるページをその固定ページに指定し、Twenty Twelveを適用させただけの状態です。

Twenty Twelveは、このようなシンプルなデザインなのでとてもカスタマイズしやすくて助かります。

２）管理画面の外観　⇒ヘッダー　で、ヘッダー画像を指定する

カスタムヘッダーを使わなくてもいいんですが、スマホ表示にも楽に対応するために使うことにしました。

左右が小さくなってしまいますが、デザイン重視で妥協しています。

もちろん、丁寧にやるなら、スマホ表示のプラグインなどをいれ、そちらにスマホ用のヘッダー画像を設定したほうがベストだと思います。

３）外観　⇒メニュー　で、グローバルナビを作っています

グローバルナビは、テキストにすることで、納品後お客様が自分でナビの順番を変えることができたり、固定ページが増えた場合でも対応できます。

図のように、外観　⇒メニュー　から位置を細かく設定すれば、好きな順番に設定することが出来て、子メニューも作れます。

また、画像ではなくテキストにすることでスマホでも変換しやすくしています。

４）テーマTwentyTwelveを複製して、一部変更し、有効化します

WordPressのテーマを作った方は分かると思いますが、

wp-content/tehmesの中に、twentytwelveというフォルダがあるので、

フォルダごとコピーし、名前を変更（半角英数）

そして、screenshot.pngを書き換えて、style.cssの頭にあるテキスト（テーマの名前）を変更し、

フォルダごと、wp-content/tehmesの中にアップします。

するとこの画面に新しいテーマが出てくるのでそれを有効化します。

その後、スタイルシートを修正していきます。

５）出来たのがこのトップページです　実際のサイトはこちら

グローバルナビは画像でなく、HTML5で作られています。

cssを変更するだけでこのくらいに変更することは可能です。

css3になってから、背景を角丸にできるようになったのでずいぶんデザインに幅が広がりました。

以前はこれをやりたかったら１つずつ画像を作らないとだめでした。

６）固定ページは、投稿と違い、時系列では並ばないので場所を固定することができます

WordPressを知らない方に、このサイトはブログで出来てるんですよというと、びっくりされますが、どうやらブログ=アメブロとかの無料ブログ　という印象があるようで、

WordPressを使って独自にブログを設置すれば、固定ページが作れます。

ブログの記事は、いわゆる日付順に並んでいて、新しい記事が上にきて、古い記事はどんどん過去のページへ押し出されていきます。

でも固定ページは、普通にホームページビルダーなどでサイトを作るのと同じで、位置を固定させた静的なページが作れます。

ブログで作ったページでも、SEO対策上も不利ということはまったくなく、逆にブログツールのメリットをたくさんうけることができます。

７）ランディングページ風のながーいページもOK！

これも固定ページで作成しています。ブログツールでここまで出来ちゃうんですよ。
末尾にはちゃんと問い合わせフォーム（プラグインを利用）をおいて、クロージングのための仕掛けも。
アメブロやエキサイトなど太刀打ちできない最強ブログということがわかっていただけるかと思います。

８）これはブログ（投稿）です

こちらは固定ページではなく、ブログ（投稿）です。

メニューの設定で、投稿の中のカテゴリ「お知らせ」だけがここに表示されるようにしています。

themeのファイルにWordPressのテンプレートタグをちまちまと埋め込みしなくても、これくらいのことは、簡単に管理画面からできるのでありがたいですね！

９）レスポンシブデザイン（スマホやタブレット対応）

レスポンシブデザインというのは簡単に言うと、１つのデータをいろんな端末で見ても誰でも平等に情報を伝えることができるデザインのことですが、Twenty Twelveはそれに対応しているので、

ご覧のように、ブラウザの幅によって、表示が変わっていきます。

iPadなどのサイズになると、メニューが段々に折り返しされ、

さらにiPhoneのサイズになると、ひとまとめにされた「メニュー」というボタンに切り替わり、

「メニュー」をタップすると、ナビが登場します。

サイドバーは記事の末尾に移動し、上下の移動にストレスを感じないスマホでは、とても読みやすいかと思います。

事例に使わせていただいたもりたけ布団店さんの紹介

お布団をどこで買いますか？イマドキの日本人は、ホームセンターか通販などで購入するかもしれませんね。

わたしもそうだったのですが、もりたけさんのサイトを作成するにあたって、取材していく中で

「考えてみたら一生の３分の１を過ごす布団を軽くみてはいけない！」

もしかしたら自分に合ってない布団やまくらを選んでしまって、肩こりや不眠の原因になってるかもしれないと思ったら安いのでいいかって思って適当に通販やホームセンターなどで買うのは、コワイことだなぁと思いました。

皆さん、安心・信頼の実績がある地元の布団屋さんを利用しましょう。

ふとん屋さんには、資格をもったアドバイザーの方がいて、

体に良い眠りのこととか、体調管理のこととか、かなり詳しく相談にのってくれます。

寝ている間に体調が良くなったら、たとえば枕が倍の価格したって、全然安いと思います。

自分にあった枕や布団、敷きマットを選んでもらうのってすごくいいですよ！

布団や枕やマットなどの常識も昔からどんどん進化していて知識はかなり変わっているそうです。

いつまでも「布団は真綿、打ち直しをして使うのが一番」って思っているおばあちゃんの気持ちは大事にしたいですが、

おばあちゃんの体がもっと体調良くなるんだったら、最新の良いおふとんを紹介してあげたいです。

ということで、飯田近辺にお住まいの方は、もりたけ布団店さんにぜひ行ってみてください。

長野県以外の皆さんは（＾＾）、お近くでまじめに良いお布団を提供している信頼のおけるふとん店に行ってみることをおすすめします

取材中のヒトコマより
羽布団の中の羽を入れ替えています

取材中のヒトコマより
まくらの中の詰め物をグラム単位で調整しています

わたしが作ってもらったオーダー枕を紹介します(^-^;)

ディスクの空き容量が非常に低下しています。 という広告が出たら

最近このような変な広告がfacebookの下に出るようになって、

facebookを見ている時だけ出るのでてっきりfacebookがこんな変な広告を承認しているのかと思って不審に思っていたところ

どうも私のPCの方がなにかにとりつかれて、このような広告が勝手に出てしまうということがわかりました。

facebookで友人に問いかけしてみたところ、

「自分のところには出ていないのでPCがやられていませんか」

「自分も同じ症状だったので、詳しい人にレジストリを変更して直してもらったが、再起動したらまた出てきた」

「前から出てるけどマックなので安心と思っていた」

「うちはブラウザがSleipnirでAmazon見てると出る」

うちはWindows7ですが、出るのはfacebookだけなので、Amazonバージョンとかいろいろあるみたいです。

「ディスクの空き容量が非常に低下しています」で検索したらたくさんの困っている記事がヒットしたけど、解決方法はスパムアプリの種類によっていろいろなので、一つではないようです。

GOMプレイヤーをインストールしたらついてきたという例もありました。

そこで、またfacebookを見ていたら変なアダルトゲームの広告が出てきたのでためしに右上の×をおしてみたところこのようなメッセージがでました。

キャプチャを撮り忘れてしまったんですが、Google翻訳に入れて翻訳してみたところです。

一度だけ寄付をすれば出なくなるそうだ、馬鹿にしてますねー

上記のテキストの中に、「neat-bookmarks」というキーワードがあったので、その名前で検索したら、GoogleChromeにこのようなアドオンが入ってるのに気がつきました これは何だろう、、、知らないうちに入れたのか？？

https://chrome.google.com/webstore/detail/neat-bookmarks/pnbmhmngmdppipkoognikjonljicbhnl?hl=ja

GoogleChromeの拡張機能はこの方法で削除します。

削除したところ、変な広告は出てこなくなりました。めでたしめでたし。

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

illustratorでキャラクターに色を塗る方法

この記事は、アトリエwebの森のブログへ移転しました。

お手数おかけしますが下記を読んでください。


http://webnomori.net/2016/02/14/post-1241/

無料ブログや無料サービスのリスクとメリットを理解したうえで使いましょうというお話

Jimdoの無料プランが使いやすくなりました

ホームページ作成サービスjimdo（ジンドゥー）の無料プランがかわって、目立たないところに広告が出るようになりました。
これで無料プランの方も、ロゴが邪魔にならないので嬉しい改訂ですね！
でもね・・・ちょっと気をつけて。もしかしたらJimdo側の作戦かもしれませんよ！？

独自ドメインは自分のお宝、サブドメインはドメインの持ち主（この場合無料サービスを提供している側のことです）のお宝。

サブドメインというのは、

★★★.jimdo.com

というホームページのアドレス（URL）のことです。

せっかく★★★というドメインをとったつもりになっていても、サブドメインで使う以上、結局Jimdoの傘下なのです。

Jimdoにとっては、無料プランでも邪魔な広告が入らないので、お客様が出て行ってしまう心配がよりなくなります。

広告が目立たないなら、無料で使ってみようという人も増えるはず。

ブログやホームページの中身（記事）は財産というお話

「お宝」という意味をいろんな人に伝えて来てるんだけど、なかなか理解して貰えないのですが、ブログであれ、ホームページであれ、中のコンテンツが一番のお宝、財産なのです。

このお宝を自分のものにせずに、無料プランを使う考え方はわたしはすごく勿体ないと思います。

アメブロやライブドアでブログを作れば無料でできます。

でも無料は所詮無料、いきなりサービス終了されたり、規約を変えられたりしても文句は言えないですし、無料ブログや無料Jimdoの中で記事をふやしていくのは、お宝をどんどんサービス提供側に貢いでいるようなものです。

だって、利用者が増えれば増えるほど、インターネットの中でそのサービスは最強になっていくので・・・。

無料だから気軽に始められると使っていて、もしもあるとき独立したい、お宝は自分のドメインの中に保持したいと思った時、SEO対策についてはかなり不利になります。

なんしろ、新しくとったドメインは検索エンジンにはまったく信用されていないわけですから、これからコツコツと信用を勝ち取るために時間をかけないといけないのに、それを一からやりなおししなければいけないということです。

わたしがBloggerを利用しているメリットとリスク

とはいえ、このブログも、Bloggerなので、グーグルさんの持ち物なんですよね。
なぜ私がBloggerを使っているのか・・・って、

私は個人的にグーグルを信用し、グーグルとは仲良くして好かれたいと思っているからです。(^-^;)

グーグルアナリティクスや、グーグルプレイス、Gmailを始め、いろんなサービスでグーグルを利用してるので、ちょっとは貢献もしなければ・・・なんてネ。。

このブログのおかげで、グーグルからの新しい読者はいっぱい増えたし、別のところで知り合った同業者さんから「あのモモンガさんですよね？けっこう有名ですよ」と褒め言葉をいただいたりもするんですが、
もしも私が今まで書いた記事を一切持ち出しして、自分のドメインの中に引っ越ししようとした場合は、記事の移転というかなり面倒な作業、そして自分のブログのSEO対策を一から始めないといけなくなります。

というわけで、無料サービスを使う以上、そのリスクと、メリットを両方わかったうえで

納得してから利用しましょうというお話でした。

楽天ショップを1週間でオープン「オリジナル授乳服のブランドサイト」

６月末から、夜も寝ないで（昼間寝て）、手が腱鞘炎になりかけてもひたすらペンタブレットを握り、がんばったサイトがオープンになりました。

楽天の通販ショップです。
今までいくつもネットショップのお手伝いをしてきましたが、楽天サイトは初めての経験だったので、最初はわけがわからず（あの管理画面の中・・・迷路ですね）、戸惑ったこともいっぱいありましたが、ひとまずは一段落したので、心の中で乾杯です。

これからますます素晴らしいショップに育っていって貰えますように、先が楽しみです。

オリジナル授乳服のSophie（ソフィエ）様

なんとこのサイト、私がお引き受けしてから、１週間でほぼここまでできました。

今まで手がけた通販サイトの中では最短時間でできたと思います。

幸運だった理由がいくつかあるのですが、

1. 商品コンセプトが独自性があり良かった
   
   他にない独自商品を開発しているショップ（というかメーカー）なのですが、
   目の付け所が良く、他にない良い品を作っているので、アピールするのが楽だった
2. 写真が良い！
   
   実は良い商品も、写真が良くなければすべてだいなし。
   たいていは写真がないところからサイト制作がスタートするのでそのぶん時間がかかるのですが、すでに素晴らしいカメラマンさんに撮ってもらったたくさんの素材が揃っていました。
3. 店長さんが信頼して任せてくれた
   
   時間がなかったこともあるんですが、とにかくお任せするので、どんどん作り上げてくださいと頼まれたので、本当にかなり好き勝手にやらせてくれました。
   しかもこちらが足りない原稿をお願いするとすぐに用意してくれる協力ぶり！
   デザイン段階でチェックをすることもなく、どんどんサイト上で作っていったので
   「見るたびにモモンガさんマジックでサイトがどんどん素敵に変身していって嬉しい」と喜んでいただけました(^-^)

逆に言うと、ネットショップのオーナーさんは、サイトのデザイン制作を安く上げたい場合、上記の条件をクリアしているとかなりお得に制作して貰えるということになります。
webサイトの制作費なんてほとんどが人件費ですから、一人が１週間かかりっきりで仕上げた場合と、１ヶ月かかりっきりで仕上げた場合とどちらが高くなるか想像がつきますよね。。。？

ハーブティーのバナー

ソフィエさん専属のカメラマンの方が素晴らしく写真が上手で、このような美しい写真をいっぱい撮ってもらえました。

それで、素材が良いと、デザイナーはやることあまりありませんｗ　バナーなんてさくっと出来ちゃうのです。

まず良い写真を撮ること・・・これで80％決まり！

ハーブティーの誕生ストーリー

この１週間、店長さんと何時間も電話で話して、この商品開発にあたっての熱い思いを、教えてもらいました。

私もそれに共感できたので、この漫画が誕生したのです。
乳児がいるママにとって本当におっぱいに関する心配事って最大重要なのですよね。
オーガニックでママにも安心なハーブティーなので、ひとりでも多くの悩んでいるママに知って貰いたいなと思います。

続きはこちら⇒⇒⇒ラクトハーブティー

フォーマルに使える素敵な授乳服

店長さんが、サイト運営に関して知り合う人からことごとく　「どこから仕入れているんですか？」　と質問攻めに合い、そのたびに「いえ、仕入れているんではなく、オリジナルで作ってるんです」と返答しなければならなかった・・・・
そこで、「授乳ママのためのSophie」から「オリジナル授乳服のソフィエ」に店名を変更することにしました。
それでもまだ、仕入れていると思われがちなので、サイト内いろんなところで説明していますが、まだまだ人に知られているブランドではなく、小さな誕生したばかりのメーカーなので・・・
これからどうやって、独自ブランドサイトらしさをつくりあげていくかが課題です。

フォーマルに使える素敵な授乳服

こんな授乳ケープが欲しかった！

授乳ケープって知っていますか？
母乳育児中のママなら、誰でもお出かけ先で、赤ちゃんにおっぱいをあげる場所を探して苦労した経験があるはず・・・・・
でもこんなケープがあれば、人目を気にすることもなく、お買い物中の休憩所でも、公園のベンチでも、おっぱいタイムができちゃうのです。

ところがこの授乳ケープ、どこにでもあるものと違います。
店長さん自らこだわってデザインしただけあり、イニシャル付きのおしゃれなポーチとセットで、出産お祝いにしたらとても喜ばれそう・・・授乳期が終わっても赤ちゃんの思い出と共にずっとポーチが記念に使えます。

オリジナル授乳ケープとポーチはこちら

通販ショップは作るまでも一苦労ですが、その後の方が数倍大変、、、、やることが山ほどあって終わりのないレースに参加したみたい。でも走りを止めるわけにはいきません(^-^;)

サイト制作と集客の両輪、どちらも欠けてはだめなんだけど、

集客がなければサイトを見て貰えない、集客しても、サイトが良くなければ10秒で×マークでウィンドウを閉じられてしまう、、、ニワトリが先か卵が先かを常に頭に思い浮かべながらがんばるわけです。

SEO対策、広告、メルマガ、接客、次の商品作りやセールなどの企画、、やることいっぱいあって大変ですよね、、、

がんばれっネットショップ店長さん！

webの森では、ネットショップの運営を
実践で学ぶ「EC実践会」のお手伝いをしています。
興味がある方はお問い合せください。

Dreamweaverで、PDFファイルをサーバーにアップできない時

Dreamweaverで、PDFをサーバーにアップしようとするんですが、原因不明のエラーでアップできない！？

いろんな理由があるとは思いますが、ウィンドウズで、フォルダにてプレビューウィンドウを開いている場合は、閉じてみてください。

プレビューウィンドウを閉じるだけではだめで、

フォルダのウィンドウごと、閉じた方がうまくいく場合が多いです。

備忘録でした。

ちなみに参考サイトはこちらです。
クリックでPDFをダウンロードできるようにしました。

Fireworksでテキストの回り込み

illustratorなら簡単にできるのにFireworksでできない事・・・やはりテキスの機能が弱いことですが、よく困ることのひとつに、「テキストの回り込み」が出来ないこと。

ブロックに流し込んだテキストも、前面にきた画像にかぶらないように回り込みをさせたい場合が多いですよね。

今まで苦労して、二つのブロックに分けたりしてたんですが、ふと思いついてこの方法を試してます。あんまりスマートな方法じゃないですが・・・・・

（１）矩形を二つ描きます

（２）二つの矩形を合体（パスを結合）します

（３）流し込みたいテキストを入力します

（４）両方を選択しておいて、メニュー⇒テキスト⇒パス内に流し込む

（５）こんな形に流し込みました