Mamy315  
WordBench神戸
テーマ祭
Responsive
カスタマイズ基本編
About Me  
Mami Kuroki
大学(日本語学)→バンタンデザイン(GraphicDesign)→OZC(絵本)→国際学校(英語科)
ディレクター/デザイナー(web / Graphic)
WordCamp Kobe2013 実行...
How to find a safety theme  
テーマは公式サイトで配布されているものが安全!
公式
http://wordpress.org/extend/themes/
公式でGPL取得テーマとして紹介されているテーマ
http:...
Theme: Responsive  
割とこまめにUpdateされてる。公式サイトでも評価が高いテーマのひとつ
Theme: Responsive  
http://theme.wordpress.com/themes/responsive/
価格 Free レスポンシブ対応 ○
デザイン ★★★★☆ サポート有無 英語だけどフォーラムあり
http:/...
Theme: Responsive  
だけど高機能すぎるがゆえのわかりにくさも
_人人人人人人人人人人人人_

>  テンプレ多すぎる!!! <

 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄
9 ページのテンプレート
デフォルトテ...
Theme: Responsive  
11個のウィジェットエリア
メインサイドバー
右サイドバー
左サイドバー
左サイドバー半ページ
右サイドバー半ページ
ホームウィジェット1・・top
ホームウィジェット2・・top
ホームウィジェット3・...
Theme: Responsive  
6つのレイアウトテンプレート
デフォルト
コンテンツ/サイドバー
サイドバー/コンテンツ
コンテンツ/サイドバー半ページ
サイドバー/コンテンツ半ページ
全幅ページ(サイドバーなし)
投稿で設定します。
Theme: Responsive  
4つのメニューポジション
トップメニュー
ヘッダーメニュー
サブヘッダーメニュー
フッターメニュー
Theme: Responsive  
(*꒪⌓꒪)→ (*つД⊂)→ ヽ(゚Д゚;)ノ
多すぎ・・!!!!!
Theme: Responsive  
ある程度カスタマイズしたことのある人にとって、デフォルトで多すぎる機能は
カスタマイズしにくいと感じる原因の一つに。
Responsiveに関する日本語説明ページ
http://ja.blog.wordp...
Theme: Responsive  
Home Template
レスポンシブのhomeテンプレートはプロフェッショナルな見栄えに仕上げてくれ
るよ♡3つウィジェットエリアで呼び出される特徴に焦点をあててます。
→このレイアウトをそのまま流用...
Theme: Responsive  
Call to action ボタンはデフォルトでは「青」ですが、すでにcssの中に
青、赤、オレンジ、黄色、緑、オリーブ、紫、ピンク、赤茶、金、茶、銀、グレー、
黒が用意されています。Front-pag...
Theme: Responsive  
Home Template
外観>ウィジェット>ホームウィジェット1-3を編集
外観>ウィジェット>サイト情報ウィジェットを編集
3つのホームウィジェットの下に表示される1カラムのウィジェットです
サイト...
Theme: Responsive
Theme: Responsive  
Home Template
外観>ヘッダー
外観>背景
背景色を指定します。
外観>テーマ設定>カスタムCSSスタイル
ナビゲーションメニューの色はデフォルトでグレーになっているので、これを
カスタムCS...
Theme: Responsive  
ヘッダーメニュー、トップメニューはそれぞれ
外観>メニューから異なるメニューを指定することが可能です。
Theme: Responsive  
このテーマのそれぞれのサイズ参考情報
全体:960px
1.メインカラム幅は605px/フルサイズは918px
2.ホームテンプレートのアイキャッチイメージは440px
幅の高さ300px
3.それぞれの...
Theme: Responsive  
サンプルサイト: http://mamydesign.net/responsive/
(カスタマイズ所要時間/1時間)
使ってみた感想:
一見テンプレートが多くて戸惑うけど使い方によってはページテンプレー...
Theme: Responsive  
参考になれば幸いです。
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

WordBench神戸資料-テーマ:Resonsive

1,671 views
1,597 views

Published on

2013年7月13日WordBench神戸勉強会用資料です。
テーマResponsive

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,671
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
5
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

