※http://www.bloggertipspro.com/2016/01/using-bootstrap-with-blogger-templates.html を参照させていただきました。
カスタマイズテンプレート準備
テーマ>カスタマイズ>シンプルを選択。左端のレイアウトで、図のように一番シンプルな作りのものを選択したら、右上「ブログに適用」をクリック。
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>の行を必ず残すこと!)
エラーが出なければ、テーマを保存をクリック。
こうなる |
ctrl+Fで、コードの中から<b:template-skin>を検索。
そのすぐ下の、<![CDATA[ と ]]> の間を削除する。
(<![CDATA[ と ]]>は必ず残すこと!)
エラーが出なければ、テーマを保存をクリック。
こうなる |
ctrl+Fで、コードの中から<b:template-skin>を検索。
<div class='body-fauxcolumns'>を含め、<header>の直前まで削除する。
(<div class='body-fauxcolumns'>は削除して、<header>は必ず残すこと!)
エラーが出なければ、テーマを保存をクリック。
こうなる |
ctrl+Fで、コードの中から</header>を検索。その上の部分のdivタグで囲まれている部分を削除。
headerタグの中身が、
<b:section から始まり、</b:section>で終わるものだけになる。
s<div class='body-fauxcolumns'>を含め、<header>の直前まで削除する。
(</div >などが残ってしまわないよう注意!)
エラーが出なければ、テーマを保存をクリック。
こうなる |
以下、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>の直下です。
こうなる |
まとめ
上記の設定で、Bootstrapの導入は完了です。
さらにナビゲーションバーや背景を少しいじってみた結果がこちらのデモページです。
作りこんでいけばもっとおしゃれにできると思うので、Bootstrap、勉強していきたいなと思います。