シェアオフィス6F
貸会議室6F

あっ、どうも。コワーキングスペース7Fの運営代表者で、株式会社コミュニティコム代表取締役の星野邦敏です。
いやぁ、今日は12月25日(火)ということで、今年もあと一週間ですか。月日が経つのは早いものですね。

さて、WordPress Advent Calendar 2012という、WordPressの記事をリレーで繋ぐイベントがありまして、12月4日(火)担当の僕です。

それまで廃校になった中学校の1教室にオフィスを構えていたのですが、
2012年6月頃に建物自体が東日本大震災の影響によって建て壊しが決まり、
8月中旬頃から次のオフィス物件を探し始め、
9月に入る頃にはオフィスとしてだけでなくコワーキングスペースを兼ねた運営を考えるようになり、
それまでもオフィスが東京だったので東京の池袋駅周辺か、生まれ育った地元の埼玉県さいたま市の浦和駅周辺か大宮駅周辺か、物件を色々と見て回ったり色々な人とお会いしたりして、
10月中旬に大宮の今の場所でコワーキングスペースを始めることが決まって、
11月下旬にプレオープンして、
12月1日に本格オープンして、本格オープンしてから25営業日が経ちました。

空間運営自体が初めてなもので、空間運営の経験があれば、おそらくは予測が付くであろうことも、一つ一つ調べたり、実際に体験してから考えたり等、試行錯誤をしまして、今もその最中と言えば最中です。

例えば、
サントリーの自動販売機を導入するためにお話を聞こうとすると、実際にサントリーの自動販売機を導入する営業や設置をしているのはサントリーではなくて日本ペプシコーラだったり、また実際の自動販売機でのドリンクの原価についても、だいたいどれくらいとか、
コワーキングスペースに導入する机や椅子についても、まとまった数なので、どういった所で購入するのが良いのかとか、
そういったことも初めての経験でしたもので、他のコワーキングスペースの運営者からお話は聞いてはいましたが、やはり自分で実際に経験すると随分違うもので、約1カ月半くらいでコワーキングスペースをオープンして、営業をスタートして約1カ月ということで、ようやく当初のバタバタは落ち着き始めています。

さて、そんなこんなで、どうしても初めての空間運営の方にリソースが取られがちではありましたが、やはりコワーキングスペースのような場所は集客手段の一つとしてインターネットも重要ということで、本来の本業であるWeb制作やサイト運営の知識や経験を活かして、コワーキングスペース7FのWebサイトも作っていかないと、ということで、コワーキングスペース7FのWebサイトを、WordPressとTwitter Bootstrapを組み合わせて、作りました。
http://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テーマを作ると良い点として、
(1)Rresponsive(レスポンシブ)対応がされているため、画面サイズを縮小すると、スマートフォン対応がされている。
(2)grid system(グリッドシステム)で、1カラム80pxで、12カラム960pxで作られている。
(3)icon(アイコン)がiタグで作れる。
(4)Carousel(カルーセル)とかも、特定のHTMLタグを書くと実装できる。
(5)フォームやドロップダウンメニューも、特定のHTMLタグを書くと、それっぽくデザインされたものができる。
などなど、本来は、自分でCSSを書かなければいけない点がTwitter Bootstrapの書式に従えば良くなるので、短時間でそれらしいのが出来る、というメリットがあります。
Twitter Bootstrapの書式は、以下のURLに書かれています。英文ではありますが、事例と、実際に書くHTMLソースコードが載っているので、イメージは付きやすいと思います。
http://twitter.github.com/bootstrap/

一方で、デメリットとしては、
(1)Twitter Bootstrapの書式を覚えるという学習コストが掛かる。
(2)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)(この内容のライトニングトークは最後の方です。)

WordBench埼玉ライトニングトーク (2/2)

スライド資料
コワーキングスペース公式サイトをWordPressとBootstrapを組み合わせて作る。
コワーキングスペース公式サイトをWordPressとBootstrapを組み合わせて作る。(スライド資料、1.75MB、28枚)

追加となりますが、年末に、「WordPressでWebサイトを作ってみようイベント」というのを行いまして、
年末年始で1つWordPressでWebサイトを作ってみようイベント(12月28日・29日・30日・31日)のスライド資料です。
その時の7コマ目の一番最後にも、Twitter Bootstrapの実装について話していますので、もし良かったらご覧ください。

WordPressでWebサイトを作ってみようイベント 星野邦敏 第7回(4/4)

WordPressを使う場合で、レスポンシブを使う必要があったり、グリッドシステムも必要な場合だったり、アイコンもそれらしいのが使いたかったり、フォームやドロップダウンメニューもそれらしいのが使いたい場合には、Twitter Bootstrapも使ってWordPressテーマを作ると、結構便利だと思いますので、もし良かったらご参考ください。

もちろん、一番大切なのは、文章や写真などの実際のコンテンツの更新ということで、このコワーキングスペース7FのWebサイトも枠組みを作ったところで、あとはコンテンツの更新に集中していければと思います。

スポンサーリンク

スポンサーリンク

この記事を書いた人

コワーキングスペース7Fの運営代表者です。7Fの運営会社である株式会社コミュニティコムの代表取締役でもあります。2012年12月1日に7Fがオープンしてから2014年4月末まで店長も兼ねていましたので、外出予定が無い日は基本毎日いましたが、現在は山下に店長を任せ、オーナー兼利用者となりました。今はもともとの本業のITの仕事と、コワーキングスペースに絡んだ創業支援や地域おこしの仕事が中心です。下のフロアを増床することになり、シェアオフィス6Fと貸会議室6Fの運営もしています。趣味は自分の思い付いたWebサービスを自分で自由に開発することです。



メールマガジン登録

週1回程度でメールマガジンにて、コワーキングスペース7Fのイベントや勉強会情報や近況、Web関係や地域情報などを配信しています。
もし良ければ以下のフォームにメールアドレスを入力して登録してくださいね!

7F情報をぜひフォローください!


スポンサーリンク

月額会員募集中の申し込みフォーム
イベント情報
会議室ご予約
オープンスペースご予約
無料見学ご予約
お問い合わせ
メールマガジン登録フォーム
フロアマップ
よくある質問
Amazonコワーキングスペース7Fのほしい物リスト
一時託児施設利用
7F大学
リブライズ
Eightどこでもスキャン計画
7Fスタッフ募集のお知らせ
シェアオフィス6F
貸会議室6F

混雑状況やイベント情報

サイト内検索