WordBench神戸資料-テーマ:Resonsive

  1. 1. Mamy315 WordBench神戸 テーマ祭 Responsive カスタマイズ基本編
  2. 2. About Me Mami Kuroki 大学(日本語学)→バンタンデザイン(GraphicDesign)→OZC(絵本)→国際学校(英語科) ディレクター/デザイナー(web / Graphic) WordCamp Kobe2013 実行委員+副委員長 WordCamp Kobe2011 実行委員+スピーカー 料理 / 旅 / 人と喋ること 今したいこと(趣味で) ヨーロッパ蚤の市 買い付け旅行+お買い物サイト、0から構築
  3. 3. How to find a safety theme テーマは公式サイトで配布されているものが安全! 公式 http://wordpress.org/extend/themes/ 公式でGPL取得テーマとして紹介されているテーマ http://wordpress.org/extend/themes/commercial/ フリーで提供されているテーマは悪意あるコードが含まれていることがある テーマチェッカーも100%有効というわけではないようです。 http://wordpress.org/extend/plugins/tac/ http://wordpress.org/extend/plugins/theme-check/
  4. 4. Theme: Responsive 割とこまめにUpdateされてる。公式サイトでも評価が高いテーマのひとつ
  5. 5. Theme: Responsive http://theme.wordpress.com/themes/responsive/ 価格 Free レスポンシブ対応 ○ デザイン ★★★★☆ サポート有無 英語だけどフォーラムあり http://cyberchimps.com/forum/free/ responsive/ 難易度 ★★★☆☆ 対応ブラウザ クロスブラウザ対応 機能 ★★★★☆ 用途 ビジネス SEO対策 (未検証) WP-ver 3.5.2 最新OK
  6. 6. Theme: Responsive だけど高機能すぎるがゆえのわかりにくさも _人人人人人人人人人人人人_
 >  テンプレ多すぎる!!! <
  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ 9 ページのテンプレート デフォルトテンプレート コンテンツ/サイドバー コンテンツ/サイドバー半ページ サイトマップ サイドバー/コンテンツ サイドバー/コンテンツ半ページ ブログ(全文) ブログ抜粋 ランディングページ(メニューなし) 全編ページ(サイドバーなし) 固定ページで設定します。
  7. 7. Theme: Responsive 11個のウィジェットエリア メインサイドバー 右サイドバー 左サイドバー 左サイドバー半ページ 右サイドバー半ページ ホームウィジェット1・・top ホームウィジェット2・・top ホームウィジェット3・・top ギャラリーサイドバー サイト情報ウィジェット・・top Top Widget・・top
  8. 8. Theme: Responsive 6つのレイアウトテンプレート デフォルト コンテンツ/サイドバー サイドバー/コンテンツ コンテンツ/サイドバー半ページ サイドバー/コンテンツ半ページ 全幅ページ(サイドバーなし) 投稿で設定します。
  9. 9. Theme: Responsive 4つのメニューポジション トップメニュー ヘッダーメニュー サブヘッダーメニュー フッターメニュー
  10. 10. Theme: Responsive (*꒪⌓꒪)→ (*つД⊂)→ ヽ(゚Д゚;)ノ 多すぎ・・!!!!!
  11. 11. Theme: Responsive ある程度カスタマイズしたことのある人にとって、デフォルトで多すぎる機能は カスタマイズしにくいと感じる原因の一つに。 Responsiveに関する日本語説明ページ http://ja.blog.wordpress.com/2013/03/08/new-theme-responsive/ あんまり情報のってない。。                   ▼ 英語説明ページ http://theme.wordpress.com/themes/responsive/ 基本設定方法が書かれています(*^O^*)/
  12. 12. Theme: Responsive Home Template レスポンシブのhomeテンプレートはプロフェッショナルな見栄えに仕上げてくれ るよ♡3つウィジェットエリアで呼び出される特徴に焦点をあててます。 →このレイアウトをそのまま流用する場合 固定ページで任意の「HOME」ページ作成 ページ属性:テンプレートは「デフォルトテンプレート」を選択 設定>表示設定>フロントページ:固定ページ「HOME」 外観>テーマ設定>ホームページでメインビジュアルの設定 Enable Custom Front Page:Overrides the WordPress front page option にチェックをつけて 入れたいテキストや画像の指定をします。
  13. 13. Theme: Responsive Call to action ボタンはデフォルトでは「青」ですが、すでにcssの中に 青、赤、オレンジ、黄色、緑、オリーブ、紫、ピンク、赤茶、金、茶、銀、グレー、 黒が用意されています。Front-page.phpを「子テーマ」を使って修正しましょう
  14. 14. Theme: Responsive Home Template 外観>ウィジェット>ホームウィジェット1-3を編集 外観>ウィジェット>サイト情報ウィジェットを編集 3つのホームウィジェットの下に表示される1カラムのウィジェットです サイトの説明文やお問い合わせ先を記載したりする枠に適しています。 外観>テーマ設定>ソーシャルアイコン それぞれの媒体のリンクを入力するだけで、自動的にfooter上にSNSアイコン が表示されます。
  15. 15. Theme: Responsive
  16. 16. Theme: Responsive Home Template 外観>ヘッダー 外観>背景 背景色を指定します。 外観>テーマ設定>カスタムCSSスタイル ナビゲーションメニューの色はデフォルトでグレーになっているので、これを カスタムCSSスタイル機能を使って変更します。 テーマ編集からCSSの該当する箇所をひろってきてコピペし変更箇所を修正し ます。(茶色に変更しました) ヘッダー画像もしくはロゴ画像をアップロードして設定します。 横幅最大値が、960pxですので幅一杯表示にさせる場合は960pxで作成します
  17. 17. Theme: Responsive ヘッダーメニュー、トップメニューはそれぞれ 外観>メニューから異なるメニューを指定することが可能です。
  18. 18. Theme: Responsive このテーマのそれぞれのサイズ参考情報 全体:960px 1.メインカラム幅は605px/フルサイズは918px 2.ホームテンプレートのアイキャッチイメージは440px 幅の高さ300px 3.それぞれのホームテンプレートウィジェットエリアは幅264px 4.サイドバーウィジェットエリアは幅250px
  19. 19. Theme: Responsive サンプルサイト: http://mamydesign.net/responsive/ (カスタマイズ所要時間/1時間) 使ってみた感想: 一見テンプレートが多くて戸惑うけど使い方によってはページテンプレー トを作る必要がないから便利です。 カスタマイズに慣れている人は子テーマで使えばレスポンシブデザインの ワイヤーフレームとして使えそう! 初心者さんはレスポンシブデザインを理解してからさわりましょう (特に画像の大きさに注意)
  20. 20. Theme: Responsive 参考になれば幸いです。 ありがとうございました。

×