月別アーカイブ: 2013年5月

レスポンシブWebデザインのモックアップ作成に便利なツール「FROONT」

今日はレスポンシブWebデザインモックアップ作成に良さそうなツール「FROONT」を紹介します。

登録したばかりで使い方も把握してなくて言うのもなんですが(^^;A、上手に使えばかなり便利なツールになるかもしれません。
まずは、Watch video を見てみて下さい。おぉ〜、なんか良さげじゃないですか?
ちなみにこのサイト、今流行りのフラットデザインですね。
しかも、Pantoneの2013年のトレンドカラー、エメラルドグリーンも押さえてます。

よかったら皆さんも試してみて下さい♪

2013-5-24 勉強会

今日もランサーしょうじさんはお休みでした。寂しいなー・・・(ノ_・。)
勉強会の概要

  • kanedaさんからの質問。リスティング広告とはなんですか?
  • りんごのサイトに入会申し込みフォームを作る。(会員を増やそうキャンペーンを開始!!)
  • かおりんごさんの提案「1からりんごのオリジナルテーマをつくろう」
  • 真中のぶさんのリクエスト「パックマンをパクパクさせながら画面の右から左に移動させる」

続きを読む

wordpress

WP テキストの背景に写真を表示させる

貴如意さんサイトのトップページ。http://kiraku07.info/
あいさつ文の背景に朝日の写真が表示されています。
WPで、このように固定ページに写真の上にテキストを表示させるには、どうしたらよいのでしょうか?

通常のHTML,CSSの場合はcssのbackground-imgで指定すれば良いのですが、
貴如意さんサイトを見ると写真とテキストは、それぞれdivで囲まれています。

それと、写真はレスポンシブになっています。それには何か指定が必要でしょうか?

よろしくお願い致します。

勉強会の提案

これからの勉強会に提案があります。
このサイトのオリジナルテーマを一から作っていきませんか?
題して「html5で作るワードプレスオリジナルテーマ」
なんてどうでしょう?

html5もphpもデザインも制作の流れも学べますし、
チームで作り上げて行くことも良い経験になると思います。
制作過程は、このサイトで連載します。

これを一つの柱に、あとは個人の取り上げて欲しいお題を勉強するのは如何でしょうか?

2013-5-24 勉強会リクエスト

勉強会でやって欲しい事をリクエストします。

①動画挿入用プラグイン「Viper’s Video Quicktags」を先ほどインストールしました。
 簡単に出来て特に問題ないのですが、iphoneで見るとサムネイル画像が縦に伸びてしまっています。
 クリックして別画面が開き動画を見る際には問題ありません。

②先週のcssアニメを自分なりにアレンジしてやってみました。それについての質問です。
 こちらを見て下さい。
 http://nobu-69.com/study/css_packman/css-packman.html
パックマンがパクパクやっているのは上手く出来ました。
「パックマンをパクパクさせながら画面の右から左に移動させる」
という所で、つまずいています。

勉強会用にzipファイルも用意しました。
http://nobu-69.com/study/css_packman/css-packman.html

以上

よろしくお願い致しまするん。

②について勉強会でやりました。ありがとうございました!

こんな感じで実装できました。

WP 動画挿入用プラグイン「Viper’s Video Quicktags」

動画挿入用プラグイン「Viper’s Video Quicktags」を入れてみました。

「YouTube」というボタンを押せばダイアログボックスが出てきますので、画像のurlを入れて下さい。
サイズも変えられるよ!
[youtube]http://www.youtube.com/watch?v=DC6J1kUd-64[/youtube]

参考サイト
http://wp-site.biz/4618

レスポンシブWebデザインだから迷う?IEと共存するためのポイント!

レスポンシブWebデザインを考える際に、IE8以前(IE8~6)の古いブラウザについて、どのように対応するかを考えてみました。
どうすれば、手間が少なく古いブラウザへの対策ができるのか?
レスポンシブWebデザインを作る際の覚書です。

制作のための前提条件

考えるにあたって、下記の条件のクリアを前提としました。

  • 旧ブラウザはIE8~IE6を含める。
  • IE8~IE6でもCSS3使ったデザインを行う。
  • IE6でもpng画像を使用する。
  • デバイスはスマートフォン、タブレット、PCの3種類を想定する。
  • CSSはモバイルファーストを考慮にいれた記述方法とする。

日本ではまだまだWebページを見るためにIEを使う人が多いです。
デザイン面を考えるとCSS3を使っている場合、ChromeやFirefoxとIEを比べたときに見た目が変わってしまうことがあります。
その辺りの事情は、見る人にはなかなか理解してもらえない現状もあるので、jsライブラリの利用で透過png画像やある程度のCSS3を使えるようにして解決してしまおうというワケです。
また、制作者としてはモバイルファーストも意識したいという気持ちあったりします。

レスポンシブに「必要なこと」「不要なこと」

レスポンシブWebデザインと言うと、デバイスごとに異なるデザインになることに意識が向きがちです。
過度に「レスポンシブ」というキーワードに振り回されていないか、制作の際に必要なこと不要なことをざっくりと切り分けてみました。

「必要なこと」
スマートフォン、タブレット、PCの異なるデバイス間で、それぞれに適したデザインで表示される。
「不要なこと」
PCでブラウザ幅を変えたときに、デザインが変わる。

異なるデバイス間での表示に適したデザインにすることは必要なことですが、PCでブラウザを幅を変えた時にデザインが変わることは必ずしも必要なことには思えませんでした。
その理由としては、PCではわざわざブラウザの幅を狭くして、タブレット用のデザインでWebページを見ることはほとんどないからです。

レスポンシブの対象は@media queryに対応しているブラウザ

「必要なこと」「不要なこと」の切り分けができれば、闇雲なレスポンシブに走ることもなく、デザイン、技術の面で必要な対応が見えてきます。

  • PCでは、PC向けのデザインを見せる。(固定幅のデザインを見せることが出来れば良い)
  • IE8以前のブラウザを搭載したスマートフォン、タブレットがない。

「不要なこと」で切り分けたことを元に、PCでは固定幅デザインを見せるようにします。

また、IE8以前のブラウザを搭載したデバイスは、PC以外には無いことも考慮すると、無理にjsライブラリでIE8以前の環境で@media queryに対応する必要はなくなりますね。

制作の際はIE8以前ブラウザ向けに、固定幅の専用CSSを用意して条件分岐コメントを使って読み込めば大丈夫です。
(モバイルファーストなCSSの記述にしなければ、固定幅専用のCSSを用意する必要はなくなりますが、この辺は個人的なこだわりです。)

画像の扱いから気づいたこと

他に気づいたこととしては、@media queryに対応していないブラウザは「background-size」にも未対応です。
そのため、フルードイメージへの対応も難しく中途半端になってしまいます。

Webサイトを制作する上で、画像を全く使わないということもほとんどないので、フルードイメージに対応出来ないブラウザは、@media queryにも対応しないという制作方針にしてしまうのも1つの方法かなと考えました。(でも、border-radiusなどのCSS3は使いたいので、その辺はjsライブラリで何とかしてしまいます)

画像について考えると、「Retinaディスプレイとか高解像度ディスプレイはどうするの?」という疑問が出てきますが、長くなりそうなので、他の記事としたいと思います。

TOPページのデザインを変更しました

front-page.phpを編集し「パソコン倶楽部りんご」TOPページのaside部分を最新の投稿5件に変更して、カテゴリー、タグ、投稿者を表示するようにし、コメントも最新の5件を表示させました。これに伴い、Front-page用のウィジェットエリアに入れていた、投稿とコメントのウィジェットは削除しました。
また、「おすすめ」というタグを作成しておいたので、りんごユーザーの人は、自分がお勧めしたい投稿に「おすすめ」タグをつけて下さい。数が揃ったら、上記のaside内などに表示してみます。

2013-5-10勉強会

今日はランサーしょうじさんがお休みです。でもお菓子は確保。
勉強会の概要は

  • cssアニメーションでパラパラアニメを作る方法
  • 画像スライドアニメーション
  • Facebookとwordpressを連携させたいのですが…
  • レスポンシブWebデザインの覚え書き

です。 続きを読む

cssアニメーションでパラパラアニメを作る方法

animationプロパティのanimation-timing-functionの値にsteps()を使うと、簡単にパラパラアニメが作れます。こんな感じです。

作成の手順は以下の通り。

  1. cssスプライト画像を作る要領で、アニメの一連の動作を分解した絵を描いて一枚の画像に書き出す。横300px縦100pxでこんな絵を描いてみました。横50px縦100pxの5枚のスプライトをを繋げた状態です。
    パラパラアニメ素材
  2. クラスparapara要素を作り、この絵を背景にして、横50px縦100px、overflowをhiddenにします。animationを含めてcssの設定はこうなります。(ベンダープレフィックスは省略しています。)

簡単ですね?animation-timing-functionの解説はこちらなど。
実装はここの例を参考にしましたよ>codepen.io

「Adobe、 Creative Suite 6のパッケージ版の販売は終了Creative Cloudへ移行」なので、急遽CS6を指定校ライセンス版で購入〜の巻

Q. いつCreative Suite 7がでるのでしょうか?
A. だからでません!
キレてます!ヽ(@ @)ノ

と言う訳で本日は取り急ぎ、

CS6を指定校ライセンス版で購入しよう!

adobe

Creative Cloudの個人ユーザー向け価格設定は、

  • 年間プラン 月額5000円
  • 月ごとに停止できるプラン 月額8000円
  • 単体製品のサブスクリプション 月額2200円
  • CS3以降のライセンスを持つユーザー 最初の1年間は月額3000円
  • CS6のユーザー 最初の1年間は月額2200円

で利用出来るとのことですが、止めたらソフトが手元に残らないし、使うのはPhotoshopとIllustratorくらいだし〜な私には、この使用料は正直高い。

そこでCS6を指定校ライセンス版で購入出来るサイトを紹介しておきます。
オンライン通信講座の受講生になることで指定校ライセンス版が購入出来る、という仕組みです。
受講生になる、といっても自宅で好きな時に受講しても(しなくても)良いみたいですし、CS6パッケージ版の在庫もいつまであるのか不明なので、購入を迷っている方は覗いてみて下さい。
アドバンスクールオンライン

私はこちらで購入しちゃいました。届くのが楽しみだな〜(^^)ゞ

画像スライド アニメーション

下記のサイトのトップページ中央の画像スライド?アニメーション?
http://www.chanterelle.jp/index.html

これは、どのように実装しているのか教えて下さい。
jQueryかな。css3でも出来そうな気もします。(分らないけど)

出来たら本日の勉強会のお題としてお願いします。

—————————————————————-
2013-05-10 fri 勉強会でやってみました。jQueryではなく、css3で実装しました。
いい感じにできましたよ。タカハシ先生ありがとうございます!

僕のサーバーに作ったものをアップしたので見て下さい。
http://nobu-69.com/study/20130510_anime/green.html

html,cssは以下の通りでございます。ちなみにベンダープレフィックスは、書いてません。実際に制作で使う際には、ちゃんと書かないとだめですよ。

①家pngファイル 1000×86
home

②雲pngファイル 703×25
cloud

キーフレームを以下の様に指定するので画像の横幅の数値は重要です。横幅のサイズの数値を記入して下さい。違う数値を書くとカクカクした動きになったりします。

画像が重なっているのは、
position:absolute;
z-index
が効いているからです。

もちろん画像は変えられるし、動くスピードもかえられるので、アイデア次第で、面白い物ができそうですねー。

レッツ チャレンジ!

※ie9.ie8.ie6では動きません。

WP画像プラグイン nextGen gallery サムネイルがIEだと、ちゃんと表示されない事についての対処法

この記事のアイキャッチ画像を見て下さい。多分この文章の上に表示されてるかな。
上段のサムネイルがieによるものです。横幅が狭く、写真がつぶれちゃってますね。FireFoxで見ると下段の様にきれいに表示してくれます。

どうしてieはこんなにも意地悪なんでしょうか?

などと、愚痴を言っていてもサムネイルはつぶれたままなので、以下の記述をテーマのスタイルシート(style.css)に書くと直ります。

参考サイト
http://wordpress.org/support/topic/plugin-nextgen-gallery-ie-8-issue-with-image-lists