-->

blogger template 擬似フレーム

blogger chrome css

擬似フレームもどきなのでchrome以外で正しく表示されるか知りませんが。
擬似フレームは、よくあるmargin取った隙間にメニューを差し込んだ簡単なもの。
b:sectionやb:widgetの使い回しがいつの間にやら改善されていた（？）ので、
テンテコマイになってたCSS回りを整理。

-- 2012-03-07
擬似フレーム動作結果
chrome:True
ie8:True
android(標準ブラウザ):False

以下調整メモ

LangelogChangeLogもどきのテキストベース。

dlリストを中心に整える。
dtにタイムスタンプとラベルを。
ddに記事タイトルと内容を。
h2にタイトルを。margin-bottomでこれらを調整する。

/* dt/dd/h2 */
#content dt{position:relative;top:26px;z-index:12}
#content dd{position:relative;top:-27px;font-size:15px;z-index:11}
#content h2{margin-bottom:30px}

視覚的で直感的なものを目指している。
label,more,link,markなど、
失敗した教科書マーキングのようで、なかなか良いアイデアが浮かばない。

-- 2012-03-04
blogger設定画面より
直接 HTML を編集すると、一部の機能の動作に影響することがあるので、上級ユーザーにのみおすすめします。テンプレートの HTML を編集すると、その他の Blogger の機能に予期しない影響が生じることがあります。まずテンプレート デザイナーを使用することをおすすめします（[アドバンス] セクションで CSS を追加できます）。
案の定、レイアウト設定が崩れて再起不能になった。仕方なく、シンプルなテーマを適用し、バックアップしておいたのを投下。しかし、弾かれる。ヘッダとフッタのwidgetを移動可能にして、サイドバーに投げ込んだら、また新たにヘッダもフッタも再生成された。Header1,Header2という具合に。ヘッダとフッタのwidgetが上下に必須になったのか？

ヘッダとフッタのwidgetを設定した上で、再び読み込ませると通った。

[結論]Chrome+Blogger限定の擬似フレーム
sectionなどのレイヤにposition:fixedなどを設定していると、レイアウト設定が崩れてしまう。

-- 2012-03-05
レイアウト設定などが崩れてしまうが、擬似フレームの調整一応完了。

-- 2012-03-06
フォントや他のmarginを整えて単純に。

/* dt/dd/h2 */
#content dt{position:relative;top:40px;}
#content dd{margin-bottom:10px;}
#content h2{margin-bottom:30px;}

-- 2012-03-07
BloggerをCSSの読める携帯用mobile+customで設定してみた。
Xperia-acro(android)の標準ブラウザで見てみると、
サイドメニューだけ固定された状態になってしまった。
標準ブラウザには自動でコンテンツのサイズを調整してくれる設定がある。
携帯用もpc+customモードに戻し、見てみるが案の定。。
data:blog.mobileClassが" mobile"となる。
mobile用を上書きさせるcssではキレイじゃないし悩む。

-- 2012-03-08
data:blog.mobileClassをやめ、data:blog.isMobileを使用。
body expr:class='"mobile-"+data:blog.isMobile'
exsample: mobile-false
でPC用とモバイル用に崩れる部分を分けて書く。
再リセットなどできるだけ起こさないように。

top