Bloggerでレイアウトガジェットを残しつつBootstrapを導入する方法 - 切り絵Blog 影織文庫

Bloggerでレイアウトガジェットを残しつつBootstrapを導入する方法

Bloggerでレイアウトガジェットを残しつつ、Bootstrapを導入する方法を調べたので、備忘録として残しておきたいと思います。
http://www.bloggertipspro.com/2016/01/using-bootstrap-with-blogger-templates.html を参照させていただきました。

カスタマイズテンプレート準備

テーマ>カスタマイズ>シンプルを選択。
BloggerへのBootstrap導入方法


左端のレイアウトで、図のように一番シンプルな作りのものを選択したら、右上「ブログに適用」をクリック。
BloggerへのBootstrap導入方法

div削除祭り

〇失敗しないポイント
※divの閉じタグは、1000行くらい下にあることもあるので、エディタにコピペして、どこからどこまでがひとつのdivか確認しつつ、Blogger上でひとつずつ消しながらエラーチェックしていくとよい


テーマ>HTMLの編集を開く。
ctrl+Fで、コードの中から ]]></b:skin> を検索。
<b:skin>---- ]]></b:skin>となっているところで、左側の黒三角▶マークを開く。
<b:skin>の十行くらい下の、 <Group description="Backgraounds">の行以下、
 ]]></b:skin>の一行上まで削除する。
</b:skin>タグ、 ]]></b:skin>の行を必ず残すこと!)
エラーが出なければ、テーマを保存をクリック。
BloggerへのBootstrap導入方法
こうなる

ctrl+Fで、コードの中から<b:template-skin>を検索。
そのすぐ下の、<![CDATA[  ]]> の間を削除する。
<![CDATA[  ]]>は必ず残すこと!)
エラーが出なければ、テーマを保存をクリック。
BloggerへのBootstrap導入方法
こうなる

ctrl+Fで、コードの中から<b:template-skin>を検索。
<div class='body-fauxcolumns'>含め、<header>の直前まで削除する。
<div class='body-fauxcolumns'>は削除して、<header>は必ず残すこと!)
エラーが出なければ、テーマを保存をクリック。
BloggerへのBootstrap導入方法
こうなる

ctrl+Fで、コードの中から</header>を検索。その上の部分のdivタグで囲まれている部分を削除。
headerタグの中身が、
<b:section から始まり、</b:section>で終わるものだけになる。
s<div class='body-fauxcolumns'>含め、<header>の直前まで削除する。
</div >などが残ってしまわないよう注意!)
エラーが出なければ、テーマを保存をクリック。
BloggerへのBootstrap導入方法
こうなる

以下、divタグで囲まれる部分をひたすらテンプレート末尾まで消していく。
ただし、<b:section の中身のdivは消さないこと!

※基本的にdivで囲まれたものは消してしまってよいのですが、footerの中身の<div class='region-inner footer-inner'>の部分と、scriptタグのすぐ上の4連divタグは消すと怒られます。
間違ってsectionの中身を消してしまわないよう、<b:sectionの左の行番号をクリックして、閉じた状態にしておくとよいです。


Bootstrap導入

〇失敗しないポイント
Bootstrap4系を使うと、なぜか動作しなかった。3系を導入すること(4系で動いた方いらっしゃったら教えてください)

jQueryとBootstrapを読み込む。
</body>タグの直前に以下を記述。
※適宜最新版を導入するよう書き換えてください。

<head>タグ直下に以下のように書く。
この3行より上に他のmetaタグを足すなどしないこと!

CSSコードを変更する。 bootstrapのCSS(左にリンクを貼っています。最新版はURL内のバージョン数を変えてください)を貼り付けます。 ただし、貼り付ける前に、メモ帳などに一旦コピペして、navbarという単語を、navbar2に全置換します(Blogger内でnavbarと語が既に使われていて、衝突を起こしてしまうんですね)。
貼り付ける場所は、<b:skin>内の</Group>の直下です。
BloggerへのBootstrap導入方法
こうなる

まとめ

上記の設定で、Bootstrapの導入は完了です。
さらにナビゲーションバーや背景を少しいじってみた結果がこちらのデモページです。
作りこんでいけばもっとおしゃれにできると思うので、Bootstrap、勉強していきたいなと思います。

Bloggerでレイアウトガジェットを残しつつBootstrapを導入する方法 Bloggerでレイアウトガジェットを残しつつBootstrapを導入する方法 Reviewed by 影織 on 11月 23, 2018 Rating: 5