はてなブログでBootstrap, fontawesomeを利用する

cssを自分で作らずにスタイルの良いボタンを配置したり、
あらかじめ用意されたアイコンを使ったり、
はてなブログでも結構簡単に利用できます。

その手順をまとめます。

Bootstrapとは

スタイルの良いボタンやdivをいちいち作成するのは面倒ですよね。
そんな方には
Bootstrapをオススメします。

getbootstrap.com

あらかじめ決められたクラスを追加するだけで
あなたのはてなブログも簡単にレイアウト調整することが可能です。

ボタンのタグ

<a class="btn btn-waring">黄色のボタンです</a>

はてなブログでBootstrapを使えるようにするには

スタイルシートをダウンロードして、アップロードまたは転記する方法もありますが、とても手間です。
はてなブログ管理画面の、設定画面->詳細設定->headに要素を追加という項目に下記のcss読み込み文をコピペします。

「https:」はあえて削除しています。
これはChromeの警告を防ぐためで、httpサイトがhttpsのデータを読み込むのは良くないためです。
※逆(https->http)も言えます。
※はてなブログに関わらず他のサイトでも同じです。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">

実際のボタンがこちら↓
黄色のボタンです

こんな感じでボタンの配置が簡単に行えます。
他にもdivの色を変えたり、角丸の領域を作ったりといろいろなデザインが含まれています。

fontawesomeとは

fontawesomeは700種類近くのアイコンをウェブ経由（ダウンロードなどせずに）で使えるとても便利なサービスです。
フォントなので、色・文字サイズは自由に調整できます。

はてなブログでfontawesomeを使えるようにするには

CDNといって、ウェブ上から直接読み込むcssを呼び出すにはメールアドレス登録が必要です。
変なメールは来ないので登録しても大丈夫でした。

メールアドレスを入力するとすぐに返信がきます。
その返信メールの中にこのコードをhead内に貼り付けてねという文章があります。
それをそのまま使います。

私の記載した方法はCDNでのやり方になります。

設定は簡単、Bootstrapと同じで、
はてなブログ管理画面からheadに要素を追加という項目にcss読み込み文をコピペします。

<script src="https://use.fontawesome.com/999999999.js"></script>

実際にアイコンを使うには、アイコン一覧ページで使いたいアイコンを選びます。
fontawesome.io

アイコンをクリックすると詳細画面に遷移します。
htmlタグが表示されているので、そのままコピペです。

<!-- Latest compiled and minified CSS -->
<i class="fa fa-id-card" aria-hidden="true"></i>

実際のアイコンがこちら↓

ボタンやリストのアイコンとして使えますよね。

しかしいろいろ調べてみると。。。
：
：
：
なんと、アイコンははてなブログにデフォルトで用意されていたようです。。。
記事作成後に気づきました、すみません
shirokai.hatenablog.com

ただ種類は圧倒的にfontawesomeの方が多いです。
入れておいて損はしないはずですよ。