スマさんに依頼されて、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("<data:post.thumbnailUrl/>","<data:post.title/>")); </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 + "#more"' 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'>&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/fゆらぎ(スマホTOP)
素敵な写真がいっぱいです!
デタラメなので、くれぐれもソースは見ないように(^_^;)


