2013-09-13 の勉強会でGIFアニメについてやるとになりました。(前回の勉強会の後のマックで)
やるにあたって具体的に何を用意していけばよいですか?先生。
ちなみにGifアニメと上で↑動いてるやつです。Flashではありません。
こちらのサイトにのってました。
http://matome.naver.jp/odai/2124771110937828068
すごいですね~。アイデアもいい!
最初からこんな凄いのは出来ないと思いますが、まずは簡単なのを作ってみましょう!
2013-09-13 の勉強会でGIFアニメについてやるとになりました。(前回の勉強会の後のマックで)
やるにあたって具体的に何を用意していけばよいですか?先生。
ちなみにGifアニメと上で↑動いてるやつです。Flashではありません。
こちらのサイトにのってました。
http://matome.naver.jp/odai/2124771110937828068
すごいですね~。アイデアもいい!
最初からこんな凄いのは出来ないと思いますが、まずは簡単なのを作ってみましょう!
サイトのメニューのホバーをふわ~っとさせて、かわいくするにあたってのの注意点。
(2013-09-06勉強会・制作中のサイトを先生に見てもらったらアドバイスを頂いたのでメモしておきます。)
上の3つと下の3つの違いわかりますか?上3つはホバーした時の「ほわ~」が遅いのでユーザーが少々いらいらするかも。なので下3つはちょっと速くしたのでいらいらしない。(と思う)
もう1つ。カーソルを外した時に上段は「ぱっ」ともとに戻るのでかわいくない。下段は「ほわ~」っと戻るのでかわいい。戻るのはゆっくりでもいらいらしない。(と思う)
醤油ラーメンを注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしないでしょ。それと同じ心理かな。または、かつ丼を注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしない。さらに、みそラーメンを注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしない。……..読んでいらいらした?
1 2 3 4 5 6 7 |
nav ul li a:hover{ color:#ccc; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
nav ul li a{ color:#000; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } nav ul li a:hover{ color:#ccc; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } |
メインで使っているパソコン(2007に生まれて初めて買ったDELLのデスクトップ)が古くなったので新しいのにしました。
iMac 21.5インチ: 2.7GHz メモリ8GB 容量1TB
CD入れる所がないので、外付けの Apple USB SuperDrive を買いました。キーボード&マウスは付いてきます。
27インチと迷ったけど予算的にとスペース的に考えて21.5インチにしました。お店で見ると27インチのとなりで小さく見えますが、家に持ち帰ると大きいです。
当たり前だけど断然きれい。アドビのCS6ソフトもネットで買いました。
あー、お金が無い~。
ロリポップがサイバー攻撃を受けています。
WPで制作したサイトhttp://kuulei90.com/、本来はkuulei oficial siteとなるのですが、
Hacked by Krad Xin
BD GREY HAT HACKERS
になっていて、さらに開けないページもあります。サイトを乗っ取られたのか?!
ロリポは現在復旧作業にあたっている模様です。http://lolipop.jp/info/news/4149/
みなさんのサイトは大丈夫?
これは、じっくり待つしかないんですかね?
噂ではメールアドレスを探しまわっているロボットがいるらしいです。ロボットといってもマジンガーZやゲッターロボのようなものではありません(だとしたらかっこいいなあ)。残念ながらただのコンピュータープログラムです。
世界に何万とあるサイトに訪れてメールアドレスを探している。(らしい )
ページをパッと見て、以下の様なmailtoのある記述を探しているのです。(おそらく)
1 |
<a href="mailto:info@hogehoge.com">お問い合わせメールはこちら</a> |
パッとみて無ければ他のサイトに行ってしまいます。(きっと)
それならば、javascriptでメールアドレスの表示を数秒送らせて、ロボットにフェイントをかけてみようではありませんか!さらに拡張子偽装もしちゃいましょう!これで安心!(なにもしないよりかは)
以下のコードをそのままコピーしてテキストエディタ(ドリームウィーバーやテラパッドなど)にコピー。ブラウザでプレヴューしてみて下さい。3秒遅れてメアドが表示されますね。何秒遅らせるかはあなたのセンス次第です!
簡単でしょ。(htmlとjavascriptをだいたい理解できてるという人前提です)
id名やメールアドレスや数字(何秒遅らせるか、3000は3秒)など自分なりに書き変えてやってみて下さい!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>js-test</title> </head> <body> <div id="wm"> ここがメアドに変わるのだ </div> <div id="hoge"> 天才 </div> <script> //w.js window.onload = function() { setTimeout('dispText()',3000); } function dispText() { m1="info"; m2="@hogehoge.com"; document.getElementById("wm").innerHTML = '<a href="mai'+'lto:'+m1+m2+'">'+m1+m2+'</a>'; document.getElementById("hoge").innerHTML = 'バカボン'; } </script> </body> <!-- Created 2013/8/23 --> </html>js |
2013-08-23の勉強会でアイコムーン「シンボルフォント」についてやりました。
アイコンを画像ではなく文字情報として扱うので大きく表示した場合に画像だとギザギザになるのが、これだとギザギザになりません。
http://icomoon.io/だいたい無料
1 |
<div class="fs1" aria-hidden="true" data-icon=""></div> |
が、ありますよね。
それを使いたいHTMLにコピペすればつかえます。その際にHTMLとstyle.cssとfontフォルダのパスの位置に注意して下さい。パスの位置はindex.htmlを参照。あと、index.htmlをブラウザで開くとどんなアイコンが入っているか見る事ができます。
ie対策の人は、index.htmlのheadにある以下の文を自身のheadに貼りつけて!
1 |
<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]--> |
icomoon使い方でググると色々出てきます。僕の説明だけじゃ????の人は、それらも参考にしてみて下さい。もちろんコメントしてくれれば、お答えします。
↓↓↓↓↓↓↓↓
かおりんごさんが別記事で書いてくれました。
http://clubringo.com/longshadow-icon/
本を見ながら作ったPHPお問い合わせフォームですが、セキュリティーの問題が解決しそうにありません。
難しいです。先生に無料のフォームを利用するのも解決策の1つと言われました。
(本で勉強してやったことは実際の実務に使えなくても、PHPの理解に大いに役にたった。)
このサイトのフォームを使ってみようと思います。
http://www.php-factory.net/mail/01.php
質問
メールフォーム Shift-JIS版
メールフォーム UTF-8版
メールフォーム EUC-JP版
3つあるのですが、やはりUTF-8版がよいですかね?
よろしくお願いします。
デザイナー必見
http://www.tbs.co.jp/american-pop-art2013/
この仕事(webデザイナー)をする前は、絵を描いたりアートは好きでしたが、わざわざ美術館に足を運ぶことはしませんでした。2,3年前にタイポグラフィー展に行ったのをきっかけに、ちょくちょく行くようになりました。そんなの本やネットでも見れるじゃん!という意見もあると思いますが、本物をまじかで見ると作品のもつ力を感じとれますよ。音楽と同じだと思います。どんなに良いライブのDVDやCDがあったとしてもライブ会場での感動には足元にも及ばない。
料理家が美味しい物を作る為に常に食べ歩きをしていたり、音楽家がいい音楽を作る為に常に色んな音楽を聞くように、よいデザインをしたいのであれば、よいものを見る為に美術館に足を運ぶというのは大事なことだと思います。ただ、見に行ったからといってすぐによいデザインが出来るわけではありませんが、デザイナーとしてなにかプラスになると思います。
質問内容は、記事のタイトルのまんまです。
アイキャッチ画像のように、デスクトップでは写真が縦に表示されているのに、iphoneでは横になってしまうのはなぜでしょうか?
よろしくお願い致します。
画像や文字を半透明にするには、今まではpngで書き出してましたが、それらはcss3で出来るようになりました。便利ですねー。
1 2 3 4 |
<section> <h1>見出し</h1> <p>テキスト</p> </section> |
sectionに背景#fffでopacity:0.4にするとこうなる。
sectionの中にあるhlとか画像とか全部が半透明。
文字や画像はそのままで、背景色の白だけ半透明にするには 続きを読む
①初めてみた人にアピールできるような内容にします。例えば「会員募集中!」とか,
他にはクラブ内容が一目でわかる様なものです。
②現在画像がリンクになっていないので、リンクにします。
僕が担当することになりました。
front-page-php
style.css
この辺りをカスタマイズ。
—————————
という事で、ファイルを見てみましたが全く見当がつきませんでした。
制作したサイト「GLOSSY」
http://glossy-wax.com/
お問い合わせフォームをPHPで制作しました。
入力ページがあり、確認ページがあり、「送信完了。ありがとう」ページの3つで構成されています。
必須項目があり、それが無記入だと確認ページで入力ページに戻るボタンが表示されます。
必須項目が全部記入されていると、送信ボタンが表示され送信可能になります。
なのに、最近一日一件、お問い合わせフォームから情報が空のメールが送信先に届くのですが、
原因として考えられるのはなんでしょうか?
よろしくお願いします。
phpのシステムエラーで一日一回メールを送信しているとも考えられないし、誰かがいたずらするにしても必須項目に
文字を入れないと送信ボタンは出現しないし、テスト送信は何度も行いまして問題なかったし、
謎です。
thanksページに検索ロボットがクロールしてきたせいでした。リファラのチェックなどを見直し、謎メールは来なくなりました。
以前「WordPressのソースコードを見やすくしたい!」という記事を書いて投稿しました。
その件について2013-07-26の勉強会でタカハシ先生が教えてくれました。
「Advanced Code Editor」というプラグインが良さそうですので、先ほど(2013-07-27)インストールして有効化しました。
参考にさせて頂いたサイトhttp://motoshige.net/blog/archives/3997
今回プラグインを探すのに「wordpress ソースコード」というキーワードを入力してたら、全くヒットしませんでした。
「wordpress テーマ編集 プラグイン」と入力したら、たくさん出てきました。
キーワード検索は、基本知識が必要ですね。コツというか。
—————————————
使用してみましたが、プラグインが重たいみたいなので、インストールしたままで無効にしました。2013-08-02
制作&管理しているhttp://kuulei90.com/
投稿カテゴリー「blog」「news」「photo」があります。
3つのページ全部にコメント出来るようにしてましたが、コメント出来るページを「blog」だけにしたいとの要望。
”固定ページー編集ー表示オプションーディスカッションにチェックを入れるーコメントの投稿を許可するのチェックを外す” で出来ます。簡単それだけ!
固定ページ一覧に入って「あれれ….?」 続きを読む
WPでサイトを制作中です。↓
http://kuulei90.com/
トップページに画面いっぱい横長のアイキャッチ画像があります。その下に2つのコンテンツがあります。
①あいさつ文(これは直接固定ページにhtmlを書いた)
②pick up news!(これはfront-page.phpに記述。ニュースページに投稿があったら、サムネイル&抜粋文を自動で表示/clubringo.comと同じ仕組み)
この2つを横並びにしようとcssでfloatしてもなりません。
どうしたら横並びになりますでしょうか?