WordBench神戸資料-テーマ:Resonsive

Mamy315
WordBench神戸
テーマ祭
Responsive
カスタマイズ基本編

About Me
Mami Kuroki
大学(日本語学)→バンタンデザイン(GraphicDesign)→OZC(絵本)→国際学校(英語科)
ディレクター／デザイナー(web / Graphic)
WordCamp Kobe2013 実行委員＋副委員長
WordCamp Kobe2011 実行委員＋スピーカー
料理 / 旅 / 人と喋ること
今したいこと(趣味で)
ヨーロッパ蚤の市買い付け旅行＋お買い物サイト、０から構築

How to find a safety theme
テーマは公式サイトで配布されているものが安全！
公式
http://wordpress.org/extend/themes/
公式でGPL取得テーマとして紹介されているテーマ
http://wordpress.org/extend/themes/commercial/
フリーで提供されているテーマは悪意あるコードが含まれていることがある
テーマチェッカーも１００％有効というわけではないようです。
http://wordpress.org/extend/plugins/tac/
http://wordpress.org/extend/plugins/theme-check/

Theme: Responsive
割とこまめにUpdateされてる。公式サイトでも評価が高いテーマのひとつ

Theme: Responsive
http://theme.wordpress.com/themes/responsive/
価格 Free レスポンシブ対応 ○
デザイン ★★★★☆ サポート有無英語だけどフォーラムあり
http://cyberchimps.com/forum/free/
responsive/
難易度 ★★★☆☆ 対応ブラウザクロスブラウザ対応
機能 ★★★★☆ 用途ビジネス
SEO対策（未検証） WP-ver 3.5.2 最新OK

Theme: Responsive
だけど高機能すぎるがゆえのわかりにくさも
＿人人人人人人人人人人人人＿ 
＞　テンプレ多すぎる！！！　＜ 
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
9 ページのテンプレート
デフォルトテンプレート
コンテンツ/サイドバー
コンテンツ/サイドバー半ページ
サイトマップ
サイドバー/コンテンツ
サイドバー/コンテンツ半ページ
ブログ（全文）
ブログ抜粋
ランディングページ（メニューなし）
全編ページ（サイドバーなし）
固定ページで設定します。

Theme: Responsive
11個のウィジェットエリア
メインサイドバー
右サイドバー
左サイドバー
左サイドバー半ページ
右サイドバー半ページ
ホームウィジェット1・・top
ギャラリーサイドバー
サイト情報ウィジェット・・top
Top Widget・・top

Theme: Responsive
６つのレイアウトテンプレート
デフォルト
コンテンツ／サイドバー
サイドバー／コンテンツ
コンテンツ／サイドバー半ページ
サイドバー／コンテンツ半ページ
全幅ページ（サイドバーなし）
投稿で設定します。

Theme: Responsive
4つのメニューポジション
トップメニュー
ヘッダーメニュー
サブヘッダーメニュー
フッターメニュー

Theme: Responsive
(*꒪⌓꒪)→ (*つД⊂)→ ヽ(ﾟДﾟ；)ﾉ
多すぎ・・！！！！！

Theme: Responsive
ある程度カスタマイズしたことのある人にとって、デフォルトで多すぎる機能は
カスタマイズしにくいと感じる原因の一つに。
Responsiveに関する日本語説明ページ
http://ja.blog.wordpress.com/2013/03/08/new-theme-responsive/
あんまり情報のってない。。
▼
英語説明ページ
http://theme.wordpress.com/themes/responsive/
基本設定方法が書かれています(*^O^*)/

Theme: Responsive
Home Template
レスポンシブのhomeテンプレートはプロフェッショナルな見栄えに仕上げてくれ
るよ♡３つウィジェットエリアで呼び出される特徴に焦点をあててます。
→このレイアウトをそのまま流用する場合
固定ページで任意の「HOME」ページ作成
ページ属性：テンプレートは「デフォルトテンプレート」を選択
設定＞表示設定＞フロントページ：固定ページ「HOME」
外観＞テーマ設定＞ホームページでメインビジュアルの設定
Enable Custom Front Page：Overrides the WordPress front page option
にチェックをつけて
入れたいテキストや画像の指定をします。

Theme: Responsive
Call to action ボタンはデフォルトでは「青」ですが、すでにcssの中に
青、赤、オレンジ、黄色、緑、オリーブ、紫、ピンク、赤茶、金、茶、銀、グレー、
黒が用意されています。Front-page.phpを「子テーマ」を使って修正しましょう

Theme: Responsive
Home Template
外観＞ウィジェット＞ホームウィジェット1-3を編集
外観＞ウィジェット＞サイト情報ウィジェットを編集
3つのホームウィジェットの下に表示される１カラムのウィジェットです
サイトの説明文やお問い合わせ先を記載したりする枠に適しています。
外観＞テーマ設定＞ソーシャルアイコン
それぞれの媒体のリンクを入力するだけで、自動的にfooter上にSNSアイコン
が表示されます。

Theme: Responsive
Home Template
外観＞ヘッダー
外観＞背景
背景色を指定します。
外観＞テーマ設定＞カスタムCSSスタイル
ナビゲーションメニューの色はデフォルトでグレーになっているので、これを
カスタムCSSスタイル機能を使って変更します。
テーマ編集からCSSの該当する箇所をひろってきてコピペし変更箇所を修正し
ます。（茶色に変更しました）
ヘッダー画像もしくはロゴ画像をアップロードして設定します。
横幅最大値が、960pxですので幅一杯表示にさせる場合は960pxで作成します

Theme: Responsive
ヘッダーメニュー、トップメニューはそれぞれ
外観＞メニューから異なるメニューを指定することが可能です。

Theme: Responsive
このテーマのそれぞれのサイズ参考情報
全体：960px
1.メインカラム幅は605px/フルサイズは918px
2.ホームテンプレートのアイキャッチイメージは440px
幅の高さ300px
3.それぞれのホームテンプレートウィジェットエリアは幅264px
4.サイドバーウィジェットエリアは幅250px

Theme: Responsive
サンプルサイト: http://mamydesign.net/responsive/
(カスタマイズ所要時間/1時間)
使ってみた感想：
一見テンプレートが多くて戸惑うけど使い方によってはページテンプレー
トを作る必要がないから便利です。
カスタマイズに慣れている人は子テーマで使えばレスポンシブデザインの
ワイヤーフレームとして使えそう！
初心者さんはレスポンシブデザインを理解してからさわりましょう
(特に画像の大きさに注意)

Theme: Responsive
参考になれば幸いです。
ありがとうございました。

WordBench神戸資料-テーマ:Resonsive

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie WordBench神戸資料-テーマ:Resonsive

Ähnlich wie WordBench神戸資料-テーマ:Resonsive (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

WordBench神戸資料-テーマ:Resonsive