taccuma note

Twitter BootstrapのWordPressプラグイン「WordPress Twitter Bootstrap CSS」が便利


photo by Creative Tools

Twitter Bootstrapが好きなたっくまです、こんにちは。
Twitter BootstrapというのはTwitter社が開発してるCSSフレームワークのことです。デザインが苦手な人でも、公式通りに記述すれば見た目かっちょいいサイトが作れる優れものです。

通常Twitter Bootstrapを使うには公式サイトから必要なファイル一式をダウンロードして、自分のサイトに設置してやる必要があります。Twitter Bootstrapのツール一式を使ってWordPressのテーマを自作しようかと思ったのですが、WordPress初心者ということでテーマの自作になかなか踏み出せず(笑)でもTwitter Bootstrap使いたいなぁと思って色々調べてたら・・・

なんとTwitter BootstrapのCSSプラグインがあるという事実が判明。
Twitter Bootstrapのプラグインを入れておけば・・・

  • 自分でテーマを自作しなくてもTwitter Bootstrapが使える
  • テーマを変更してもTwitter Bootstrapが使える
  • ショートコードで手軽にTwitter Bootstrapが使える

自分でいちいちTwitter Bootstrapを設置しなくても(テーマを自作しなくても)使える、プラグイン形式のTwitter Bootstrapだからテーマを変更しても使えるのが嬉しいですよね。

このブログにも設置してみました。

プラグインのインストール

プラグインの新規追加から検索して見つけよう♪

WordPressのダッシュボード>プラグイン>新規追加から・・・「WordPress Twitter Bootstrap CSS」と検索してプラグインをインストール&有効化しよう。

設定

Bootstrapを使う前に簡単な設定をしよう

Twitter Bootstrapを使う前に簡単な設定をしましょう。設定はWordPressのダッシュボードから。上の写真を頼りにTwitter Bootstrap>Bootstrap CSS>と進んで、「Twitter Bootstrap CSS V2.0.4」を選びます。これで最新のTwitter Bootstrapが使えます。また、「Include ALL Bootstrap Javascript libraries」にチェックを入れておきます。こうすることで、Twitter Bootstrapの色々なツールが使えるようになります。

How to use(使い方)

Twitter Bootstrapには色んなツール(表現方法)がありますが、ココではよく使うものに絞って簡単にご紹介しますね。

アラート

[[TBS_ALERT class=”warning”]warningはこんな色です[/TBS_ALERT]]
[[TBS_ALERT class=”error”]errorはこんな色です[/TBS_ALERT]]
[[TBS_ALERT class=”success”]successはこんな色です[/TBS_ALERT]]
[[TBS_ALERT class=”info”]infoはこんな色です[/TBS_ALERT]]

アラートです。記事の中で目立たせたい部分に使うと効果的です。4色あります。ショートコードの開始タグと終了タグの間に文章を入れましょう。アラートの色を変更したい場合はショートコードの開始タグの中にclass="waring"のように指定します。

もちろんショートコードを使わずに

<div class="alert alert-warning">divとclassを使ってもOK</div>

本家Twitter Bootstrapと同じような記述方法でもOKです♪

ボタン

ボタンのサンプル ショートコードの書き方
[TBS_BUTTON class=”warning”]warning[/TBS_BUTTON] [[TBS_BUTTON class=”warning”]あああ[/TBS_BUTTON]]
[TBS_BUTTON class=”danger”]danger[/TBS_BUTTON] [[TBS_BUTTON class=”danger”]あああ[/TBS_BUTTON]]
[TBS_BUTTON class=”info”]info[/TBS_BUTTON] [[TBS_BUTTON class=”info”]あああ[/TBS_BUTTON]]
[TBS_BUTTON class=”primary”]primary[/TBS_BUTTON] [[TBS_BUTTON class=”primary”]あああ[/TBS_BUTTON]]
[TBS_BUTTON class=”success”]success[/TBS_BUTTON] [[TBS_BUTTON class=”success”]あああ[/TBS_BUTTON]]
[TBS_BUTTON class=”inverse”]inverse[/TBS_BUTTON] [[TBS_BUTTON class=”inverse”]あああ[/TBS_BUTTON]]

