2015年3月31日火曜日

css3 日本一わかりやすいメディアクエリのことを簡単に解説


css3のレスポンシブ・デザインでよくこんがらがって、間違えてしまうのがメディアクエリの使いこなし。
いろんな方法がありますが、簡単な覚え書きをひとつ。




/*最初にスマホ以上すべての横幅のスタイルを書く*/

★ここにスマホを含むすべてのスタイルを記述

/*次にスマホの横サイズ以上になった場合*/
/* Minimum width of 600 pixels.最小幅600pxの記述 ⇒601px以上の場合 */
@media screen and (min-width: 600px) {
★ここにタブレットのスタイルを記述
}


/*次に、PC、デスクトップ以上になった場合*/
/* Minimum width of 960 pixels.最小幅960pxの記述 ⇒961px以上 */
@media screen and (min-width: 960px) {
★ここにPCだけのスタイルを記述
}




min-widthとか、max-widthとかいろいろ登場するのでわかりにくくなりがちですが、
min-widthとは、最小幅のことなので、つまりその数字以上の幅のスタイルをカッコ内に記述する
ということになります。

スマホの時代になってwebデザイナーさんが覚えないといけない技術もどんどん変化してます。
今、サイト構築上で一番時間をとられるのがスマホ対応にすること。
昔はIE対策だったのにね。。。あれはあれでつらかったですが・・・・・

2015年3月28日土曜日

facebookの新着記事をホームページに表示したい ⇒6月23日から新方式に変わるそうです

2015年3月28日速報です。
いつものようにfacebookの新着の窓をWordPressに出そうと思って、
デベロッパーページへ行ったら、見慣れない警告ボタンが出ていて、何やら新プラグイン方式に変わると書いてありました。

「???」と思って検索したら良い解説ページがあったので紹介します。


FacebookのLike Boxは2015年6月23日で終了。Page Pluginに変わります


今後はこのプラグインのページからコードを取得して、
それをウェブページのHTML部分に貼り付ける方式になります。




1)プラグインのページ の設定方法 こんなふうになっています






 2)コードを取得する画面




今まで表示させていた窓がどうなってしまうのかはまだ不明です。

6月23日以後になったら何か変わるんでしょうか・・・・

いきなり非表示なんて無慈悲なことをしないでいただけるのを祈ります。。。




メリットを発見しました。スマホ表示でwidthが100%になるようです。

今、いろいろテストしていて新たな発見があったので追記します。
今までのツールでコードを生成してウェブページへ貼り付けした場合
widthが変化しないので、
スマホで表示したときに崩れる可能性がありました。

でも新しいコードだと、スマホで見たときに横幅が自動的に100%になるようです。

Googleのスマホ対応強化に伴っての、facebookの仕様変更だったんでしょうか。

これは素晴らしいです!



(補足)facebookの固有アドレスを取得してない場合は・・・



facebookページのアドレスを取得してない方は、最初にやっておいた方が良いと思います。






2015年3月4日水曜日

世間に知られていないサービスや商品、なくても困らないので検索されないんだけど、知って貰いたい!そんなサービスへ集客する方法



たまたま友人が、「へ~~針に糸を通す方法こうやるんだ!」とシェアしていたので
動画を見ました。

針に糸を通す方法にも感心しましたが、
この方の動画プロモーションの使い方がとても上手なので備忘録しておきたいと思います。

動画で集客が流行っていますが、ここまで好感度が良く、丁寧に一人で作り上げているところをあまり見かけないので、ワタシ的に備忘録しておきたいと思いました。




チャンネル登録するとこのページに行きます


ヘッダーからホームページにリンクがしてあるので、公式サイトを見ることも出来ます。



すごい!と思ったポイント

  • 「へ~役に立つ!」とか「おもしろーい!」とか「かわいい!」とか、見る人にメリットがある動画を出している
  • 表紙を見ただけでどんなものが見えるのががわかり、デザインを統一してるのでブランドが認知してもらえる
  • チャンネル登録してね・・と、ユーザーを誘導する終着点(動画配信者にとっての目標)をちゃんと示す
  • チャンネル登録したくなるような、チャンネルのヘッダーと、わかりやすく整理された動画
  • みんなの作品集もリストに入れて、素敵な刺繍ファンの広場を築いている
  • 主催者の女性作家さんがとても好感度高い(見てて楽しい)
  • 刺繍教室という、検索されにくい分野で作家として集客していく方法をよく心得ていると思います
  • そして最後に出るこの肩書きにすごい!上手ですね。「刺繍イラストレーター」って一言で自分がナニモノなのか、ユーザーさんお客さんに何を提供できるのかをちゃんとアピールできています。
  • 針に糸を通すという多くの人が困っている事を入口にすることで、世間に知られていないサービス、まだみんなが知らない商品、なくても困らないので検索されないんだけど、知って貰いたい!そんなサービスへ集客するのにとても良い方法だと思いました。




公式サイトはこちらのようです >annas


作家・芸術家・クリエイター、何か新しい分野の講師、びっくりするほど他にない美味しいものを作っているお菓子・飲食店さん、プレゼントにぴったりのオリジナルの商品を作っている雑貨屋さん、などなど・・・・・・・なくても困らない、誰も知らないサービスや商品を知って貰いたい方はぜひ参考にしてみてください。
この大事なポイントに目をそむけて、SEO対策ばかり頑張っても無駄な労力になってしまいます。


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