作成者別アーカイブ: 真中のぶ

真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

学習履歴: WAVE立川校

職業: フリーのウェブデザイナー

SNS :

GIFアニメ

2013-09-13 の勉強会でGIFアニメについてやるとになりました。(前回の勉強会の後のマックで)
やるにあたって具体的に何を用意していけばよいですか?先生。

ちなみにGifアニメと上で↑動いてるやつです。Flashではありません。

こちらのサイトにのってました。
http://matome.naver.jp/odai/2124771110937828068

すごいですね~。アイデアもいい!
最初からこんな凄いのは出来ないと思いますが、まずは簡単なのを作ってみましょう!

CSS3 アニメーション(Transitions)

サイトのメニューのホバーをふわ~っとさせて、かわいくするにあたってのの注意点。
(2013-09-06勉強会・制作中のサイトを先生に見てもらったらアドバイスを頂いたのでメモしておきます。)

上の3つと下の3つの違いわかりますか?上3つはホバーした時の「ほわ~」が遅いのでユーザーが少々いらいらするかも。なので下3つはちょっと速くしたのでいらいらしない。(と思う)
もう1つ。カーソルを外した時に上段は「ぱっ」ともとに戻るのでかわいくない。下段は「ほわ~」っと戻るのでかわいい。戻るのはゆっくりでもいらいらしない。(と思う)

醤油ラーメンを注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしないでしょ。それと同じ心理かな。または、かつ丼を注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしない。さらに、みそラーメンを注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしない。……..読んでいらいらした?

iMac買いました。

