Successfully reported this slideshow.
Your SlideShare is downloading. ×

WordPressテーマ Foundation for WordPress の紹介

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 31 Ad

WordPressテーマ Foundation for WordPress の紹介

Download to read offline

Foundation for WordPressは、CSSフレームワークであるFoundationをWordPressテーマ化したものです。Foundationのいいところをそのままに、WordPressで簡単にテーマとして扱えるようになっています。

Foundation for WordPressは、CSSフレームワークであるFoundationをWordPressテーマ化したものです。Foundationのいいところをそのままに、WordPressで簡単にテーマとして扱えるようになっています。

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to WordPressテーマ Foundation for WordPress の紹介 (20)

Advertisement

More from Takashi Uemura (20)

WordPressテーマ Foundation for WordPress の紹介

  1. 1. WordPressテーマ Foundation for WordPress の紹介 2013.7.13 WordBench神戸 上村崇 @uemera
  2. 2. 最近のオレ PHPフレームワーク (FuelPHP) サーバーインフラ (Webサーバ構築など) WordPress (プラグイン作成とか プログラミングサイドの仕事) JavaScript、jQuery 勉強会準備 (WordBench等) ネットショップ支援 (CS-Cartアドオン作成、カスタマイズ) @uemera uemura フリーランスのシステムエンジニアです。西宮在住。 上村 崇
  3. 3. http://fwp.drewsymo.com/ これがFoundation for WordPressのサイト
  4. 4. 価格 無料 レスポンシブ対応 ○ デザイン ★★★☆☆ サポート有無 ✕ 難易度 ★★★★☆ 対応ブラウザ IE9以上 機能 ★★★★☆ 用途 ビジネス SEO対策 ★★☆☆☆ WPバージョン 3.4以上 Foundation for WordPress https://github.com/drewsymo/Foundation CSSフレームワークFoundationを使ったテーマ
  5. 5. Foundation for WordPressの特徴 ・ZURB s Foundation Framework v4. をベースにしている。 ・WordPress公式には掲載されていない。 ・Foundation short codesが用意されている。 ・無料 ・レスポンシブ対応。 ・子テーマ対応。 ・ボタンやフォーム、ブロック表示などは多様な表現が  できるが、ただ単にブログを書くだけのサイトでは使  わない機能が多いので不向きかも。
  6. 6. そもそも ZURB s Foundation Framework てなに?
  7. 7. http://foundation.zurb.com/ ZURB Foundation サイト
  8. 8. ZURB s Foundation Framework v4 とは ・CSSフレームワークの一種 ・Twitter Bootstrapみたいなもの。 ・Twitter BootstrapがWebアプリケーション向けとすると、  FoundationはCSSメインなので、Webアプリよりも記事  主体のページ向け。 ・divやh1など、よく使うタグに対応したCSSのセットが   既に組み込まれているので、使用者がゼロからCSSを書  く必要が無い。 ・jquery.jsではなくzepto.js採用でモバイルにフォーカス
  9. 9. <ul  class="button-­‐group  round  even-­‐3">    <li><a  href="#"  class="button  alert">ボタン1</a></li>    <li><a  href="#"  class="button  alert">ボタン2</a></li>    <li><a  href="#"  class="button  alert">ボタン3</a></li> </ul> 例えばこういうボタンがすぐに作れます。 round  :  端っこを丸くする button:  ボタンを作成 alert:  注意をうながす赤色 クラス名の解説
  10. 10. <table>    <thead>        <tr>            <th  width="200">ヘッダ1</th>            <th  width="150">ヘッダ2</th>        </tr>    </thead>    <tbody>        <tr>            <td>コンテンツ11</td>            <td>コンテンツ12</td>        </tr>        <tr>            <td>コンテンツ21</td>            <td>コンテンツ22</td>        </tr>        <tr>            <td>コンテンツ31</td>            <td>コンテンツ32</td>        </tr>    </tbody> </table> テーブルの例 特別な設定をしなくても、 それなりなデザインになります。 表示例
  11. 11. マニュアルはこちら(英語) http://foundation.zurb.com/docs/
  12. 12. WordPress ZURB s Foundation Frameworkの仕組みを WordPressテーマとして扱えるようにしたのが Foundation for Wordpressです。 Foundation for Wordpress ZURB s Foundation Framework
  13. 13. テーマファイルはシンプルな作りになっています。 これはindex.phpの例
  14. 14. Foundation for WordPress テーマでは、 記事中にhtmlコードを書くと、Foundationの レイアウトがそのまま適用されます。
  15. 15. [button]ボタン[/button] [button  type="round  alert"]ボタン[/button] WordPressの記事中でショートコードも 使えます。
  16. 16. [row][column  span="large-­‐4"]カラム1[/column][column  span="large-­‐4"]カラム 2[/column][column  span="large-­‐4"]カラム3[/column][/row] 段組みもショートコードでできます。 ただし、ショートコードは、途中で改行を入れると思ったような表示にならないこと があるので1行で書かなければなりません。少し使いにくいです。 <div  class="row">    <div  class="large-­‐4  columns">カラム1</div>    <div  class="large-­‐4  columns">カラム2</div>    <div  class="large-­‐4  columns">カラム3</div> </div> ショートコードを使わないで組む場合 ショートコードで組む場合
  17. 17. ショートコードリファレンス http://fwp.drewsymo.com/shortcodes/
  18. 18. まとめ Foundationのお作法を知っている人にとっては使いやすいと 思いますが、初めての人にはとっつきにくいと思います。 ボタンやフォームのレイアウトも簡単につくれますが、記事 を書くだけの人にとっては、そういったコントロールを使う ことは無いため、オーバースペックなテーマだと思います。 ボタンやフォームを多く使うサイトでは便利に使えると思い ます。
  19. 19. その他気になるテーマ
  20. 20. Pinboard http://themify.me/themes/pinboard
  21. 21. 価格 $39 レスポンシブ対応 ○ デザイン ★★★★★ サポート有無 ○ 難易度 ? 対応ブラウザ ? 機能 ? 用途 写真画像サイト SEO対策 ? WPバージョン ? Pinboard http://themify.me/themes/pinboard ・Pinterest風のレイアウト ・マルチサイト対応
  22. 22. Gridly http://www.eleventhemes.com/gridly-theme/
  23. 23. 価格 無料 レスポンシブ対応 ○ デザイン ★★★★★ サポート有無 ✕ 難易度 ? 対応ブラウザ ? 機能 ? 用途 写真画像サイト SEO対策 ? WPバージョン 3.0以上 Gridly http://www.eleventhemes.com/gridly-theme/ ・jQuery Masonry でPinterest風の見た目
  24. 24. SELFLESS http://themeforest.net/item/selfless-a-one-page-wordpress- vcard-theme/3835620?ref=showhey0705
  25. 25. 価格 $35 レスポンシブ対応 ○ デザイン ★★★★★ サポート有無 ? 難易度 ? 対応ブラウザ ? 機能 ? 用途 写真、ポートフォリオ SEO対策 ? WPバージョン 3.0以上 SELFLESS http://themeforest.net/item/selfless-a-one-page-wordpress-vcard-theme/3835620?ref=showhey0705 ・ポートフォリオに向いたサイト ・PSDファイル付き ・Ajax Contact Form
  26. 26. BizVector http://bizvektor.com/
  27. 27. 価格 無料 レスポンシブ対応 ○ デザイン ★★★★★ サポート有無 ? 難易度 ★★☆☆☆ 対応ブラウザ ? 機能 ★★★★★ 用途 ビジネス SEO対策 ★★★★☆ WPバージョン ? BizVector http://bizvektor.com/ ・9種類の色から選べる ・SNS連携あり ・htmlやcssの知識が無くても管理画面からの設定だけでク オリティの高いサイトが作れる
  28. 28. テーマ紹介に関連して 最近ブックマークしたページ
  29. 29. あらゆる業種に対応、企業サイト向けWordPress テーマ素材まとめPhotoshopVIP http://photoshopvip.net/archives/50638 ミニマルでレスポンシブデザインに対応した フリーのWordPressテーマ - W3Q http://w3q.jp/t/3749 僕が知る限りのWordpressテーマディレクトリサイトの数々を 一挙ご紹介 バンクーバーのうぇぶ屋 http://webya.opdsgn.com/introduceweb/wpthemesdirectory/
  30. 30. 20 Stunning Responsive WordPress Themes http://mashable.com/2013/03/08/responsive- wordpress-themes/? utm_medium=feed&utm_source=feedburner&utm_cam paign=Feed%3A+Mashable+%28Mashable%29 【レスポンシブ対応!】基本最低限、カスタマイズするだけ の無料wordpressテンプレート「bee-responsive1.0」 ¦  バニデザノート http://vanidesign.blog.fc2.com/blog-entry-75.html クールデザイン美、WordPressプレミアムテーマ素材30個 まとめ 2013年2月度PhotoshopVIP ¦ http://photoshopvip.net/archives/45002
  31. 31. ありがとうございました。 @uemera uemura

×