日記の...LOVE LETTERテーマの改造。
って、懲りてません（〃▽〃）
まあ、最後には成功したからオッケーと云う事で。
写真へ文字が回り込むのが気に入ってます。
でも...写真を2つ並べた時に、その外の文字が 短く切れる場合があるので、
そこを どうにかしようと考える。
最初に、画面全体を可変にしてみたけど...
スマホで見た時、拡大しなくちゃだしね。
/* 画面サイズ変更 */ #container { /* オリジナル width: 880px; margin: 0 auto; */ width: auto; min-width: 480px; max-width: 840px; }
これで、最小サイズが480px、最大サイズが840px;（オリジナルの大きさ）
そんでもって、画面のサイズを変えると中の用紙も追随して変わる...はずでした。
パソコン側は動かせる。
でも、スマホ側はパソコンの初期サイズのまま固定されてて動かせない...（...＞＿＜）
それに、はみ出た文字は、変わんない。画面ごと小さくすれば（パソコン側のみ、だけど）結果として変わるけどね、
あんまり意味が無いです
で、逆に画面サイズを広げたりして。
max-width: 1024px;
これって、文字が横に長過ぎて なんか気に入らない。
だったら、短く切れてたままの方がいいや。
で、今度は、見出しを書くと回り込みをキャンセルするようにしてみる。
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { clear : both; }
ところで...「見出し」で、ボクは勘違いしてた所がありました。
h1,h2,h3は「大見出し」h4は「中見出し」h5は「小見出し」と云う...
設定上の事は正しく理解してました。
（h6は、マークダウン「記法」では使用するけどマークダウン「モード」では使用せず） けど、それぞれを書く順番を、です。
まず最初に「大見出し」うん、オッケーです。
続いて考えるのは本文、で、見た目の順番としては「中見出し」なんだけど、
本文から直に出す見出しを、まず「小見出し」。
続いて、その中から さらに出せる見出しを「中見出し」とすべきだと気付く。
マークダウン記法の6段階見出しと、モード側の3段階で、
何処までの見出しに、回り込みをキャンセルさせるか考えた時、
大きい順からだと...やってる事が結果的に合ってても考え方がおかしい。と気が付く。
そんな訳で、最小の...「小見出し（#####）」以下は、本文と共に回り込まさせることにします。
で、今度は、写真の下が崩れだす。
これは悩みました。
写真の横幅は、スナップショットを並べるように300pxで2つ並べたい。
しかし写真の下が2pxほどずれて...横サイズを動かせば縦も変わるし...（;＞_＜;）
で、ふと、...写真を可変にすればいいじゃん。と気付く。
cssのソースは以下です。
.entry-content object, .entry-content iframe, .entry-content img { /* オリジナル max-width: 300px; max-height: 300px; */ /* サイズ可変に max-width: 98%; */ max-width: 98%; max-height: none; }
これでオッケー。
写真を入れる時は、まず、フォトライフにアップロード後、
フォトライフ記法（写真をダブルクリックすると自動で入ります）*1
で入れて、w300とか横ピクセル数を指定。
...例えば、[id:t_aki:20130428161121j:plain]に、サイズ指定。
[id:t_aki:20130428161121j:plain:w500] とかね。
回り込み部分に空白行を入れて、文字と罫線をむりやり合わせるよりも、
写真のサイズを動かして合わせる方がスマートです。（＾＿＾）
追記。
最大画面サイズが480px以下の時だけ動くcssを追加。
PIXIVのとか動いてなさそう。文字も違うし...
まだまだおかしいけど、とりあえずスマホでも画面が縦長のまま、横スクロールさせずに表示出来る筈です。
/* スマホ対応 */ @media screen and (max-device-width: 480px) { #container { width: 480px; margin: 0 auto; } /* asin（アマゾン射影）サイズ可変に */ .entry-content .asin img { max-width: 58%; max-height: none; } /* 写真サイズ変更 */ .entry-content object, .entry-content iframe, .entry-content img { max-width: 58%; max-height: none; } }
*1:これが、妙な事になってるんだな...、写真を選び、下の「選択した写真を貼り付け 」すると...フォトライフ記法では無く、html式の かなり長いのが入ります。で、当然、書式が変わります
