ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座

30,901 views

Published on

2011年2月18

0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
30,901
On SlideShare
0
From Embeds
0
Number of Embeds
23,136
Actions
Shares
0
Downloads
36
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座

  1. 1. ノンプログラミングでここまでできる! Webデザイナーのための CS-Cartカスタマイズ講座2012年2月18日土曜日
  2. 2. 自己紹介 福岡からきました や ま ぐ ち ゆ う き 山口 有由希 福岡県在住、長崎県出身 フロッグマンオフィス所属 福岡県でWebデザイナー2012年2月18日土曜日
  3. 3. 本日の流れ ✦ カート、どうやって選んでますか? ✦ CS-Cartテンプレートデザインの基本 ✦ CSSのみで本格カスタマイズ! ✦ よりリッチに。実装サンプル集 ✦ デザイナーさんにおすすめのポイント ✦ まとめ2012年2月18日土曜日
  4. 4. ショッピングカート どうやって選んでますか?2012年2月18日土曜日
  5. 5. できるだけ簡単に デザイナー デザインを適用したい できるだけ完結に ショップ 運営・管理 しやすいのがいい プログラマ 必要機能だけを 短時間で開発したい オーナー 欲しい商品に お客様 できるだけ早く たどり着きたい2012年2月18日土曜日
  6. 6. たとえばどんなことが 求められるだろう?2012年2月18日土曜日
  7. 7. お客様 フレンドリー2012年2月18日土曜日
  8. 8. 欲しいものに たどり着きやすい2012年2月18日土曜日
  9. 9. 2012年2月18日土曜日
  10. 10. 2012年2月18日土曜日
  11. 11. ショップオーナー フレンドリー2012年2月18日土曜日
  12. 12. このカテゴリーのときだけ 特定のバナーを出したい2012年2月18日土曜日
  13. 13. 一括でカテゴリーを 変更したい2012年2月18日土曜日
  14. 14. 普通のページも 作りたい2012年2月18日土曜日
  15. 15. まとめて 在庫数を更新したい2012年2月18日土曜日
  16. 16. 日頃の運用で出てくる こうだったらいいのにな… は基本機能でほぼ対応済み!2012年2月18日土曜日
  17. 17. エンジニア フレンドリー2012年2月18日土曜日
  18. 18. うちの在庫管理システムと うまく連携させたいんだけど…2012年2月18日土曜日
  19. 19. ちょっと特殊な 使い方をしたい2012年2月18日土曜日
  20. 20. 開発コストを 抑えたい2012年2月18日土曜日
  21. 21. 基本の関数は揃ってます。 必要な部分の処理を書くだけ!2012年2月18日土曜日
  22. 22. デザイナー フレンドリー2012年2月18日土曜日
  23. 23. 作ったデザインを 手軽に実装したい2012年2月18日土曜日
  24. 24. クライアントからの細かな 修正依頼に迅速に対応したい2012年2月18日土曜日
  25. 25. テンプレートファイルを 編集しなくても 思い通りのデザインを実現できる!2012年2月18日土曜日
  26. 26. CS-Cartは みんなに フレンドリーな ショッピングカード2012年2月18日土曜日
  27. 27. CS-Cartテンプレート デザインの基礎2012年2月18日土曜日
  28. 28. 自由にカスタマイズしたいけど たくさんのコードの入った テンプレートファイルを 編集するのはちょっと…2012年2月18日土曜日
  29. 29. テンプレートファイルは さわらなくても大丈夫です!2012年2月18日土曜日
  30. 30. でもテンプレートファイル 編集しないと 凝ったことは できないんでしょう?2012年2月18日土曜日
  31. 31. できます!!2012年2月18日土曜日
  32. 32. ということで CSSと管理画面からの編集 のみで カスタマイズしてみました2012年2月18日土曜日
  33. 33. 2012年2月18日土曜日
  34. 34. 2012年2月18日土曜日
  35. 35. 管理画面から増減可能 どこにでも増やせて 自由に書き換えられるHTMLブロック バナーも管理画面から 追加・管理2012年2月18日土曜日
  36. 36. まずは構造を整えよう2012年2月18日土曜日
  37. 37. ブロック機能を使って 各ページ必要な情報を レイアウトしていきます2012年2月18日土曜日
  38. 38. 2012年2月18日土曜日
  39. 39. 自由にコンテンツを 追加可能!2012年2月18日土曜日
  40. 40. メイン画像のHTMLブロックや バナーのブロックも 作って配置していきます。2012年2月18日土曜日
  41. 41. ロゴを変更しよう2012年2月18日土曜日
  42. 42. 2012年2月18日土曜日
  43. 43. CSSでカスタマイズしよう2012年2月18日土曜日
  44. 44. まずは テンプレートカスタマイズの基本2012年2月18日土曜日
  45. 45. まずは テンプレートカスタマイズの基本 ✦ テンプレートファイルの場所を知ろう! ✦ アップデートのときも安心な カスタマイズ方法2012年2月18日土曜日
  46. 46. テンプレートファイルの 場所を知ろう2012年2月18日土曜日
  47. 47. テンプレートの テンプレートごとの ショップ側の ディレクトリ ディレクトリ テンプレート skins -> basic -> customer2012年2月18日土曜日
  48. 48. テンプレートファイルの 場所を知ろう skins -> basic -> customer2012年2月18日土曜日
  49. 49. テンプレートファイルの 場所を知ろう skins -> basic -> customer2012年2月18日土曜日
  50. 50. アップデートのときも安心な カスタマイズ方法2012年2月18日土曜日
  51. 51. テンプレートファイルを 退避させずそのまま バージョンアップした。2012年2月18日土曜日
  52. 52. 差分の再適用が ちょっと手間2012年2月18日土曜日
  53. 53. 2012年2月18日土曜日
  54. 54. skins -> basic -> customer styles.css styles.base.css 中身はからっぽに2012年2月18日土曜日
  55. 55. こちらを編集していきます2012年2月18日土曜日
  56. 56. Firebugを使おう!2012年2月18日土曜日
  57. 57. 2012年2月18日土曜日
  58. 58. わかりやすいFirebugの使い方の記事 http://h2ham.seesaa.net/article/154387441.html2012年2月18日土曜日
  59. 59. テキストデータや コンテンツ幅の増減に対応した メニューや見出しの作成法2012年2月18日土曜日
  60. 60. 2012年2月18日土曜日
  61. 61. 2012年2月18日土曜日
  62. 62. 2012年2月18日土曜日
  63. 63. カテゴリ一覧のデザイン もっとリッチにしたい。2012年2月18日土曜日
  64. 64. 2012年2月18日土曜日
  65. 65. 2012年2月18日土曜日
  66. 66. HTMLブロックを使おう2012年2月18日土曜日
  67. 67. 2012年2月18日土曜日
  68. 68. バナーブロックを使おう2012年2月18日土曜日
  69. 69. 2012年2月18日土曜日
  70. 70. 2012年2月18日土曜日
  71. 71. 2012年2月18日土曜日
  72. 72. グローバルナビゲーションも 同様にして 画像メニューにできます!2012年2月18日土曜日
  73. 73. デザイナーさんに おすすめのポイント2012年2月18日土曜日
  74. 74. jQueryのライトボックス 埋め込むのが意外に面倒2012年2月18日土曜日
  75. 75. 画像はライトボックスで ポップアップ ポップアップの種類も 管理画面から選べちゃう2012年2月18日土曜日
  76. 76. 基本設定 -> 表示設定2012年2月18日土曜日
  77. 77. 2012年2月18日土曜日
  78. 78. 商品画像アップしちゃったあとだけど、 もうちょっと大きく(小さく) 表示させた方がバランスよかった…! 画像全部上げ直し?!2012年2月18日土曜日
  79. 79. 再アップ不要! 設定値に合わせて サムネイルを動的生成。 キャッシュを作成するので サーバーにもやさしい。2012年2月18日土曜日
  80. 80. 2012年2月18日土曜日
  81. 81. リアルタイムに 変更可能!2012年2月18日土曜日
  82. 82. 画像の上げ直しをした場合などで 以前のキャッシュが残っている場合2012年2月18日土曜日
  83. 83. 管理画面で URLの後ろに ?ct をつけてエンター!2012年2月18日土曜日
  84. 84. キャッシュファイルが すべて削除されます!2012年2月18日土曜日
  85. 85. テンプレートにベタ書き しちゃったHTMLの修正が 地味に面倒2012年2月18日土曜日
  86. 86. テンプレートに直書きする 必要なし! ブロック追加で 管理画面からラクラク編集!2012年2月18日土曜日
  87. 87. 地味に面倒な作業が不要に! デザインにたっぷり集中!2012年2月18日土曜日
  88. 88. まとめ2012年2月18日土曜日
  89. 89. ✦ デザインを適用しやすい 扱いやすい構造設計 ✦ 誰でもラクラク更新可能にする 優しい管理画面 ✦ 機能面も充実! かゆいところに手が届いてる!2012年2月18日土曜日
  90. 90. ぜひ一度 さわってみてください!!!2012年2月18日土曜日
  91. 91. ありがとうございました! ご質問などお気軽に。 @yuki9302012年2月18日土曜日

×