プライベートや仕事で気づいたことやノウハウなどを書き留めるブログです

2018/06/09

BloggerのシンプルテンプレートからBootstrap対応にする

0 件のコメント
元ネタはこちらです!
Using Bootstrap with Blogger Templates by Don James

手順を簡単に書いてみます。
やればそれっぽくできました。

Bootstrap以外の何かをインクルードしていいかも。
mini.cssでもいいかも。

2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ コリスさん
https://coliss.com/articles/build-websites/operation/css/lightweight-css-frameworks.html



簡単に書いてみた手順 
※動作確認していないので自己責任でお願いします!

【準備】
■新しいブログを作る
■シンプルを選ぶ、白いのを選ぶ
■テーマ>カスタマイズからレイアウトを変更
本文:左上、フッター:一番右
【コードの変更】
テーマ>HTML編集に入る
■<b:skin>の中身を削除
<b:skin>から<Variable name="body.text.color" ・・・  </Group>まで残す。
<Variable name="body.text.color" ・・・  </Group>のすぐ下の行から
]]></b:skin>のすぐ上までを削除。
500行くらいを削除すると思います。


■<b:template-skin> の中の<![CDATA[ から ]]> を削除
<b:template-skin>の左の三角形のアイコンをクリックして展開。
<![CDATA[ から ・・・]]>を全部削除。

■widgetのbloggerタグの内部に入っていないdivタグの削除
ここがすごく大変でよく間違う・・・。
3回くらい失敗しました。
widgetに入ってるのは残します。
<div class='body-fauxcolumns'>のタグから初めて一個ずつ手作業で。
すごくたくさん削除します。
タグのデバッグ機能があるので、2、3個ずつ消して保存、の繰り返しで。








■これで完了!


【Bootstrapコードの貼り付け】
■</body>の直前にjqueryなど貼り付け

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script crossorigin='anonymous' integrity='sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'/>


■<head>の直後にはりつけ

    <meta charset='utf-8'/>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <!-- The above 3 meta tags *must* come first in the head; any
other head content must come *after* these tags -->

■<head>の中のどこかに貼り付け
<title>の直下あたりに貼り付けでいいと思う。

<!-- Bootstrap -->

<!-- <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/> -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

■bootstrapのcssを貼り付け
bloggerの特殊タグのnavbarと同名なので、navbar2へ置換する。
・下記のcssをテキストエディターに貼り付け
・navbar > navbar2 に文字置換
・<b:skin><![CDATA[/* のどこかに貼り付け
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css


■試しにnavbarを使ってみる!
<!-- Bootstrap navbar -->
      <nav class='navbar2 navbar2-default'>
        <div class='container-fluid'>
          <div class='navbar2-header'>
            <button aria-controls='navbar2' aria-expanded='false'
class='navbar2-toggle collapsed' data-target='#navbar2'
data-toggle='collapse' type='button'>
              <span class='sr-only'>Toggle navigation</span>
              <span class='icon-bar'/>
              <span class='icon-bar'/>
              <span class='icon-bar'/>
            </button>
            <a class='navbar2-brand' href='#'>Project name</a>
          </div>
          <div class='navbar2-collapse collapse' id='navbar2'>
            <ul class='nav navbar2-nav'>
              <li class='active'><a href='#'>Home</a></li>
              <li><a href='#'>About</a></li>
              <li><a href='#'>Contact</a></li>
              <li class='dropdown'>
                <a aria-expanded='false' aria-haspopup='true'
class='dropdown-toggle' data-toggle='dropdown' href='#'
role='button'>Dropdown <span class='caret'/></a>
                <ul class='dropdown-menu'>
                  <li><a href='#'>Action</a></li>
                  <li><a href='#'>Another action</a></li>
                  <li><a href='#'>Something else here</a></li>
                  <li class='divider' role='separator'/>
                  <li class='dropdown-header'>Nav header</li>
                  <li><a href='#'>Separated link</a></li>
                  <li><a href='#'>One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class='nav navbar2-nav navbar2-right'>
              <li class='active'><a href='./'>Default <span
class='sr-only'>(current)</span></a></li>
              <li><a href='../navbar-static-top/'>Static top</a></li>
              <li><a href='../navbar-fixed-top/'>Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>


何かそれっぽくはなってる気がする!
使えるかどうかわからないけどテンプレートデータはこれ。
https://drive.google.com/file/d/1vI83j9YH3pMorxtrec5Q5sEdDaa_K1Ky/view?usp=sharing






0 件のコメント :

コメントを投稿