LOVE LETTERテーマの改造＆スマホ対応。

日記の...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;
            }

      }