以下の内容はhttp://10plate.blog44.fc2.com/blog-entry-368.htmlより取得しました。


タイトルを画像にする (10plate_sp_white)

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

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

例えば私が用意した画像はこちらです。
FC2ブログのテンプレート工房
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>

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


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

FC2ブログのテンプレート工房 タイトル画像カスタマイズ

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

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



以上の内容はhttp://10plate.blog44.fc2.com/blog-entry-368.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14