FC2ブログのテンプレート工房
- スマホ用テンプレート「10plate_sp_white」の修正 [2012/01/10]
- タイトルを画像にする (10plate_sp_white) [2011/12/27]
- トップページのみ３カラム、他を２カラムにする。(lightframe) [2011/12/24]
- スマホ用共有テンプレート「10plate_sp_white」をリリースしました。 [2011/12/17]
- 独立したフリーエリアを横に並べる [2010/01/18]
- メニューバーに「リンク」と「月別アーカイブ」を表示する [2010/01/15]
- コメント記入時のフォントサイズや窓の幅を設定する [2010/01/12]
- リストマークを白丸にする [2010/01/11]
- コメントの名前が空欄のときに「名無しさん」等を表示する [2010/01/03]
- プラグインの最新記事に新着表示「NEW」マークを表示する。 [2010/01/02]
スマホ用テンプレート「10plate_sp_white」の修正
さっそく修正して再申請したつもりなのですが、何度やってもステータスが「申請中」ではなく「公開中」のまま・・・該当テンプレートのHTML,CSSを修正後に「修正」→「登録申請」としたのですが何か間違っているでしょうか。再申請できているのか不安ですが、もし再申請できていて承認されれば近日中に修正版が公開されるはずです。
修正は記事内の画像がはみ出さないようにすることと、タイトルの上部にスペースをもたせたことです。
すでにダウンロードされている方はスタイルシートの末尾にこちらを加えてください。
#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の設定｜ユージック様
スマホ用共有テンプレート「10plate_sp_white」をリリースしました。
IEなどHTML5/CSS3に未対応なブラウザでPCからプレビューすると上の図と少し違って見えますが、スマホのブラウザからは問題なく上の図の様に見えるはずです。
全てのFC2スマホ用テンプレートに言えることですが、FC2が挿入してくるスマホ用広告はかなり大きいです。さすがにもう少し改善されるといいな＾＾；
後半参加なので上位に入ることは難しいかもしれませんが、少しでも気に入っていただければダウンロードしてくださると嬉しいです。m(__)m
リストマークを白丸にする
- 黒丸リスト
- 黒丸リスト
- 黒丸リスト
このリストマークを白丸にする方法を紹介します。
- 白丸リスト
- 白丸リスト
- 白丸リスト
スタイルシートの末尾に以下を加えてください。
ul {
list-style-type: circle;
}
これでリストマークは白丸で表示されます。
現在公式プラグインの「カテゴリ」には２種類あり、このうちリストマークが表示されるものは(カスタマイズ向け)だけです。もう一方のカテゴリはリスト構造でないため表示されないのでご注意ください。
この白丸リストを左右のカラムのみに適用したい場合は、下記のようにしてください。
【 lightframeの場合 】
#left ul,
#right ul {
list-style-type: circle;
}
【 standardの場合 】
.left_outline ul,
.right_outline ul {
list-style-type: circle;
}
プラグインの最新記事に新着表示「NEW」マークを表示する。
プラグイン「最新記事」のHTMLを以下のように編集します。
プラグインの設定 → 最新記事 設定 [詳細] → HTMLの編集
<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
<!--▼newマーク▼-->
<script type="text/javascript">
nwr(<%recent_year>,<%recent_month>,<%recent_day> ,<%recent_hour>)
</script>
<!--▲newマーク▲-->
</li>
<!--/recent-->
</ul>
次にテンプレートのHTMLを編集します。
<head>～</head>の間に以下を挿入してください。
<!--▼新着記事用newマーク▼-->
<script type="text/javascript"><!--
function nwr(u1,u2,u3,u4) {
var today=new Date();
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<font color="#ff0000" size="1">NEW!!</font>')}
}
--></script>
<!--▲新着記事用newマーク▲-->
色や大きさはお好きなように変更してください。
「nt=24;」が時間なので12にすれば12時間だけ新着マークが表示されます。
新着マークを画像にしたいときは
<font color="#ff0000" size="1">NEW!!</font>
を
<img src="画像URL" border="0">
と変更してください。
【共通】
- ブログのサイトマップ
- 背景に画像を使う
- 背景画像をランダムに変える
- タイトル画像をランダムに変える
- 画像をランダムに変える
- 続きを閉じるの使い方
- 一部の文字やリンクの色を変える
- カレンダーの更新日を目立たせる
- プラグインカテゴリ３を常に表示
- 記事文末に広告等を挿入する
- 別枠リンク集の作り方
- 記事タイトル前にアイコン
- プラグインタイトル前にアイコン
- ブログタイトル下に横カレンダー
- 記事を左カラムに表示する
- 記事の日付を消す
- 新着記事に新着表示を付ける
- 便利なトラックバックURL表示
- 記事の行間を変える
【lightframe】
【standard】
- サイトの幅を変える
- 文字の大きさを変える
- 色を変える
- リンクのスタイルを変える
- もう一つのリンク集の作成
- タイトルを画像にする
- ヘッダー背景を画像にする
- タイトルを中央に配置する
- 記事を枠で囲む
- トップのみ３、他２カラム
【スマホ用】
Author:いたお
更新は非常にマイペースです
現在休止中です
いたおの他の運営サイト
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。
※スクロールさせる文字やプラグインのHTMLをここに
- 05/21 のぶ
- 05/09 sakurai
- 05/05 だいきゅ
- 05/02 たにもっさん
- 05/02 sakurai
- 05/02 sakurai
- 05/01 たにもっさん
- 05/01 sakurai
- 04/30 たにもっさん
- 04/30 たぬき
- 04/29 sakurai
- 04/29 ひろ
- 04/29 たにもっさん
- 04/29 たにもっさん
- 04/29 たぬき
- 04/28 sakurai
- 04/28 たにもっさん
- 04/28 たにもっさん
- 04/26 sakurai
- 04/24 たにもっさん
- 04/22 sakurai
- 04/22 AAA
- 04/22 通りすがり
- 04/22 zz
- 04/22 たにもっさん
- 04/22 AAA
- 04/17
- 04/17 Theresa Sullivan
- 04/15
- 04/14 sakurai
- ギルゲエム:コメントを含めた検索を出来るようにしました (03/29)
- 納豆帝国のtemplate改悪履歴:コメントにアイキャッチ（キャラアイコン）をつける (11/23)
- まとめwoネタ速neo:まとめtyaiました【タイトルを画像にする (10plate_sp_white)】 (05/02)
- まとめwoネタ速neo:まとめtyaiました【スマホ用テンプレート「10plate_sp_white」の修正】 (05/02)
- ブログ作成探偵事務局:トップページに最新記事を表示させないようにする（FC2） (04/08)
- まとめwoネタ速suru:まとめteみた.【トップページのみ３カラム、他を２カラムにする。(lightframe)】 (04/02)
- まとめwoネタ速suru:まとめteみた.【一時休止のお知らせ】 (03/30)
- 南加州空即是色:模様替え (03/01)
- 神々の領域（ｷﾘｯ:メニューバー (02/25)
- 実践レポート★アフィリエイトの足跡★:ブログのカスタマイズ (11/25)