Twitter Bootstrap のボタンなどを WordPress に適用する方法についての考察

以前、記事「プラグイン「Content Bootstrap」をちょっとさわってみました」において、「Twitter Bootstrap 」なるものがこの世に存在することについて覚書きしました。

ここでは、それをレンタルサーバ等にインストールするタイプの WordPress や WordPress.com でどうやったら使えるようになるのかについて考察してみました。

Twitter Bootstrap !」と叫んでみたが、ボタンは表示されなかった

そもそも、Twitter Bootstrap というのは、これのようです。

Bootstrap
Bootstrap

asgsdgsda
#01 Twitter Bootstrapとは何か? | Twitter Bootstrap入門 – プログラミングならドットインストール

によると、Twitter Bootstrap とは、

ツイッター社が提供する、今風のウェブサイトを構築するための言語です。これを使ってHTMLとCSS、JavaScriptを簡単に拡張することができます。

なのだそうです。

わけがわからないので、とりあえずダウンロードして中身を確かめてみると、

Bootstrap-1

こんなフォルダが入っていました。たぶん、「CSS」と「img(画像)」と「js(JavaScript)」だと思うので、どうやら、これらだけでウェブサイトを作るのではなくて、組み込むもののようです。

bootstrap-1-1

また、どうやら、以下のサイトで配布されている CSS でデザインを変更できるらしいです。

adfasdfads
Bootswatch: Free themes for Twitter Bootstrap

レンタルサーバ等にインストールするタイプの WordPress では、「WordPress Bootstrap」というテーマを使ったら、それっぽくなった

以下の記事などを読んでみると、

このまま「がっとやってポン!」という感じですぐに使えるようになるわけではないらしいことがだんだんとわかってきました。

以下の記事群を読み進めるうち、

「WordPress Bootstrap 」というテーマをインストールすれば、いい感じのボタンとかを使えるらしいことがわかりました。

afasfasdfs
WP-Bootstrap – Bootstrap in a WordPress theme.

実際に WordPress の方へ上記のテーマをインストールし、

sdafsafsd

実際にたしかめてみたら、ちゃんとボタンが貼れました。

dsfsfsd

なお、以下のような記述でもボタンが表示されたので、ボタンを貼るくらいであれば、ショートコードを使う必要はなさそうです。

<div class="btn btn-info">Info</div>

なお、「Bootswatch.com Themes」を使えるメニューもありましたが、

dfcafads

iPhone 等でちゃんと表示されませんでした。

adfafdads

「WordPress Bootstrap」じゃなくてもそれっぽいボタンを表示させるときには「WordPress Twitter Bootstrap CSS」というプラグインを使えばいいらしい

さて、ここで、「テーマは今使っているもののままで、ボタンだけ導入したいんだけど」というニーズにどう答えるか、となるわけですが、どうやら、「WordPress Twitter Bootstrap CSS」というプラグインを使えばいいようです。このプラグインは検索で簡単に仕入れることができました。

agfafdasza

ためしにテーマ「Twenty Twelve」にボタンを追加してみたら、ちゃんとできました。

image

「Bootstrap LESS」というところで色の変更もできるようで、適当に色をいじって、

adffasdfs

「Compile CSS」ボタンを押してみたら、

adfafasd-1

ボタンの色を変えることができました。

asdfadfas

rect3015

agafasd

ただし、テーマによっては以下のようになったりするので、ショートコードではなくて、HTML タグを使ったほうが事故(各種テーマでの CSS で同じクラス名をあてていたり、CSS の優先順位がずれて、表示が思い通りではなくなったりすること等)は少ないような気がします。

dfasd

WordPress.comTwitter Bootstrap のボタンなど(だけ?)を使う方法

で、前振りが長くなってしまいましたが、ここからが本題です。「では、WordPress.com では Twitter Bootstrap のボタンなどは使えないのか?」ということなのですが、技術的には OK でしたが、権利関係については、ネット情報上はたぶん OK(apache 2.0 というライセンスはコードの上にその旨の記載をしていれば(=もとのコードの上の部分をそのままコピー)、どこでもだれでも使っていいとの認識です) ということでやり方を公開しますが、まずいことがあればコメント等ください。

まず、以下のサイトより、ファイルをダウンロード。

Bootstrap-2

ダウンロードしたフォルダのうち、「CSS」をクリック。

bootstrap-2-1

「bootstrap.min.css」(「bootstrap.css」でも可能)をテキストエディタ等で開きます(私の場合は、「Coda 2」)。

css-1

まるごとコピーして、

bootstrap.min.css

CSS スタイルシートエディターへ貼り付けます。

CSS ‹ Demo — WordPress

「プリプロセッサ」というところで「LESS」を指定し、

afasfads

「スタイルシートを保存」ボタンをクリックで、

adfadfads

WordPress.com でも Twitter bootstrap のボタン等が表示されるようになります。

adgfafdasd

なお、本作業のとおりにすれば、結果的に CSS の上の方に権利関係の記述が残りますので、ライセンス上も問題ないとの認識ですが、もし、そうでないようであれば、その旨お知らせ頂ければ幸いです。

sdgsgfsafg

WordPress.com に貼りつけた Twitter bootstrap のボタンを編集する方法

さて、次に「テーマに合わせて色とか変更したいんだけど」というニーズが生まれると思うのですが、これも以下のサイトで可能のようです。

adfasfasd
StyleBootstrap.info: Twitter Bootstrap theme generator

適宜、色を変更し、

dfgsfsdf

「Get unique page for this style」ボタンをクリック。

sdfvsdfs

「Download this page’s style」ボタンをクリック。

asdfafasd

吐き出されてきた CSS をコピーし、

adfvsfs

CSS スタイルシートエディターの下の方に貼り付け、

image

「スタイルシートを保存」ボタンをクリックすると、

CSS ‹ Demo — WordPress-1

ボタン等の色を変更することができます。

adfadfas

ただし、意図しないところまで色が変更されてしまったりするので、

asdfadfas-1

その場合は、自分で不必要な部分の CSS を削除する必要があります。

sgvsgsfsdg

なお、色の変更状態を初期化するときには、URL アドレスの末尾部分を削除すれば OK です。

image

以上、Twitter Bootstrap なるものを WordPress で使用する方法についての考察でした。

1件のコメント

  1. […] WordPressにBootstrapのボタンだけつけれないかと調べてみたらプラグインがあるらしいのでインストール ついでにjQueryとかも入れてもらった […]

    いいね

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

w

%s と連携中

%d人のブロガーが「いいね」をつけました。