BloggerにTwitter Bootstrapを設定

Twitter Bootstrapとは

前回、Bloggerにメイリオフォントを設定しました。フォントを変えただけでもブログの見た目が少しよくなりました。見た目がよくなると、なんとなくですが更新意欲もわいてくるものですね。というわけで、さらなる見た目向上を目指します。



今回挑戦するのは、Twitter Boostrapの導入です。フロントエンドツール「Twitter Bootstrap」というのは、CSSフレームワークです。CSSとjQueryを読み込ませるだけで、それなりのデザインのサイトを作ることができます。Twitter社がオープンソースとして提供しているもので、無料で使用できます。

デザイン力というのはなかなかすぐに身に付くものではありません。WEBプログラマーはバックエンドのプログラムを書くのは得意でも、フロントのデザインに自信がないという人が多いようです。そんな人がデザイナー抜きでフロントエンドを作ろうとすると、時間がかかってしまいます。

私はWEBプログラマーというほど専門家ではありませんが、センスもないので、こういったツールは助かります。少ない手間でそれなりの見た目のサイトが構築できるのはいいですよね。WEBアプリケーションのスタートアップ時には、見た目よりスピードが重要なので、まずはBootstrapで作ってみるという使い方ができると思います。

BloggerにBootstrapを導入

というわけで、勉強がてらこのブログに適用してみることにします。

本来であれば、BootstrapのCSSをダウンロードしてきて自分の用意するWEBサーバーに設置しなければならないのですが、CDNを提供してくれるサイトがあります。Bloggerから直接こちらを読み込ませてBootstrapを設定しようと思います。

参考にしたのは、こちらのサイトです。
Blogger をカスタマイズ

まずは、CDNを提供してくれるサイトからCSSとJavaScriptへリンクを張るコードをコピーしてきます。


QuickstartにあるCSSとJavaScript用のHTMLをコピーします。


こちらはCSS。HTMLのコードをコピーします。


こちらはJavaScript。HTMLのコードをコピーします。


テンプレートからHTMLの編集


CSSのHTMLは、</head>のすぐ上に貼り付けます。ただ、先ほどのCDNのリンクコードはタグがとじていないので、保存時にエラーが出ました。そこで、以下のように変更しました。

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

最後の</link>を追加しました。


JavaScriptのHTMLは、</body>のすぐ上に貼り付けます。Bootstrapは、jQueryが必要ですので、
追加します。貼り付けたHTMLは以下の通り。

<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

設置後はこんな感じに


あまり変わっていないようにも見えますが・・・


<pre>の部分が変更されていました。

まだほとんどBootstrap用のタグを使用していないのであまり変化はありませんが、HTMLを変更して少しずつカスタマイズしていこうと思います。

コメント

このブログの人気の投稿

SEから経理へ転職できるのか?

社内SEになって後悔しがちな3つのこと