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タグの削除
ここがすごく大変でよく間違う・・・。
３回くらい失敗しました。
widgetに入ってるのは残します。
<div class='body-fauxcolumns'>のタグから初めて一個ずつ手作業で。
すごくたくさん削除します。
タグのデバッグ機能があるので、２、３個ずつ消して保存、の繰り返しで。
■これで完了！
【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><
0 件のコメント:
コメントを投稿