Twitter Bootstrapを使って短時間でWordPressテーマを作る。

2012.11.15 | この方法お勧めです！

スポンサードリンク

どうもどうも、こんにちは。WP-Limeです。
Limeって黄緑色らしいです。色決めの時に、Facebookを見ていなかったら、空いている色が無くなっていて黄緑色になってしまったということで、いやぁ、何事もタイミングですなぁと思っている派です。

さて、持ち回りで月に１回書いている、このブログですが、
１回目の記事は、
案件の価格決めをどうしているのよ？
２回目の記事は、
IT勉強会を自分で主催するメリット・デメリットと、それらを有料or無料で開く判断。
３回目の記事は、
支払サイト＆入金サイトについて考える。
でした。

今までは、他の執筆者とのタイミングの関係で、Web制作以外のことを書きましたが、今回初めて制作寄りのお話です。

さて、「いやぁ、今日は打ち合わせが３件あるし、出版社から依頼受けている書籍の執筆もあるし、毎週どこかで講演しているし、自分主催の勉強会も定期的にあるし、このタイミングで自宅を東京都から埼玉県に引っ越すし、いつも外に出ていると奥さんと一緒にいる時間がほとんど無くなっちゃうし、今度、オフィスも東京都から生まれ育った地元の埼玉県さいたま市に戻って大宮駅東口徒歩１分の所でコワーキングスペースも始めるし、特に、コワーキングスペースのような空間運営が初めてだから工事や家具を揃えるのも判断の連続で準備に予想外に時間が掛かるし、のぼうの城も見に行きたいし、Web制作なんてしている暇なんてない！」と思う日も、ごくたまにあるかもしれません。

しかしながら、大丈夫です。そういったことをこなしながらも、並行して業務としてWeb制作者として、淡々と週１くらいのペースでWebサイトを完成させて、お客さんに納品したり、自社サイトとしてWebサービスを自分で運営することも可能です。

具体的なキーワードとしては、「WordPress」と「Twitter Bootstrap」、この２つです。
場合によっては、WordPressだけでも十分ですが、今回はTwitter Bootstrapも使ったもので、２つとなりました。

この２つのキーワードを組み合わせてCMS構築をしてWebサイトを制作すれば、例えば、10月下旬に埼玉県さいたま市の大宮駅東口徒歩１分の所で開くコワーキングスペースの名前が「7F」に決まり、始まる前にも関わらず、いくつか企業提携っぽいのがあって、先方のプレスリリースの関係などで、「え？公式サイトまだ無いの？」と言われて、やべー、来週の初めには公式サイトが無いと先方がプレスリリースできないらいしよ！ということになっても、大丈夫です。WordPress化まで半日くらいでコンテンツを入れるのに半日とかで、合計１日あればおそらくは間に合います。

ちなみに、今は、こんな感じです。
埼玉県さいたま市大宮駅東口徒歩１分のコワーキングスペース「7F」

では、ここでは、その作り方の概要を、以下で説明します。

まず、WordPressをインストールしましょう。そして、自分で「WordPressテーマ」を作ります。
WordPressで言う「テーマ」とは、Webの着せ替えのようなものです。他のCMSやフリーのブログサービスでは「テンプレート」と言ったりするかもしれません。
ちなみに、WordPressで機能追加を行う際には、テーマのfunctions.phpに記述するか、「プラグイン」を作ります。
ココで、WordPressとは、GPLライセンスにより配布されているオープンソースCMS/ブログツールです。今回の作り方において、ココでの私の意識は、誤解を恐れずに言えば、オープンソースの「フレームワーク」に近いイメージを持っています。

さて、WordPressで「テーマを作れば良い」と言われても作り方が分からない！という人もいるかもしれません。
そういう人でも大丈夫です。
「WordPress 3.x (速習デザイン)」という本がありまして、この本にWordPressテーマの作り方について書かれていますので、もし良かったら読んでみてください。

