コワーキングスペース公式サイトをWordPressとBootstrapを組み合わせて作る。
あっ、どうも。コワーキングスペース7Fの運営代表者で、株式会社コミュニティコム代表取締役の星野邦敏です。
いやぁ、今日は12月25日(火)ということで、今年もあと一週間ですか。月日が経つのは早いものですね。
さて、WordPress Advent Calendar 2012という、WordPressの記事をリレーで繋ぐイベントがありまして、12月4日(火)担当の僕です。
それまで廃校になった中学校の１教室にオフィスを構えていたのですが、
2012年6月頃に建物自体が東日本大震災の影響によって建て壊しが決まり、
8月中旬頃から次のオフィス物件を探し始め、
9月に入る頃にはオフィスとしてだけでなくコワーキングスペースを兼ねた運営を考えるようになり、
それまでもオフィスが東京だったので東京の池袋駅周辺か、生まれ育った地元の埼玉県さいたま市の浦和駅周辺か大宮駅周辺か、物件を色々と見て回ったり色々な人とお会いしたりして、
10月中旬に大宮の今の場所でコワーキングスペースを始めることが決まって、
11月下旬にプレオープンして、
12月1日に本格オープンして、本格オープンしてから25営業日が経ちました。
空間運営自体が初めてなもので、空間運営の経験があれば、おそらくは予測が付くであろうことも、一つ一つ調べたり、実際に体験してから考えたり等、試行錯誤をしまして、今もその最中と言えば最中です。
例えば、
サントリーの自動販売機を導入するためにお話を聞こうとすると、実際にサントリーの自動販売機を導入する営業や設置をしているのはサントリーではなくて日本ペプシコーラだったり、また実際の自動販売機でのドリンクの原価についても、だいたいどれくらいとか、
コワーキングスペースに導入する机や椅子についても、まとまった数なので、どういった所で購入するのが良いのかとか、
そういったことも初めての経験でしたもので、他のコワーキングスペースの運営者からお話は聞いてはいましたが、やはり自分で実際に経験すると随分違うもので、約１カ月半くらいでコワーキングスペースをオープンして、営業をスタートして約１カ月ということで、ようやく当初のバタバタは落ち着き始めています。
さて、そんなこんなで、どうしても初めての空間運営の方にリソースが取られがちではありましたが、やはりコワーキングスペースのような場所は集客手段の一つとしてインターネットも重要ということで、本来の本業であるWeb制作やサイト運営の知識や経験を活かして、コワーキングスペース7FのWebサイトも作っていかないと、ということで、コワーキングスペース7FのWebサイトを、WordPressとTwitter Bootstrapを組み合わせて、作りました。
https://office7f.com/
WordPress (ワードプレス) とは、オープンソースのブログ／CMS プラットフォームです。結構、色々なWebサイトがWordPressで作られています。
http://ja.wordpress.org/
Twitter Bootstrapとは、Twitter社がApacheライセンスで提供しているCSSフレームワークです。
http://twitter.github.com/bootstrap/
具体的な使い方としては、WordPressテーマの中に、Twitter Bootstrapのファイルを含める、という形で、対応します。
Twitter Bootstrapを使ってWordPressテーマを作ると良い点として、
（１）Rresponsive（レスポンシブ）対応がされているため、画面サイズを縮小すると、スマートフォン対応がされている。
（２）grid system（グリッドシステム）で、1カラム80pxで、12カラム960pxで作られている。
（３）icon（アイコン）がiタグで作れる。
（４）Carousel（カルーセル）とかも、特定のHTMLタグを書くと実装できる。
（５）フォームやドロップダウンメニューも、特定のHTMLタグを書くと、それっぽくデザインされたものができる。
などなど、本来は、自分でCSSを書かなければいけない点がTwitter Bootstrapの書式に従えば良くなるので、短時間でそれらしいのが出来る、というメリットがあります。
Twitter Bootstrapの書式は、以下のURLに書かれています。英文ではありますが、事例と、実際に書くHTMLソースコードが載っているので、イメージは付きやすいと思います。
http://twitter.github.com/bootstrap/
一方で、デメリットとしては、
（１）Twitter Bootstrapの書式を覚えるという学習コストが掛かる。
（２）CSSのフレームワークなので、やはりパッと見のデザインが、いわゆる、いかにもTwitter Bootstrapを使ったものになりがち。
という点が挙げられるかと思います。
CMSを使うか・使わないか、CMSを使うとしたら何を使うか、
フレームワークを使うか・使わないか、フレームワークを使うとしたら何を使うか、
などは、その時々の案件や選定する人によって、判断の分かれる所かもしれませんが、
CMSを使うとしたら、最近、WordPressという判断も多いでしょうし、
スマートフォン対応として、レスポンシブを使う必要があったり、グリッドシステムも必要な場合、自分でゼロから作る必要性が無い場合は、Twitter Bootstrapを使うという判断もあると思います。
ということで、このコワーキングスペース7FのWebサイトは、WordPressとTwitter Bootstrapで、ゼロからWordPressテーマ化している、ということで、その実装方法について、以下で解説します。
まず、Twitter Bootstrapの公式サイトから落としてきたダウンロードファイルを解凍すると、cssファイル、imgファイル、jsファイルが入っていると思います。
このうち、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“>
あとは、Twitter Bootstrapの書式に従って、WordPressテーマに書いていけば、実装できます。
具体例としましては、
例えば、
レスポンシブウェブデザインとしてスマートフォン対応したい場合には、
<div class="row-fluid"> <div class="span8">...</div> <div class="span4">...</div> </div>
と書けば、画面サイズが狭まれば、カラムが落ちる感じのレスポンシブウェブデザインとなります。
例えば、
検索アイコンが出したい場合には、画像を作らなくても、
<i class="icon-search"></i>
と書けば
と表示されます。
これらのアイコンとして何があるかは、
http://twitter.github.com/bootstrap/base-css.html#icons
に一覧が載っています。
都度都度、画像を作らなくても、iタグで対応すれば良いので、デザイナー寄りでない人には便利かもしれません。
そのようなことを、先日行われました、WordBench埼玉のライトニングトークでもお話させていただきました。
WordPressの勉強会 – WordBench埼玉12月＆WordPress3.5リリースパーティ : ATND
WordBench埼玉ライトニングトーク (1/2)（この内容のライトニングトークは最後の方です。）
スライド資料
コワーキングスペース公式サイトをWordPressとBootstrapを組み合わせて作る。（スライド資料、1.75MB、28枚）
追加となりますが、年末に、「WordPressでWebサイトを作ってみようイベント」というのを行いまして、
年末年始で１つWordPressでWebサイトを作ってみようイベント（12月28日・29日・30日・31日）のスライド資料です。
その時の７コマ目の一番最後にも、Twitter Bootstrapの実装について話していますので、もし良かったらご覧ください。
WordPressでWebサイトを作ってみようイベント 星野邦敏 第７回(4/4)
WordPressを使う場合で、レスポンシブを使う必要があったり、グリッドシステムも必要な場合だったり、アイコンもそれらしいのが使いたかったり、フォームやドロップダウンメニューもそれらしいのが使いたい場合には、Twitter Bootstrapも使ってWordPressテーマを作ると、結構便利だと思いますので、もし良かったらご参考ください。
もちろん、一番大切なのは、文章や写真などの実際のコンテンツの更新ということで、このコワーキングスペース7FのWebサイトも枠組みを作ったところで、あとはコンテンツの更新に集中していければと思います。