ボタンにもたくさんの色がありますね。上のテーブルの左側がボタンの見本(色別)で、右側がショートコードの記述例です。ボタンに表示させるテキストはショートコードの開始タグと終了タグの間に書いて下さいね。ボタンの色はショートコードの開始タグ内にclassで指定します。

このボタンももちろん、本家Twitter Bootstrapと同じ記述方法が可能ですよ。
たとえば、class="warning"を使ってオレンジ色のボタンを作りたい場合・・・

<button class="btn btn-warning">オレンジ色のボタン</button>
<a class="btn btn-warning">オレンジ色のボタン</a>
[[TBS_BUTTON class="warning"]オレンジ色のボタン[/TBS_BUTTON]]

1~3どの書き方でも同じボタンが作成できますよ。

ショートコードを使わずにボタンを作成する場合は「大きめのボタン」とか「小さめのボタン」も作成可能です。小さいボタンを作る場合はclass="btn-mini"を、大きいボタンを作る場合はclass="btn-large"を追加します。

<button class="btn btn-warning btn-mini">小</button>
<button class="btn btn-warning">中</button>
<button class="btn btn-warning btn-large">大</button>

ラベル

ラベルのサンプル ショートコードの書き方
[TBS_LABEL class=”warning”]warning[/TBS_LABEL] [[TBS_LABEL class=”warning”]あああ[/TBS_LABEL]]
[TBS_LABEL class=”important”]important[/TBS_LABEL] [[TBS_LABEL class=”important”]あああ[/TBS_LABEL]]
[TBS_LABEL class=”info”]info[/TBS_LABEL] [[TBS_LABEL class=”info”]あああ[/TBS_LABEL]]
[TBS_LABEL class=”success”]success[/TBS_LABEL] [[TBS_LABEL class=”success”]あああ[/TBS_LABEL]]
[TBS_LABEL class=”inverse”]inverse[/TBS_LABEL] [[TBS_LABEL class=”inverse”]あああ[/TBS_LABEL]]

ラベルもバッジと使い方Classの色の指定方法など一緒ですね♪インラインで目立たせたい部分に使うと効果的です。ショートコードを使わずにマークアップするには・・・

ラベルだよ!

<span class="label label-warning">ラベルだよ!</span>

こんな風にマークアップして下さいね。

アイコン

アイコンの種類 ショートコード
[[TBS_ICON class=”icon-trash”]]
[[TBS_ICON class=”icon-tag”]]
[[TBS_ICON class=”icon-book”]]
[[TBS_ICON class=”icon-flag”]]

上の表はTwitter Bootstrapで利用できるアイコンの一例です。Twitter Bootstrapでは手軽に使えるアイコンセットがあらかじめたくさん用意されています。他にどんなアイコンが使えるか気になる人はTwitter Bootstrapの公式サイトで確認してみて下さい。

ショートコードを使わずにアイコンを使うには・・・

<i class="icon icon-trash"></i>

こんな感じでマークアップします。

Twitter Bootstrapでアイコンが使えるようになると、
ボタンやラベルなどと「合わせ技」が可能になりますよ。

<button class="btn btn-success"><i class="icon icon-tags icon-white"></i> アイコンつきボタン</button>
[[TBS_BUTTON class="success"][TBS_ICON class="icon-tags icon-white"] アイコンつきボタン[/TBS_BUTTON]]

最後に・・・

いかがでしたか?Twitter Bootstrapを使おうと思ったら普通は自分でテーマを自作してjQueryやJavaScript、その他必要なファイルを自分で埋め込んでCSSファイルも画像ファイルの場所を修正しなければいけなかったりと面倒くさいことが多々ありますが

このプラグインを使えばそうした面倒な手間が省けるし
テーマを変更してもTwitter Bootstrapがそのまま使えるので便利です。

他にもテーブルとかフォームとかバッジとか・・・色々なツールがありますので興味のある人はTwitter Bootstrapの公式サイトで調べてみて下さいね。

この記事をシェアする

コメント

コメントは管理人の承認後に公開されます...

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最近の投稿

おすすめ

タグクラウド

カテゴリー