Download as PDF, PPTX
![[button]ボタン[/button][button type="round alert"]ボタン[/button]WordPressの記事中でショートコードも使えます。](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fintroduceofwordpreesforfoundation-130713100059-phpapp01%2f75%2fWordPress-Foundation-for-WordPress-15-2048.jpg&f=jpg&w=240)
![[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>ショートコードを使わないで組む場合ショートコードで組む場合](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fintroduceofwordpreesforfoundation-130713100059-phpapp01%2f75%2fWordPress-Foundation-for-WordPress-16-2048.jpg&f=jpg&w=240)
Uploaded byTakashi Uemura
PDF, PPTX5,646 views
WordPressテーマ Foundation for WordPress の紹介
Foundation for WordPressは、CSSフレームワークであるFoundationをWordPressテーマ化したものです。Foundationのいいところをそのままに、WordPressで簡単にテーマとして扱えるようになっています。
Recommended
More Related Content
What's hot
More from Takashi Uemura
WordPressテーマ Foundation for WordPress の紹介
- 1.
- 2.
- 3.
- 4.価格 無料 レスポンシブ対応○デザイン ★★★☆☆ サポート有無 ✕難易度 ★★★★☆ 対応ブラウザ IE9以上機能 ★★★★☆ 用途 ビジネスSEO対策 ★★☆☆☆ WPバージョン 3.4以上Foundation for WordPresshttps://github.com/drewsymo/FoundationCSSフレームワークFoundationを使ったテーマ
- 5.Foundation for WordPressの特徴・ZURBs Foundation Framework v4. をベースにしている。・WordPress公式には掲載されていない。・Foundation short codesが用意されている。・無料・レスポンシブ対応。・子テーマ対応。・ボタンやフォーム、ブロック表示などは多様な表現が できるが、ただ単にブログを書くだけのサイトでは使 わない機能が多いので不向きかも。
- 6.そもそもZURB s FoundationFrameworkてなに?
- 7.
- 8.ZURB s FoundationFramework v4 とは・CSSフレームワークの一種・Twitter Bootstrapみたいなもの。・Twitter BootstrapがWebアプリケーション向けとすると、 FoundationはCSSメインなので、Webアプリよりも記事 主体のページ向け。・divやh1など、よく使うタグに対応したCSSのセットが 既に組み込まれているので、使用者がゼロからCSSを書 く必要が無い。・jquery.jsではなくzepto.js採用でモバイルにフォーカス
- 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.<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.
- 12.WordPressZURB s FoundationFrameworkの仕組みをWordPressテーマとして扱えるようにしたのがFoundation for Wordpressです。Foundation for WordpressZURB s Foundation Framework
- 13.
- 14.Foundation for WordPressテーマでは、記事中にhtmlコードを書くと、Foundationのレイアウトがそのまま適用されます。
- 15.
- 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.
- 18.
- 19.
- 20.
- 21.価格 $39 レスポンシブ対応○デザイン ★★★★★ サポート有無 ○難易度 ? 対応ブラウザ ?機能 ? 用途 写真画像サイトSEO対策 ? WPバージョン ?Pinboardhttp://themify.me/themes/pinboard・Pinterest風のレイアウト・マルチサイト対応
- 22.
- 23.価格 無料 レスポンシブ対応○デザイン ★★★★★ サポート有無 ✕難易度 ? 対応ブラウザ ?機能 ? 用途 写真画像サイトSEO対策 ? WPバージョン 3.0以上Gridlyhttp://www.eleventhemes.com/gridly-theme/・jQuery Masonry でPinterest風の見た目
- 24.
- 25.価格 $35 レスポンシブ対応○デザイン ★★★★★ サポート有無 ?難易度 ? 対応ブラウザ ?機能 ? 用途 写真、ポートフォリオSEO対策 ? WPバージョン 3.0以上SELFLESShttp://themeforest.net/item/selfless-a-one-page-wordpress-vcard-theme/3835620?ref=showhey0705・ポートフォリオに向いたサイト・PSDファイル付き・Ajax Contact Form
- 26.
- 27.価格 無料 レスポンシブ対応○デザイン ★★★★★ サポート有無 ?難易度 ★★☆☆☆ 対応ブラウザ ?機能 ★★★★★ 用途 ビジネスSEO対策 ★★★★☆ WPバージョン ?BizVectorhttp://bizvektor.com/・9種類の色から選べる・SNS連携あり・htmlやcssの知識が無くても管理画面からの設定だけでクオリティの高いサイトが作れる
- 28.
- 29.あらゆる業種に対応、企業サイト向けWordPressテーマ素材まとめPhotoshopVIPhttp://photoshopvip.net/archives/50638ミニマルでレスポンシブデザインに対応したフリーのWordPressテーマ - W3Qhttp://w3q.jp/t/3749僕が知る限りのWordpressテーマディレクトリサイトの数々を一挙ご紹介バンクーバーのうぇぶ屋http://webya.opdsgn.com/introduceweb/wpthemesdirectory/
- 30.20 Stunning ResponsiveWordPress Themeshttp://mashable.com/2013/03/08/responsive-wordpress-themes/?utm_medium=feed&utm_source=feedburner&utm_campaign=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.