とあるテーマのBootstrap化 その1 まずは読み込ませて部分的にテスト


某サイトで既にカスタマイズされたテーマがある。

で、これをCSSのフレームワークのBootstrap化したい。単純に呼び込むだけなら、問題ないが、当然レスポンシブになるし、1から作りたいが既に運用しているのでそうもできない(リソース的に)

これは、そんなサイトの改修記録です。

 

まずはBootstrap呼び込ませる。

まずテーマを確認
Bootstrap本体をダウンロード
現在のバージョン3.3.7
今回、CDNを使わずにファイルを設置する。理由はキャッシュ効かせてるぐらいなので、極力読み込みをおさえたいから(安直に)

本体はWEBルート内のcontents内、テーマ内にCSS,fonts,jsをそれぞれ入れ込む。ちなみにbootstrap.min.css はコメントや改行を削除した圧縮版

header.phpに

次にfooter.phpに

部分的に実装を行う。

まずはsingle.phpに<div class=”container”>で括ってグリッド化する。
このサイトはサイドバーが右にあり全体は
幅1280,メイン800,サイドバーが300,のこりはマージンなっている。
ここでブレイクポイントにあわせて全体のレイアウトを決めることにする。

……つづく

 

Follow me!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA