Bloggerモバイル　カスタマイズメモ　その1

スマさんに依頼されて、Bloggerのカスタマイズをした時のメモです。

僕はCSSもHTMLもjavaもphpも殆ど理解していないので…
これがまともな方法かどうかも分かってませんが(；＾ω＾)

しかも、Bloggerイジリだしたのが3月。
もうちんぷんかんぷん（笑）

とりあえず、モバイルのTOPページのサムネイルが小さいと言う事ですので…
インターネットで検索しまくりまして、かなり良いページを見つけました！

参考サイト：ウェブに残したもの

素敵なサイトも見つかった所で早速カスタム作業開始。
変更するテンプレートはシンプルってやつですが…
モバイルカスタムの元はこんな感じですね。

挿入するコードがこちら。

<!--  サムネイルリサイズ  -->
<!-- begin snippet -->
   <b:if cond='data:blog.url'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
   <!-- begin image-size dcript -->         
   <script type='text/javascript'>
       //<![CDATA[
       function bp_thumbnail_resize(image_url,post_title)
       {
        var image_size="s640";
        var show_default_thumbnail=true;
        var default_thumbnail='';
        if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
        image_tag='<img src="'+image_url.replace('/s72-c/','/'+image_size+'/')+'" class="postthumb" alt="'+post_title+'"/>';
        if(image_url!="") return image_tag; else return "";
       }
       //]]>
      </script>
      <script type='text/javascript'>
       document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
      </script>
   <!-- end image-size dcript -->
            </div>
          </b:if>
            <data:post.snippet/>
 <!-- 続きを読む -->
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
 <!-- /続きを読む -->
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
            <data:post.body/>
      </b:if>
<!-- end snippet -->
<!--  /サムネイルリサイズ  -->

挿入場所とコードはそのままではダメだったので…
少し変更しておりますが、ほぼコピペです。

== data:blog.homepageUrl’
この部分は次のページに進んだ時にコードが反映されないので削除。

サムネイルのサイズは可変にしたかったので、s200からs640に変更。
スマホにはちょっとデカイけど、まぁ良しとしときます（笑）

挿入がまたややこしい！
divとbがいっぱいで訳わかりません(;´Д｀)ﾊｧﾊｧ

mobile-post-outer　を検索。

とりあえずコメントアウトして、後で消す作戦。

    <div class='mobile-post-outer'>
      <a expr:href='data:post.url'>
        <h3 class='mobile-index-title entry-title' itemprop='name'>
          <data:post.title/>
        </h3>
        <div class='mobile-index-arrow'>&amp;rsaquo;</div>
      </a>
<!--  aタグを挿入してリンクをここで止める  -->
        <div class='mobile-index-contents'>
<!--  元のサムネイルコメントアウト
          <b:if cond='data:post.thumbnailUrl'>
            <div class='mobile-index-thumbnail'>
              <div class='Image'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
            </div>
          </b:if>
-->

<!--  サムネイルリサイズ  -->

　　　ここに挿入！

<!--  /サムネイルリサイズ  -->

<!--  元の記事部分コメントアウト
            <div class='post-body'>
            <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
          </div>
-->
        </div>
        <div style='clear: both;'/>
<!--  </a>  元のリンク位置のaタグはコメントアウト  -->
      <div class='mobile-index-comment'>

で、最後にCSSを追加してサムネイルサイズを可変に。
【カスタマイズのCSSを追加】でも直接書いても何でもOKですね(^_^)

リンクの矢印？に被らないように、幅は98%です。
ついでにタイトルの幅が狭かったので、広げました。

/* モバイルTOPサムネイル可変 */
.thumb img {
  width: 98%;
  max-width: 640px;
  height:auto;
}

/* モバイルTOPタイトル幅 */
.mobile-index-title {
  width: 92%;
}

ちょっと重たいけど、ストレス感じる程ではないし…
今のところちゃんと動いてるので、問題はないでしょう(；＾ω＾)

最後の方はスマさんにテキストを送りつけて、自分で調整してもらったので…
ちょっと余白が大きくなったりしてますが（笑）
スマさんのモバイルページがやっと完成しました。

1/ｆゆらぎ（スマホTOP）

素敵な写真がいっぱいです！
デタラメなので、くれぐれもソースは見ないように(^_^;)