Bootstrapを使って記事の中にアイコンやボタンを表示する

ファンブログは Seesaa Blog と同じなので、このブログのほとんどの内容は Seesaa Blog でも利用できます。

ファンブログ テック http://fanblogs.jp/techs/ はA8.netのファンブログ（無料）を使っています。

このブログは先日Twitter Bootstrapを使ってテンプレートを作り替えました。

テンプレートの改造は難しいので、その作業内容はこのページに書きません。ただ、既存のテンプレートでも１行追加するだけで下のようなアイコンを記事の中で使えるようになります。

その他にも、背景に色をつけたり、カラフルなボタンもすぐに作れるようになります。

Bootstrapというのは、簡単に言ってしまえばスタイルシート(CSS)です。JavaScriptもありますが、それは使わずに用意されたスタイルシートを読み込むだけでも、結構いろいろな事が出来るようになります。

Bootstrap のいちばんの目玉はレスポンシブデザインだと思うのですが、それについてはこのページでは触れません。

今回の目標

テンプレートに１行追加してBootstrapを導入します。そして下のサンプルを作って表示します。

Bootstrapの導入

テンプレートのheadタグ内に次の１行を追加します。それだけで、Bootstrapのスタイルシートが適用されます。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

ファンブログでの導入方法

（ファンブログ以外の場合や、やり方がわかる場合は「headタグへ追記」まで移動して続けてください）

ログインしたばかりの画面で「デザイン」をクリック。ブログを複数作っている場合は、適用させたいブログを間違えないように。

画面が変わったら「デザイン選択」欄の「HTML」をクリック。

すると次の画面になります。

一覧に「デフォルトHTML」しかない場合、そのままでは編集できません。デフォルトHTMLを編集することは出来ないからです。その場合は、右側にある「HTMLの追加」をクリックします。

新しいHTMLの編集画面が開かれますので、空の「HTML名」欄に好きな名前をつけます。（この記事ではBootstrapという名前にしました）名前をつけないと、編集終了後に保存できません。

headタグへ追記

headタグ内の最後（</head>の１行上）に先ほどのソースを追記します。

追記したら保存します。

ファンブログやSeesaa Blogの場合、これだけでは編集したHTMLが適用されません。新しいHTMLの名前の左の適用をクリックして、「デフォルトHTML」についている適用の印を新しいHTMLに変更します。

変更前

変更後

記事の中にBootstrapのアイコンを表示させる

以上の準備が済めばBootstrapのスタイルシートが適用されているので、記事の中で使えます。

例えば音符アイコン を表示するには記事の中で、以下のように書きます。

<span class="glyphicon glyphicon-music"></span>

これがアイコンとして表示されます。（<span> と </span> の間は空で構いません）

glyphicon-musicの部分を差し替えると他のアイコンになります。

Twitter Bootstrap 3 のアイコン一覧

Bootstrap 3 では2014年3月18日時点で200個のアイコンが用意されています。

ボタンを作る

リンクへ移動するボタンを作るには次のように書きます。

<a class="btn btn-primary" href="リンク先URL">リンクする文字</a>

例として次のように書くと

<a class="btn btn-primary" href="https://fanblogs.jp/techs/">トップページへ移動</a>

このように表示されます。

トップページへ移動

ボタンの色は btn-primary を変更すれば変えられます。

<a class="btn btn-primary" href="URL">青いボタン</a>
<a class="btn btn-success" href="URL">緑のボタン</a>
<a class="btn btn-info" href="URL">水色のボタン</a>
<a class="btn btn-warning" href="URL">オレンジのボタン</a>
<a class="btn btn-danger" href="URL">赤いボタン</a>

表示結果

青いボタン

緑のボタン

水色のボタン

オレンジのボタン

赤いボタン

色つきの枠で囲む

文章を色で囲むには下のように書きます。

<p class="bg-primary">青</p>
<p class="bg-success">緑</p>
<p class="bg-info">水色</p>
<p class="bg-warning">黄色</p>
<p class="bg-danger">赤</p>

表示結果

青

緑

水色

黄色

赤

四隅を丸めたい場合は次のようにします

<p class="alert alert-success">緑</p>
<p class="alert alert-info">水色</p>
<p class="alert alert-warning">黄色</p>
<p class="alert alert-danger">赤</p>

表示結果

緑

水色

黄色

赤

上の <p> タグは <div> タグでも適用できます。

<div class="alert alert-success">
<p>緑の枠の中で</p>
<p class="alert alert-info">水色</p>
<p class="alert alert-warning">黄色</p>
<p class="alert alert-danger">赤</p>
</div>

表示結果

今回の目標の表示

以上を踏まえると、冒頭で目標にした表示は次の通りに実現できます。

<div class="alert alert-warning">
<span class="glyphicon glyphicon-pencil"></span>今日のテーマ
今日はBootstrapについて書きます。
わからないことは <a href="http://google.co.jp/" target="_blank"><span class="glyphicon glyphicon-search"></span>ここをクリック</a> して検索してくださいね <span class="glyphicon glyphicon-thumbs-up"></span>

<a class="btn btn-primary" href="https://fanblogs.jp/techs/"><span class="glyphicon glyphicon-star"></span>トップページへ移動</a>
</div>

表示結果

Bootstrapのより詳しい情報は公式サイトをご覧ください。

ご存知ですか？
ファンブログにはA8.net以外のアフィリエイトを貼ることが、規約で正式に認められています。

おすすめアフィリエイト会社（ASP）一覧

忍者AdMax

クリック報酬型専門アフィリエイト。クリックされるだけで報酬に。今まで最高で1クリック73円ついたことがあります。

最低振込報酬額500円（振込手数料150円 ただし楽天銀行とジャパンネット銀行への振込は無料）

アフィリエイトＢ

アフィリエイターへのサポートが良く、報酬に消費税分を上乗せして払ってくれます。

最低振込報酬額777円（振込手数料無料）

アクセストレード

オンラインゲーム系のアフィリエイトが非常に豊富。クローズド・ベータ・テスター募集広告などが狙える。

最低振込報酬額1,000円（振込手数料無料）

バリューコマース

通常の広告以外にも、非常に多くのアダルトサイト向け広告がある。アダルトサイト運営者におすすめ。

最低振込報酬額1,000円（振込手数料無料）

ファンブログは A8.net の会員だけが使えます。