メインで使っているパソコン(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のある記述を探しているのです。(おそらく)

パッとみて無ければ他のサイトに行ってしまいます。(きっと)
それならば、javascriptでメールアドレスの表示を数秒送らせて、ロボットにフェイントをかけてみようではありませんか!さらに拡張子偽装もしちゃいましょう!これで安心!(なにもしないよりかは)

以下のコードをそのままコピーしてテキストエディタ(ドリームウィーバーやテラパッドなど)にコピー。ブラウザでプレヴューしてみて下さい。3秒遅れてメアドが表示されますね。何秒遅らせるかはあなたのセンス次第です!

簡単でしょ。(htmlとjavascriptをだいたい理解できてるという人前提です)

id名やメールアドレスや数字(何秒遅らせるか、3000は3秒)など自分なりに書き変えてやってみて下さい!

参考にしたサイトhttp://www.nikkei-azabu10.com/smail14.html

icomoon

icomoon/アイコムーン

2013-08-23の勉強会でアイコムーン「シンボルフォント」についてやりました。

アイコンを画像ではなく文字情報として扱うので大きく表示した場合に画像だとギザギザになるのが、これだとギザギザになりません。

http://icomoon.io/だいたい無料

  1. 上記のサイトにアクセス
  2. menuのapp→start the app→アイコンがたくさん表示
  3. 矢印ツールで好きなのを好きなだけ選択
  4. フッターの「font→」クリックすると、Downloadとなるのでクリックしてダウンロードする。
  5. あっ、そうだ!ダウンロードの前にPreferenceをクリックして選んだアイコンをまとめたファイルに任意の名前つける。チェックboxは特になにもチェックしなくていい。
  6. ダウンロードすると任意の名前の後にアイコムーンがつけた数字のファイルができましたよね。例えばnobuyasu2041みたいなの。
  7. zzz01

  8. 実際に使用するのは、style.cssとfontフォルダです。ie7以下にも対応させたい人は、Ite-ie7.jsも必要です。
  9. index.htmlをテキストエディタで開いてみましょう。div class=”glyph”の中に

    が、ありますよね。
    それを使いたいHTMLにコピペすればつかえます。その際にHTMLとstyle.cssとfontフォルダのパスの位置に注意して下さい。パスの位置はindex.htmlを参照。あと、index.htmlをブラウザで開くとどんなアイコンが入っているか見る事ができます。

ie対策の人は、index.htmlのheadにある以下の文を自身のheadに貼りつけて!

icomoon使い方でググると色々出てきます。僕の説明だけじゃ????の人は、それらも参考にしてみて下さい。もちろんコメントしてくれれば、お答えします。

自分でイラレなどで作ったアイコンもシンボルフォントにしてくれる機能もあります。それについて、勉強会で実際にやっていた、kanedaさん、ジェイコさん、かおりんごさん、どなたかこの記事の議事録の続きをお願いします。

↓↓↓↓↓↓↓↓

かおりんごさんが別記事で書いてくれました。
http://clubringo.com/longshadow-icon/

PHPお問い合わせフォーム

本を見ながら作った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があったとしてもライブ会場での感動には足元にも及ばない。

料理家が美味しい物を作る為に常に食べ歩きをしていたり、音楽家がいい音楽を作る為に常に色んな音楽を聞くように、よいデザインをしたいのであれば、よいものを見る為に美術館に足を運ぶというのは大事なことだと思います。ただ、見に行ったからといってすぐによいデザインが出来るわけではありませんが、デザイナーとしてなにかプラスになると思います。

WordPressの投稿メディア画像、縦写真がiphoneで見ると横になる。

質問内容は、記事のタイトルのまんまです。

アイキャッチ画像のように、デスクトップでは写真が縦に表示されているのに、iphoneでは横になってしまうのはなぜでしょうか?

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

kuulei

cssで背景を半透明 (opacityとrgbaについて)

画像や文字を半透明にするには、今まではpngで書き出してましたが、それらはcss3で出来るようになりました。便利ですねー。

sectionに背景#fffでopacity:0.4にするとこうなる。
opacity

sectionの中にあるhlとか画像とか全部が半透明。

文字や画像はそのままで、背景色の白だけ半透明にするには 続きを読む

トップページのアイキャッチ画像をカスタマイズします。2013-07-31

①初めてみた人にアピールできるような内容にします。例えば「会員募集中!」とか,
他にはクラブ内容が一目でわかる様なものです。
②現在画像がリンクになっていないので、リンクにします。

僕が担当することになりました。
front-page-php
style.css
この辺りをカスタマイズ。

—————————
という事で、ファイルを見てみましたが全く見当がつきませんでした。

お問い合わせフォームから一日一件、謎の空のメールが届くのはなぜ?

制作したサイト「GLOSSY」
http://glossy-wax.com/
お問い合わせフォームをPHPで制作しました。

入力ページがあり、確認ページがあり、「送信完了。ありがとう」ページの3つで構成されています。
必須項目があり、それが無記入だと確認ページで入力ページに戻るボタンが表示されます。
必須項目が全部記入されていると、送信ボタンが表示され送信可能になります。

なのに、最近一日一件、お問い合わせフォームから情報が空のメールが送信先に届くのですが、
原因として考えられるのはなんでしょうか?

よろしくお願いします。

phpのシステムエラーで一日一回メールを送信しているとも考えられないし、誰かがいたずらするにしても必須項目に
文字を入れないと送信ボタンは出現しないし、テスト送信は何度も行いまして問題なかったし、

謎です。

解決しました。

thanksページに検索ロボットがクロールしてきたせいでした。リファラのチェックなどを見直し、謎メールは来なくなりました。

WordPressのソースコードを見やすくしたい人はテーマエディタのプラグイン「Advanced Code Editor」なんていかがですか?

WordPressのソースコードを見やすくしたい人はテーマエディタのプラグイン「Advanced Code Editor」なんていかがですか?

以前「WordPressのソースコードを見やすくしたい!」という記事を書いて投稿しました。

その件について2013-07-26の勉強会でタカハシ先生が教えてくれました。

「Advanced Code Editor」というプラグインが良さそうですので、先ほど(2013-07-27)インストールして有効化しました。
参考にさせて頂いたサイトhttp://motoshige.net/blog/archives/3997
今回プラグインを探すのに「wordpress ソースコード」というキーワードを入力してたら、全くヒットしませんでした。
「wordpress テーマ編集 プラグイン」と入力したら、たくさん出てきました。

キーワード検索は、基本知識が必要ですね。コツというか。

—————————————
使用してみましたが、プラグインが重たいみたいなので、インストールしたままで無効にしました。2013-08-02

wordpress

WordPress コメントをどうぞを消す

制作&管理しているhttp://kuulei90.com/

投稿カテゴリー「blog」「news」「photo」があります。
3つのページ全部にコメント出来るようにしてましたが、コメント出来るページを「blog」だけにしたいとの要望。

”固定ページー編集ー表示オプションーディスカッションにチェックを入れるーコメントの投稿を許可するのチェックを外す” で出来ます。簡単それだけ!

固定ページ一覧に入って「あれれ….?」 続きを読む

wordpress

WPコンテンツを横並びにしたい。

WPでサイトを制作中です。↓
http://kuulei90.com/
トップページに画面いっぱい横長のアイキャッチ画像があります。その下に2つのコンテンツがあります。
①あいさつ文(これは直接固定ページにhtmlを書いた)
②pick up news!(これはfront-page.phpに記述。ニュースページに投稿があったら、サムネイル&抜粋文を自動で表示/clubringo.comと同じ仕組み)

この2つを横並びにしようとcssでfloatしてもなりません。

どうしたら横並びになりますでしょうか?