WordPressで作るポートフォリオサイト

48,096 views

Published on

2012.04.28 第4回WordBench大阪にて発表 http://takumadesign.com/blog/wordbenchosaka-vol4-report/

Published in: Design
0 Comments
37 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
48,096
On SlideShare
0
From Embeds
0
Number of Embeds
29,630
Actions
Shares
0
Downloads
95
Comments
0
Likes
37
Embeds 0
No embeds

No notes for slide

WordPressで作るポートフォリオサイト

  1. 1. WordPress で作るポートフォ リオサイ ト 2012.04.28 WordBench 大阪
  2. 2. 自己紹介 西山 拓磨 • デザイナー(Web/グラフィック) • 専門学校講師takuma 大阪・京都を中心に活動しています
  3. 3. ポートフォリオとは‣ クリエイターの作品集‣ 自分を売り込むツール‣ 就活必須アイテム
  4. 4. 専門学校での担当授業「ポートフ リオサイ ォ ト制作」 ‣ 3回生を対象に就活の準備
  5. 5. 作りました!
  6. 6. サイトの目的‣ ポートフォリオとして実績紹介‣ ブログによる活動レポート
  7. 7. Web制作のワークフロー設計 実装
  8. 8. 設計サイト構造 ページ構造 デザイン詳細サイトマップ ワイヤーフレーム デザインカンプ
  9. 9. 実装文書構造 見栄え 振る舞い HTML CSS JavaScript
  10. 10. システム導入‣ デザインのテーマ化‣ 標準機能を拡張
  11. 11. サイトマップ Blog カテゴリー 記事Home Portfolio カテゴリー 作品 About
  12. 12. スケッチを描こう!
  13. 13. ワイヤーフレーム
  14. 14. デザインカンプ
  15. 15. コーディング‣ HTML5 + CSS3‣ 新要素を使ってマークアップ‣ できるだけ画像を使わずに表現
  16. 16. HTML5の準備<!DOCTYPE html> ✓ DOCTYPE 宣言<html lang="ja"><head> ✓ lang属性<meta charset="UTF-8"> ✓ 文字コード
  17. 17. IE8以下には ✓ html5.js を適用<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  18. 18. CSS✓ 新要素をブロックレベル要素へ変更 article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
  19. 19. CSS3‣ 角丸… border-radius‣ 影… box-shadow、text-shadow‣ フォント… @font-face
  20. 20. JavaScript‣ jQueryで実装‣ WordPressとの連携も考慮
  21. 21. Blog カテゴリー 記事Home Portfolio カテゴリー 作品 About
  22. 22. Blog カテゴリー 記事Home Portfolio カテゴリー 作品 About ‣ ブログとポートフォリオを分けて管理
  23. 23. カスタム投稿タイプ ‣ ブログ以外の投稿 ‣ 投稿の分類もできる
  24. 24. プラグインをインストール「Custom Post Type UI」
  25. 25. URL‣ ブログへの投稿http://takumadesign.com/blog/‣ ポートフォリオへの投稿http://takumadesign.com/portfolio/
  26. 26. パーマリンク設定‣ カスタム投稿にも影響http://takumadesign.com/blog/portfolio/
  27. 27. プラグインをインストール「Custom Post Type Permalinks」
  28. 28. ‣ blogのトップを固定ページで作る
  29. 29. Blog カテゴリー 記事 page.php category.php single.php Home Portfolio カテゴリー 作品index.php archive.php archive.php single.php About page.php
  30. 30. Blog記事ページsingle.php
  31. 31. Blogトップ(個別ページ)page.php → blog.php
  32. 32. トップページindex.php → home.php
  33. 33. Portfolioトップ(アーカイブページ)archive.php → archive-portfolio.php
  34. 34. Portfolio作品詳細ページsingle.php → single-portfolio.php
  35. 35. ‣ jQueryによるスライドショー
  36. 36. ギャラリー‣ 投稿に関連付けられた画像を取得
  37. 37. トップページでは‣ 投稿のアイキャチ画像を取得
  38. 38. アイキャッチ画像‣ functions.phpにコードを追加 add_theme_support( ‘post-thumbnails’ );
  39. 39. ポート ォリオサイトの活用 フ‣ 作品や活動を発表‣ 新しいWeb技術の実験‣ WordPressによるサイト構築

×