おすすめ記事ピックアップ
BloggerにBootstrap CDNをたった1分で導入できる方法を説明します。Bootstrapは、簡単に言えばデザインされたCSSファイルです。
Bootstrapを入れて、divタグを使えば、表やボタンなどきれいなCSSデザインを利用できます。CDNとは、ネット上に置かれたファイルで、そのリンクをコードに貼り付ければ、ファイルが読み込まれるという仕組みです。
Bootstrap CDNサイトはこちら
http://getbootstrap.com/getting-started/
Bootstrap 非公式説明サイトはこちら
http://www.wivern.com/bootstrap/index.html
上記サイトを見ると、難しくて震えてきます。開発者向けに最適に書かれているので、初心者は恐怖を感じます。それをものすごく簡単に説明いたします。
こんな感じに貼り付けましょう。
以上で完了です。
あとは記事投稿の際に、こちらのサイト（http://getbootstrap.com/css/）の説明のようにdivタグを使えば、デザインを反映できます。でもやはり説明が難しいと思います。
使いやすそうな部分をピックアップしました。
記事投稿のHTMLから、コートを貼り付ければ使えます。
※ただしH1とかH2とかの在来のCSSデザインがあると、効果が重なって表示されます。そういうときは、h1やh2などは使わずに、フォントサイズを大きくしたりすればOKです。
少しでもBootstrapになれたら、Bootstrapのサイトを見て、いろいろ自由にBootstrapを使えるようになれればいいですね。実際に下記に上記のBootstrapしています。使いこなすには、Bootstrapの知識が必要ですね。
こんな感じに
ラベルっぽいことをしたり
Bootstrapを入れて、divタグを使えば、表やボタンなどきれいなCSSデザインを利用できます。CDNとは、ネット上に置かれたファイルで、そのリンクをコードに貼り付ければ、ファイルが読み込まれるという仕組みです。
Bootstrap CDNサイトはこちら
http://getbootstrap.com/getting-started/
Bootstrap 非公式説明サイトはこちら
http://www.wivern.com/bootstrap/index.html
Bootstrap CDNをコードを貼り付ける
こちらのBootstrap CDNのコードをBloggerのHTML編集から、stylesheet類が書かれているあたりに貼り付けます。Blogger用に書き換えてあります。head内にかけばOKですね。<!-- Latest compiled and minified CSS -->
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' rel='stylesheet'/>
<!-- Optional theme -->
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css' rel='stylesheet'/>
こんな感じに貼り付けましょう。
以上で完了です。
あとは記事投稿の際に、こちらのサイト（http://getbootstrap.com/css/）の説明のようにdivタグを使えば、デザインを反映できます。でもやはり説明が難しいと思います。
使いやすそうな部分をピックアップしました。
記事投稿のHTMLから、コートを貼り付ければ使えます。
※ただしH1とかH2とかの在来のCSSデザインがあると、効果が重なって表示されます。そういうときは、h1やh2などは使わずに、フォントサイズを大きくしたりすればOKです。
ラベル
<h1>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</h1>
<h2>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</h2>
<h3>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</h3>
<h4>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</h4>
<h5>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</h5>
<h6>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</h6>
<p>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</p>
色が付いた枠
<div class="bs-example bs-example-bg-classes" data-example-id="contextual-backgrounds-helpers">
<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
色がついた丸い枠
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
引用っぽい枠
<div class="well">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
使いやすそうな表
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
イメージの枠
<div class="bs-example bs-example-images" data-example-id="image-shapes">
<img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/140x140" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
<img data-src="holder.js/140x140" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
</div>
パネルっぽい感じ
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
実際に使ってみた
少しでもBootstrapになれたら、Bootstrapのサイトを見て、いろいろ自由にBootstrapを使えるようになれればいいですね。実際に下記に上記のBootstrapしています。使いこなすには、Bootstrapの知識が必要ですね。
こんな感じに
ラベルっぽいことをしたり
こんな風にマーカっぽくしたり
なんか四角い枠をつけたり
ちょっと豪華な吹き出し的な
見せ方として使ったりできますよ
