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

Like this? Share it with your network

Share

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

on

  • 21,034 views

2011年2月18

2011年2月18

Statistics

Views

Total Views
21,034
Views on SlideShare
5,422
Embed Views
15,612

Actions

Likes
8
Downloads
32
Comments
0

17 Embeds 15,612

http://www.susi-paku.com 11997
http://webcake.no003.info 2180
http://blog.v-colors.com 1194
http://ameblo.jp 78
http://www.opencart.kr 64
http://bell.opal.ne.jp 22
https://cybozulive.com 21
http://webcache.googleusercontent.com 17
http://rss.ameba.jp 16
http://blog.ameba.jp 9
https://www.google.co.jp 5
http://s.ameblo.jp 2
http://localhost 2
http://cache.yahoofs.jp 2
http://susi-paku.com 1
http://www.google.co.jp 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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