1分で導入!BloggerでBootstrap CDNを使おう。簡単に優れたCSSデザインを利用できるよ。

おすすめ記事ピックアップ

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

上記サイトを見ると、難しくて震えてきます。開発者向けに最適に書かれているので、初心者は恐怖を感じます。それをものすごく簡単に説明いたします。


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の知識が必要ですね。



こんな感じに

ラベルっぽいことをしたり


こんな風にマーカっぽくしたり


なんか四角い枠をつけたり

ちょっと豪華な吹き出し的な
見せ方として使ったりできますよ





いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : 1分で導入!BloggerでBootstrap CDNを使おう。簡単に優れたCSSデザインを利用できるよ。
1分で導入!BloggerでBootstrap CDNを使おう。簡単に優れたCSSデザインを利用できるよ。
http://2.bp.blogspot.com/-4d-T3GciEFs/VQwZv3cAwcI/AAAAAAAAXIc/2G-zpfRR4x4/s1600/Blogger%2B%2B%E3%81%B5%E3%82%8A%E3%82%80%E3%81%91%E3%81%B0%E3%82%B3%E3%82%A6%E3%83%9B%E3%82%A6%2B%2B.png
http://2.bp.blogspot.com/-4d-T3GciEFs/VQwZv3cAwcI/AAAAAAAAXIc/2G-zpfRR4x4/s72-c/Blogger%2B%2B%E3%81%B5%E3%82%8A%E3%82%80%E3%81%91%E3%81%B0%E3%82%B3%E3%82%A6%E3%83%9B%E3%82%A6%2B%2B.png
ふりむけばコウホウ
http://www.furimuke.com/2015/03/blogger-bootstrap-cdn.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2015/03/blogger-bootstrap-cdn.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy