コワーキングスペース公式サイトを€¦ ·...

1

株式会社コミュニティコム

〒330-0802 埼玉県さいたま市大宮区宮町1-5 銀座ビル7階 URL： http://www.communitycom.jp/ E-MAIL： mail@communitycom.jp

星野 邦敏

コワーキングスペース公式サイトを WordPressで作る

2

株式会社コミュニティコムという会社で、 自社運営サイトやアプリ、他企業様向けサイトも作っています。 オープンソースの活動をしたり、IT系の勉強会を主催したり、 地域の活動をしたり。 WordPressをCMSとしてWEBサイトを作ることが増えています。

星野 邦敏(ほしの くにとし) Twitter ： @khoshino Facebook : 星野邦敏（Kunitoshi Hoshino）

コワーキングスペース公式サイトを WordPressで作る

3

WordPressのイベントである 「WordCamp」や「WordBench」に スタッフやスピーカーとして参加。

コワーキングスペース公式サイトを WordPressで作る

4

WordPress日本語サイトの「イベントカレンダー」を更新する係。

ココ

コワーキングスペース公式サイトを WordPressで作る

5

公式ディレクトリにプラグインを登録したり。

Japan Tenkiプラグイン →全国142地域の天気を自動表示

Hello Wapuuプラグイン →ブログ更新を応援

コワーキングスペース公式サイトを WordPressで作る

6

WordPressに関して、書籍や雑誌で執筆をしたり。

2012年1月に出版 web creators特別号 Webサイト制作 最新トレンドの傾向と対策

2012年3月に出版 速習デザインWordPress

2012年2月に出版 Web Designing 2012年3月号

コワーキングスペース公式サイトを WordPressで作る

7

WordPressに関して、書籍や雑誌で執筆をしたり。

2012年7月に出版 web creators特別号 スマートフォン・ソーシャル メディア・WordPress

今も執筆中です。

コワーキングスペース公式サイトを WordPressで作る

8

コワーキングスペース7F

埼玉県さいたま市 大宮駅東口徒歩１分 65坪、215平米。

2012年12月1日（土） 本格オープン。

最近の関心事は、コワーキングスペースを 作ることです。

http://office7f.com/

コワーキングスペース公式サイトを WordPressで作る

9

こういうことありませんか？

コワーキングスペース 開いたらしいけど、 ホームページまだ？ そろそろプレスリリースを 出したいんだけど。

コワーキングスペース公式サイトを WordPressで作る

10

そういう時に便利なツール！

WordPress

コワーキングスペース公式サイトを WordPressで作る

Bootstrap

✕

11

Bootstrapって？

コワーキングスペース公式サイトを WordPressで作る

Twitterでお馴染みのTwitter社が、 Apacheライセンスで提供されているCSSフレームワーク。 http://twitter.github.com/bootstrap/

12

コワーキングスペース7Fのサイトも。

コワーキングスペース公式サイトを WordPressで作る

http://office7f.com/

13

何が出来るの？

コワーキングスペース公式サイトを WordPressで作る

Rresponsive スマートフォン対応。

14

何が出来るの？

コワーキングスペース公式サイトを WordPressで作る

grid system スマートフォン対応の際に便利。 80pxごとで12カラム。

15

何が出来るの？

コワーキングスペース公式サイトを WordPressで作る

Icon glyphs アイコン。

16

何が出来るの？

コワーキングスペース公式サイトを WordPressで作る

Carousel 写真のスライダー。

17

何が出来るの？

コワーキングスペース公式サイトを WordPressで作る

Tab タブがそれっぽく。

その他にも・・・

Dropdown ドロップダウンメニューがそれっぽく。

Form フォームもそれっぽく。

18

どう使うの？

コワーキングスペース公式サイトを WordPressで作る

http://twitter.github.com/bootstrap/ から「bootstrap.zip」をダウンロードして解凍すると、 コレしか入っていない。どう使うの？

19

どう使うの？

コワーキングスペース公式サイトを WordPressで作る

まずは、header.phpで、読み込もう！ レスポンシブ・ウェブ・デザインにしたい 場合は、bootstrap-responsive.cssも！

<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.css" rel="stylesheet">

<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap-responsive.css" rel="stylesheet“>

20

どう使うの？

コワーキングスペース公式サイトを WordPressで作る

例えば、レスポンシブ・ウェブ・デザインに したい場合は、 class=“row-fluid”で、 あとは、span、span！

<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>

21

どう使うの？

コワーキングスペース公式サイトを WordPressで作る

Icon glyphs アイコン。 <i class=“icon-glass”></i>とかHTMLで書くと 表示される。

22

コワーキングスペース公式サイトを WordPressで作る

要は、CSSフレームワークで、 決められたHTMLタグを書くと、それっぽくなる。 タグは、以下のURLを見てみましょう！ http://twitter.github.com/bootstrap/

どう使うの？

23

WordPressと連携

コワーキングスペース公式サイトを WordPressで作る

<?php if (have_posts()) : query_posts('post_type=pan-pan-pan&posts_per_page=5&order=DESC'); ?> <?php while (have_posts()) : the_post(); ?> <li> <?php $attachment_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' ); list( $src, $width, $height ) = $attachment_img; ?> <img src="<?php echo $src; ?>" alt="" /> <div class="slide-caption n hidden-phone"> <h3><?php the_title(); ?></h3> <p><?php the_content(); ?></p> </div> </li> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?>

HTMLタグ → WordPressタグにして運用する。

24

WordPressと連携

コワーキングスペース公式サイトを WordPressで作る

例えば、トップページのスライド画像は、 カスタム投稿タイプ運用。

25

まとめ

WordPressとBootstrapを組み合わせると、 短時間で、それっぽいWebサイトが作れる。 HTMLベースからWordPressにする知識は必要。 BootstrapベースのWordPressテーマもある。

コワーキングスペース公式サイトを WordPressで作る

✕

26

最後に とはいえ、 どんなに作っても、 コンテンツが重要。 「コンテンツファースト」 の時代。 ということで、 更新、頑張ります！

コワーキングスペース公式サイトを WordPressで作る

27

ということで、 コワーキング スペース7Fを、 今後ともよろしく お願い致します。

コワーキングスペース公式サイトを WordPressで作る

http://office7f.com/

最後に

28

今後のお問い合わせなど 何かありましたら、 Twitter： @khoshino Mail： mail@communitycom.jp URL： http://www.communitycom.jp/ http://wp3.jp/ などに、ご連絡ください。

ありがとうございました！

株式会社コミュニティコム 星野 邦敏

コワーキングスペース公式サイトを WordPressで作る