読者です 読者をやめる 読者になる 読者になる

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;
            }

      }

*1:これが、妙な事になってるんだな...、写真を選び、下の「選択した写真を貼り付け 」すると...フォトライフ記法では無く、html式の かなり長いのが入ります。で、当然、書式が変わります