読者です 読者をやめる 読者になる 読者になる

interact

旅行記やレビューなどなど全力でお伝えする情報サイト

はてなブログにBootstrapを導入する方法

Sponsored LINK

今回は「はてなブログ」にBootstrapを導入する方法についてです。

はい、皆さんこんにちは。いんたらくとです。

 

 

Bootstrapとは

f:id:interacting:20161111205205p:plain

 

Twitter社が公開している選べるレトルト食品みたいなコードです。読み込むだけで、分割やボタンが簡単に設置できるようになります。

 

getbootstrap.com

 

バグなのかJSファイルを一番最後に読み込ませないと動作しないケースがありましたので、動作にお悩みの方はそちらもお試しください。

 

はてなブログでの手順

BootstrapのサイトからCSSファイルとJSファイルをダウンロードできるのですが、はてなブログではそれらをアップロードする方法がないため使えません。

 

現行のバージョンよりも古くなってしまいますが、CDN(Content Delivery Network)というWEBサービスを利用することで、リンクするだけで使えるようになります。

 

www.bootstrapcdn.com

今回はMaxCDNというサイトにアップロードされているBootstrap3.3.7をはてなブログに導入してみます。

 

手順その1

設定>詳細設定にあるheadに要素を追加というところに

 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 

というコードをコピペします。

 

手順その2

デザイン>カスタマイズ>フッター

 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 

というコードをコピペします。

 

以上です。

たったこれだけで、あっという間にBootstrapを導入できます。

 

使いかた

Bootstrapの使い方はリファレンスから、非公式の解説サイトまで様々なサイトが有り、どのサイトもわかりやすく解説して下さっています。

 

bootstrap3.cyberlab.info

 

リファレンス以外では「とほほのBootstrap入門」が人気があるようです。

 

とほほのBootstrap入門

 

はてなブログは比較的自由に(かごの中の)カスタマイズが出来るので、みなさんも挑戦してみてください!それでは、また!

Copyright © 2017 interact All Rights Reserved.
supported by Interact Media Terminal

本文・画像・ソースコードの無断転載禁止