あっ、あと、埼玉県さいたま市大宮駅東口徒歩１分のコワーキングスペース「7F」というのが2012年12月1日(土)にオープンしますので、そこに来てもらえると、WordPressの勉強会を開いたり、個別に教えあったりする機会も多いと思います。

次に、Twitter Bootstrapを、WordPressテーマに組み込みます。
組み込み方は、WordPressテーマの中に、Twitter Bootstrapを入れて、それをhead内（通常のWordPressテーマの作り方でしたらheader.phpの中に書くことになると思います）に、以下のように書きます。

<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の書式に従って、divのidやclassを指定すれば、誤解を恐れずに言えば、CSSやデザインについて負担無く、それらしいのが作れます。

また、最近は、スマートフォン対応として、「レスポンシブWebデザイン」として、画面サイズに応じて、レイアウトが変わるような作り方があります。
Twitter Bootstrapで、bootstrap-responsive.cssを読み込めば、あとは、divのclass=”row”の中でclass=”span8″やclass=”span4″（spanの数字はグリッドレイアウトとして12等分されています）とすることで、レスポンシブWebデザインのサイトを作ることができます。
埼玉県さいたま市大宮駅東口徒歩１分のコワーキングスペース「7F」のWebサイトもブラウザの横幅を狭めてみたり、スマートフォンから閲覧すると、レイアウトがスマートフォン対応になることが分かると思います。

さて、ここで、Twitter Bootstrapとは、TwitterというWebサービスを作っている会社が開発したもので、色々な表現があるとは思いますが、誤解を恐れずに言えば、CSSフレームワークです。Apache License v2.0ライセンスで配布されています。

Twitter Bootstrapを使うと、CSSを書く負担を少なくレイアウトデザインが出来るという特徴があります。
一方で、Twitter Bootstrapを使うと、Twitter Bootstrapっぽいデザインと言いますか、CSSフレームワークなので当然とも言えますが、Webサービスをインターネットでよく見ている人からすると、どこかで見たサイトデザインになってしまうかもしれません。デザイナーさんの人の中には、そういう指摘をする人が多い印象も、個人的にはあります。いわゆるTwitter Bootstrapっぽく見せないためには、グリッドシステムとして例えばspan要素だけを使うとかすれば、場合によってはそのように出来るかもしれませんが、そうすると逆に、では、なぜCSSフレームとしてのTwitter Bootstrapを使うのかということにもなりますので、その辺りは制作者の判断になるかとは思います。

また、このような方法で制作をする場合、「インブラウザデザイン」という形で、PhotoshopやIllustratorを使ってデザインをするのではなく、ブラウザベースでデザインをしてWebサイトを制作していく流れの方がスムーズかと思います。
検索してみたら、斉藤さんが詳しく記事をまとめられていました。
インブラウザデザイン | CSS Radar | Mini Books For Front End Developers

レスポンシブWebデザインについて知りたい人は、このWP-Dにもいらっしゃる、
レスポンシブ・ウェブデザイン標準ガイドあらゆるデバイスに対応するウェブデザインの手法
という本がオススメです。

Twitter Bootstrapについては、
田口さんが動画を配信していたり、
Twitter Bootstrapの基礎 (全18回) – ドットインストール
酒井さんがTwitter社でBootstrapの勉強会を開いていたり、
ECサイト構築勉強会第２回「Twitter社に行ってBootstrapを使おう！」
学ぶ機会も多いですので、見てみると良いかもしれません。

あっ、あと、埼玉県さいたま市大宮駅東口徒歩１分のコワーキングスペース「7F」というのが2012年12月1日(土)にオープンしますので、そこに来てもらえると、Twitter Bootstrapの勉強会を開いたり、個別に教えあったりする機会も多いと思います。

以上です。

では、7FのWebサイト制作に戻ります。
ではでは、また１か月後くらいに、お会いしましょう！