FC2ブログのテンプレート工房

スマホ用テンプレート「10plate_sp_white」について、記事内の画像が大きいとはみ出してしまう問題がありました。申しわけありません。

さっそく修正して再申請したつもりなのですが、何度やってもステータスが「申請中」ではなく「公開中」のまま・・・該当テンプレートのHTML,CSSを修正後に「修正」→「登録申請」としたのですが何か間違っているでしょうか。再申請できているのか不安ですが、もし再申請できていて承認されれば近日中に修正版が公開されるはずです。

【2012/01/14 追記】

無事修正が反映されました。今後は記事内画像問題とタイトル間隔等の諸修正が反映されているものがダウンロードできます。

修正は記事内の画像がはみ出さないようにすることと、タイトルの上部にスペースをもたせたことです。
すでにダウンロードされている方はスタイルシートの末尾にこちらを加えてください。

#header h1 {
padding-top:15px; /*タイトル上部のスペース*/
}
.entry_box img {
max-width:100%;
height:auto;
}

タイトル上部のスペースはお好みにあわせて数値を変えてください。
画像がはみ出す問題はある方のご好意で教えていただきました。ありがとうございました。

先日紹介したスマホ用テンプレート「10plate_sp_white」のタイトルを画像にするカスタマイズを紹介します。

まずタイトル画像を用意します。スマホには機種により解像度が異なるため、横幅が320px,480px,640pxの３つの画像を用意する必要があります。

例えば私が用意した画像はこちらです。

http://blog-imgs-44.fc2.com/1/0/p/10plate/sp_title_img.png（横320　縦150）
http://blog-imgs-44.fc2.com/1/0/p/10plate/sp_title_img@1_5x.png（横480　縦225）
http://blog-imgs-44.fc2.com/1/0/p/10plate/sp_title_img@2x.png（横640　縦300）

そしてスタイルシートの末尾に下記を加えてください。

#header_box {
background-image: url(http://blog-imgs-44.fc2.com/1/0/p/10plate/sp_title_img.png);
width:320px;
height:150px;
-webkit-background-size: 320px 150px;
background-size: 320px 150px;
}

@media only screen and
(-webkit-min-device-pixel-ratio: 1.5) {
#header_box {
background-image: url(http://blog-imgs-44.fc2.com/1/0/p/10plate/sp_title_img@1_5x.png);
}
}

@media only screen and
(-webkit-min-device-pixel-ratio: 2) {
#header_box {
background-image: url(http://blog-imgs-44.fc2.com/1/0/p/10plate/sp_title_img@2x.png);
}
}

#header {
visibility: hidden;
}

色が付いてる箇所は自分が用意した画像のサイズ、URLになるように置き換えてください。

タイトルの下にあった紹介文が邪魔であればHTMLを編集して該当箇所を削除してください。

～
</div>

<p class="intro"><%introduction></p>

<!--▼ メニューバー ▼-->
～

これでタイトル部分が画像になります。



正月なら年賀状風に、２月ならバレンタインデー風にと、季節にあわせていくつもタイトル画像を作って着せ替えても面白いかもしれません。

【参考サイト】
スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定｜ユージック様

今更ですが「FC2ブログの第２回共有テンプレートコンテスト」に参加しようと、スマホ用共有テンプレート「10plate_sp_white」をリリースしました。



IEなどHTML5/CSS3に未対応なブラウザでPCからプレビューすると上の図と少し違って見えますが、スマホのブラウザからは問題なく上の図の様に見えるはずです。

全てのFC2スマホ用テンプレートに言えることですが、FC2が挿入してくるスマホ用広告はかなり大きいです。さすがにもう少し改善されるといいな＾＾；

後半参加なので上位に入ることは難しいかもしれませんが、少しでも気に入っていただければダウンロードしてくださると嬉しいです。m(__)m