ブロガーの良さを残しbootstrapを取り入れるバージョン完成
こんなjquery あったんか！「jQueryのバージョンを上げたら動かなくなった…！」という場合に修正箇所を教えてくれたり、廃止されたAPIを復元して動くようにしてくれたりします。これもつけてとにかくBootstrapをCDNで入れ込む 必ずjquery は前に入れること！
こちらで実験中
初期値で要素の検証でエラー出るのは、Chromeのバグということだが、ツイッターなどの共有ボタンを消すとOK
モバイル要素は全部消す mobile との切替はなし(でも消しても復活するものありｗ)
フッターの組み方はマクロを単純に消すとエラー
上部の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 のモバイルのメニューが好きじゃなかったので、今回スッキリしました。
ｖｈとか知らんかったな。
postion fix とか…。なんか、blogger って両端に影用のパディングが設定されているのがめんどくさい…むちゃ悩んだ。
ま、これでこんな仕事の時は使えますね…
探せば、無料でいいテンプレートはいろいろあるのですが、完全理解をしたかったのであった。
この前、田舎の七夕祭りのために買いました。届くまで無事に届くか不安でしたが、無事届き、田舎では親が、電気がつかんと大騒ぎでしたが、ちゃんとやったらつきました。
中国の脅威といいますが、メーカーの人はとても心配してメールもくれましたし、とても安心できました。 ちゃんと中国ともやれると思います。
0 コメント :
コメントを投稿
コメントありがとうございます。