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

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

スマホ用テンプレート「10plate_sp_white」の修正

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

さっそく修正して再申請したつもりなのですが、何度やってもステータスが「申請中」ではなく「公開中」のまま・・・該当テンプレートのHTML,CSSを修正後に「修正」→「登録申請」としたのですが何か間違っているでしょうか。再申請できているのか不安ですが、もし再申請できていて承認されれば近日中に修正版が公開されるはずです。
【2012/01/14 追記】無事修正が反映されました。今後は記事内画像問題とタイトル間隔等の諸修正が反映されているものがダウンロードできます。


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

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


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

タイトルを画像にする (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の設定|ユージック

トップページのみ3カラム、他を2カラムにする。(lightframe)

トップページのみ3カラム、他を2カラムにするカスタマイズを紹介します。
以前このカスタマイズはstandardシリーズで紹介していましたが、今回はlightframeが対象です。

スマホ用共有テンプレート「10plate_sp_white」をリリースしました。

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



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

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

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

独立したフリーエリアを横に並べる

プラグイン3を横に並べるのは難しいですが、テンプレートのHTMLに直接設置するフリーエリアを横に並べることなら可能です。

メニューバーに「リンク」と「月別アーカイブ」を表示する

Tips skillを運営するtskillさんがメニューバーに「リンク」と「月別アーカイブ」を表示する方法を教えてくれたので紹介します。

コメント記入時のフォントサイズや窓の幅を設定する

コメント記入時のフォントサイズや窓の幅を設定するためには、以下をスタイルシートの末尾に加えてください。

textarea #comment {
font-size: 100%; /* フォントサイズ */
width:80%; /* 窓の幅設定 */
}


各数値はお好みにあわせて設定してください。

リストマークを白丸にする

当サイトが配布する共有テンプレートはリストマークを黒丸で表示します。

  • 黒丸リスト
  • 黒丸リスト
  • 黒丸リスト



このリストマークを白丸にする方法を紹介します。

  • 白丸リスト
  • 白丸リスト
  • 白丸リスト



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

ul {
list-style-type: circle;
}



これでリストマークは白丸で表示されます。

現在公式プラグインの「カテゴリ」には2種類あり、このうちリストマークが表示されるものは(カスタマイズ向け)だけです。もう一方のカテゴリはリスト構造でないため表示されないのでご注意ください。

この白丸リストを左右のカラムのみに適用したい場合は、下記のようにしてください。

lightframeの場合

#left ul,
#right ul {
list-style-type: circle;
}



standardの場合

.left_outline ul,
.right_outline ul {
list-style-type: circle;
}


コメントの名前が空欄のときに「名無しさん」等を表示する

コメントの名前が空欄のときに「名無しさん」等の代替えを表示する方法は、管理画面で設定することができます。

環境設定の変更 → ブログの設定 [コメント設定] → コメント設定 コメンテーターの名前


プラグインの最新記事に新着表示「NEW」マークを表示する。

プラグインの最新記事に新着表示「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">
と変更してください。

【2010/02/13 追記】プラグインの「最新コメント」に新着表示を付けたい場合はこのようになります。

<!--▼最新コメント用newマーク▼-->
<script type="text/javascript">
nwc(<%rcomment_year>,<%rcomment_month>,<%rcomment_day>,<%rcomment_hour>)
</script>
<!--▲最新コメント用newマーク▲-->

ブログ内検索1
プロフィール

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。