1 / 26

松田研のみなさん

松田研のみなさん. こんにちは. 宮崎優太郎 ( ウェブクリエイター ) ( フォトグラファー ) です. 毎日 ぼっちで 働いて います. きょうのおはなし. 1 ……… 皆 のお仕事 2 ……… 現状 と問題の把握 3 ……… 解決方法 4.1 …… サイト 紹介 4.2 …… kwsk ( 構造、しくみ ) 5……… 利用例 6……… ｊ Query. 皆のお仕事 見ました ? 松田研のホームページ. かっこいいんだけど … ・誰も更新できない ・ Flash とかナンセンスだよね ・詰めが甘い. そこで. やはり.

indiya
Download Presentation

松田研のみなさん

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 松田研のみなさん

  2. こんにちは

  3. 宮崎優太郎(ウェブクリエイター)(フォトグラファー)です宮崎優太郎(ウェブクリエイター)(フォトグラファー)です

  4. 毎日ぼっちで働いています

  5. きょうのおはなし 1……… 皆のお仕事 2……… 現状と問題の把握 3……… 解決方法 4.1…… サイト紹介 4.2……kwsk(構造、しくみ) 5……… 利用例 6………ｊQuery

  6. 皆のお仕事見ました?松田研のホームページ

  7. かっこいいんだけど… ・誰も更新できない ・Flashとかナンセンスだよね ・詰めが甘い

  8. そこで

  9. やはり

  10. あれですね世の中には便利なものがある

  11. CMSを知っているか Movable Type WordPress concrete5

  12. WordPressの管理画面

  13. 世のWordPress WebcreatorBox http://www.webcreatorbox.com/ WordPressの本来の使い方 = ブログ ---------------------------------------------------------------- 美人スナップ http://www.bijin-snap.com/ 写真投稿型Webサービス

  14. 世のWordPress 株式会社トンボ鉛筆 http://www.tombow.com/ ---------------------------------------------------------------- 昭和女子大学 http://swu.ac.jp/

  15. で、WPってどうなってるの?

  16. WordPressテンプレート構造

  17. jQuery

  18. jQueryサンプル ・タブ切り替え http://www.finefinefine.jp/web/kiji422/ ・アコーディオンメニュー http://webdesignrecipes.com/webdesign-jquery-coding/#p13

  19. jQueryサンプル ホバーアクション <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function($){ $(".entry-excerpt").css("bottom", "-39px"); $('.img-link').hover(function(){ $(this).find('.entry-excerpt').stop(true).animate({ bottom: "0"}, {duration: 100, easing: "linear" }); }, function(){ $(this).find('.entry-excerpt').animate({ bottom: "-39px"}, {duration: 200, easing: "linear" }); }); }); </script>

  20. で、松田研のホームページで必要になる機能は…で、松田研のホームページで必要になる機能は…

  21. 1.Windowサイズの背景画像とスライド機能 2. 内部Windowとスクロールボックス 3. 各要素のスライドイン/アウト

  22. 1. 背景画像とスライド supersized http://www.buildinternet.com/project/supersized/

  23. 2. 内部スクロール Gleam http://elegantthemes.com/preview/Gleam/

  24. 3. 要素のスライドイン/アウト 探してみよう。

  25. さいしょのおしごと WPの構築環境を確認/用意 必要なページを列挙 ページ毎のコンテンツを定義 ワイヤーフレームの作成

More Related