2015年7月21日火曜日

BootStrap と もっともシンプルなblogger テンプレートを作る 



【Bootstrapを使ったBlogger テンプレート】 ← こちらで販売しています!

ブロガーの良さを残しbootstrapを取り入れるバージョン完成

こんなjquery あったんか!「jQueryのバージョンを上げたら動かなくなった…!」という場合に修正箇所を教えてくれたり、廃止されたAPIを復元して動くようにしてくれたりします。 

これもつけてとにかくBootstrapをCDNで入れ込む 必ずjquery は前に入れること!
こちらで実験中

初期値で要素の検証でエラー出るのは、Chromeのバグということだが、ツイッターなどの共有ボタンを消すとOK

モバイル要素は全部消す mobile との切替はなし(でも消しても復活するものありw)
フッターの組み方はマクロを単純に消すとエラー


上部のveiwport を設定を変更します。(最後のカッコ閉じる / を忘れない)
この際、eiwportの意味も徹底理解したいです!  いや、手っ取り早くどれがいいのか教えてくれたらそれでいいわ!

こちらのBlogger のヘルプも参照しながら、前からやりたかった徹底分析です!
  • ブログタイトルの表示 <data:blog.title/>

これをブートストラップ的にナビバーに入れるとすると

ヘッダーは…jumborton を使ってみます。 ここに、blogger のHedar をいれって、トップページだけには画像が入り、そうでない場合はキャッチフレーズとして、ブログの説明だけが反映されるようにします。

blogger は仕様で、明らかにいらないコードもwidgetのdataは復活するものもあります。


コンテンツのワイドを決める
トップ100%にして コンテンツのみガジェットで変更させるために

body のcss を .content に変更する 


ここで、モバイルとの切替をカスタムにした状態なら
 <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0' name='viewport'/>

で、
こんな感じになった。ちょっといいかも。


なんせ、ここまでいじると、レイアウトのドラッグアンドドロップはうまくいかないけど…
ま、暫定で、これは使えるかなと…

この bootstrap のメニューは、一番上のnavbar を入れると動きません。

でも IEで崩れるな~。やりなおし…

なんか、respond.js でハックを入れないといけないようですね。 本家そのままパクリます。

横幅 bootstrap 使わずにデフォルト設定の場合は、モバイル端末でキレイに見えるのは最大1020がマックスのようです。

トップのheader に タイトル文字の変わりに画像を入れて、それをトップにだけ100%の幅に表示させて、簡単に飾りにできるようにしてみました。
#Header1_headerimg を最初画像をどうやったら中央にもってくるかばかりを考えて、
なるほど、まず中央に持ってきて画像の半分を減らすのか!と!目からウロコが落ちた!

と思ったが、もしかしたら、画像を100%にしたらいいのじゃないかと…

ま、そのあたりは臨機応変に…
どうもblogger のモバイルのメニューが好きじゃなかったので、今回スッキリしました。
vhとか知らんかったな。

postion fix とか…。なんか、blogger って両端に影用のパディングが設定されているのがめんどくさい…むちゃ悩んだ。

ま、これでこんな仕事の時は使えますね…

探せば、無料でいいテンプレートはいろいろあるのですが、完全理解をしたかったのであった。



この前、田舎の七夕祭りのために買いました。届くまで無事に届くか不安でしたが、無事届き、田舎では親が、電気がつかんと大騒ぎでしたが、ちゃんとやったらつきました。
中国の脅威といいますが、メーカーの人はとても心配してメールもくれましたし、とても安心できました。 ちゃんと中国ともやれると思います。

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索