Template Q&Atemplates for FC2 BLOG
PC用テンプレQ1.
テンプレを使うには？Q2.
対応ブラウザは？Q3.
カスタマイズは？Q4.
FC2のアクセス解析を使うとエラーが出るQ5.
連続する半角英文字投稿への対処Q6.
続きを読むを折りたたみ式にするにはQ7.
スクロールバーに色を付けるには(IE only)Q8.
記事内の絵文字がズレるQ9.
絵文字アイコン周りの余白 Q10.
画像に枠をつけるにはQ11.
画像周りの余白を無くしたいQ12.
画像を横に並べて表示したいQ13.
新着マークをつけたい携帯用テンプレ
QM1.
画像の種類について newQM2.
コメントタイトルを付加したい newQM3.
記事中の画像表示 new--------------------------------
Q1. テンプレを使うには私が作成（デザイン）・配布しているテンプレは、FC2のブログ用テンプレでございます。（もちろん無料です）使用するには、FC2 BLOGの登録が必要です。
コチラで新規登録してから、管理画面のテンプレートの設定でダウンロード等すると使用出来ます。
--------------------------------
Q2. 対応ブラウザは配布しておりますテンプレは、ほぼ全てのブラウザをカバーするくらいの作りで作成しておりますので、私が何かやらかしていなければ殆どのブラウザに対応しております。（IE, Netscape, Opera, Firefox, Safari,Sleipnirなど）ブラウザのバージョンについても、主ブラウザについてはかなり古いブラウザ迄対応。
--------------------------------
Q3. カスタマイズは1) 著作権表示の削除をしない
2) 再配布をしない
を守っていただければ、お好きなようにカスタマイズして頂いて結構であります。自分でカスタマイズ出来る方のみ、自由に変更してください(`・ω・´)
--------------------------------
Q4. FC2のアクセス解析を使うとエラーが出るあれれれ？前は私の使用するオンマウスJAVASCRIPTでエラーが出たのに、今は出ない。仕様変わったのでしょうか？？
--------------------------------
Q5. 連続する半角英文字投稿への対処例えば、物凄い長いURL(http://w....)のように半角英文字が連続して記述されるような場合、ブラウザによってはテンプレ枠を無視して、改行されずに横にのびるため、デザインが崩れるといった現象が起こります。Fire Foxなどが横長になってしまいます。自分の記事でそういった現象があれば、自分で注意出来るのですが、コメント等にそういう投稿があったりすると、削除したりと手間がかかります。そんな半角英文字投稿への心配をしたくない！という方は、下記の対策をしてみてください。
■対策案1スタイルシートに
.come_text a{
width: 200px;
height: 19px
}
などを追加する。但しこれは、現在コメントにａタグがコメントリンクのみという事で使用出来ます。今後コメントにａタグが色々使用出来る仕様になった場合は使用出来なくなる可能性があります。
■対策案2テンプレのhtmlの部分に、
textareaのタグが
２箇所あります。そこに
wrap="hard"を追加してください。こんな感じです。
＜textarea
wrap="hard" id="comment....
これを追加することで、強制改行されますので、長い連続する半角英文字の投稿の心配がいらなくなります。
[デメリット]・safari等のようなtextarea等にスタイルシートが効かないブラウザに、強制改行タグを使用すると、他ブラウザよりは改行の位置が長くなるため、長いURL等の連続する半角英文字に対して意図した長さで改行されないため、有効にならない可能性がある。(対策：textareaの長さ（cols=""）を短くする)
・強制改行のため、文章中の文字修飾機能等が上手く使えない場合がある（文字修飾の設定タグまで強制改行される為、文字修飾のタグまで表示されてしまう等、いやあ、これを修正するのは非常に面倒）
・文章が途中で折り返されるため、wrap="hard"を使用しない時より見た目が悪くなる
[参考]
http://mi104c.blog51.fc2.com/blog-entry-173この記事のコメントのやりとりをご覧下さい
--------------------------------
Q6. 続きを読むを折りたたみ式にするにはコチラの記事をご参照ください
--------------------------------
Q7. スクロールバーに色を付けるには(IE only)管理者画面から、まずテンプレの設定でテンプレの「編集」を開いてください。そうすると、上に『HTMLの編集』、下に『スタイルシートの編集』というのがあるので、下のスタイルシートの編集のところで、下記の
html{}の追加と
BODY{}の中へscrollbarタグの追加をお願いします
（色をつけたところを追加）
html{
scrollbar-face-color:f5f5dc;
scrollbar-highlight-color:f5f5dc;
scrollbar-track-color:f5f5dc;
scrollbar-shadow-color:f5f5dc;
scrollbar-3dlight-color:#a7a47e;
scrollbar-arrow-color:#a7a47e;
scrollbar-darkshadow-color:#a7a47e;
}BODY{
scrollbar-face-color:f5f5dc;
scrollbar-highlight-color:f5f5dc;
scrollbar-track-color:f5f5dc;
scrollbar-shadow-color:f5f5dc;
scrollbar-3dlight-color:#a7a47e;
scrollbar-arrow-color:#a7a47e;
scrollbar-darkshadow-color:#a7a47e;以下、元から書いてあるものは消さないでください
}
以下元から書いてあるもの
注）スクロールバーの色の設定は自分で変更したい色に変更ください。あくまでもここに記載しているのは例です。
--------------------------------
Q8. 記事内の絵文字がズレるメイン記事のテキストに、画像へのテキスト回り込み（float: left;等）を設定していると、絵文字が改行されて行の先頭にきてしまうという現象が起こってしまいます。絵文字がズレないように表示させたい方は、スタイルシートのimg.emojiのカッコ内を下記のように変更してみてください。
img.emoji{
float:none;
vertical-align:middle;
border:0px;
margin: 0px 1px 0px 1px;
}
--------------------------------
Q9. 絵文字アイコン周りの余白docomoやau等の絵文字アイコン周りの隙間をなくしたい・増やしたい場合は、
テンプレートの編集画面の『スタイルシートの編集』にある
img.emoji{
ほにゃらら}
という
ほにゃららの所に
余白を無くしたいのであれば margin: 0px;
絵文字に余白を設定したい場合は margin: 2px 2px 2px 2px;
（任意の数値で）を設定してください。
--------------------------------
Q10. 画像に枠をつけるには記事中の画像に枠をつけるには、各テンプレの詳細（左メニューの
サムネイル一覧から確認出来ます）に記載してある各テンプレのカスタマイズをお読みください。
そこに記載してある、記事中の画像のスタイルシート設定の場所で（例えば.main_text img{}など。テンプレによって多少異なります）
border: 0px ;
の所のゼロの数値（枠の太さ）を1や2などに設定すると、枠が付けられます。
例) border: 1px solid #555555 ;
--------------------------------
Q11. 画像周辺の余白を無くしたいメイン記事中の画像の余白を無くす場合は、各テンプレの詳細（左メニューの
サムネイル一覧から確認出来ます）に記載してあるカスタマイズ詳細をお読みください。
そこに記載してあるメインテキストの画像関連のスタイルシートの設定の場所で（例えば.main_text img{}など。テンプレによって多少異なります）
margin: 4px 4px 4px 4px;
というような記述がありますので、そのマージンの数値をゼロにすることで画像周りの余白が無くなります。逆に余白をもっと増やしたい方は、数値を増やしてください。
--------------------------------
Q12. 画像を横に並べて表示したいこれはテンプレの設定ではなく、記事の書き方になります。記事を書くときに画像を入れるアイコンで画像を挿入した場合、＜br clear="all">というタグもFC2さんの設定では入るようになっています。この、＜br clear="all">というのは、画像にテキストを回り込み設定させている場合など、それを解除して改行させる役目があります。そのためいくら画像を横に並べてもそのタグが間に入っている限り改行されてしまいます。
横に画像を並べたい場合は、＜br clear="all">を削除して画像タグを並べてください。
--------------------------------
Q13. 新着マークをつけたい新着マークの付加については、
FCafeさんの所にスクリプト等が詳しく掲載されておりますので、そちらをご覧ください。
新着マークhttp://pcafe.blog3.fc2.com/blog-entry-120.htmlでは、
最近投稿されたエントリーの一覧（Recent entries）の所に
新着マーク(new)を付加したいという場合、新着印のスクリプトを何処に挿入するかということを説明してみたいと思います。まず、テンプレは見た目をデザインするhtmlのタグ（スタイルシート等も）と、
変数で構成されています。変数というのは、例えば
<%blog_name>という変数をテンプレの表示させたい所に付加すれば、自分の
ブログタイトルが表示されるようになっているワケです。（FC2ブログの
変数一覧については、私のブログの右メニューにリンクがあります）
私の作成したテンプレの
最近投稿されたエントリーの一覧の
変数を見てみましょう。テンプレ毎にhtmlタグは多少異なりますが、下記のようになっていると思います。（クリックで拡大されます）
ごちゃごちゃしているタグを見ると、ウハわからないよと思いがちですが、部分的に見ると理解出来てきます。画像の通り、緑色の部分が変数になります。＜!--recent--＞という変数で囲んだ中に、その中で使える単変数をいれると、その単変数がブログ上で表示されて、私達が普段目にする、更新した日付だったりタイトルになるワケです。図に書いてあるように、結論から言えば＜/a＞と＜/div＞の間に新着マークのスクリプトを挿入します。何故そこに挿入するのかということは、下記の図で見てみてください。
最初の図では、変数全てに緑色を付けたのでわかりにくかったと思いますが、この図はブログで表示される変数にだけ色をつけてみました。何が何処の部分になるのか、これで何となく理解して頂けると思います。なので
記事タイトルの後ろにNEWマークを付加したいのであれば、リンクタグ＜a＞で囲まれた
後ろに、新着マークのスクリプトを入れることがわかると思います。
参考までに
年変数、月変数、日変数、時変数は何かというと、
最近投稿されたエントリーの一覧の例で言えば、
最近投稿されたエントリーの一覧の変数、
＜!--recent--＞
＜!--/recent--＞
で囲まれた中で使用できる変数の年・月・日・時を、
変数一覧から調べて記述すればいいワケです。
--------------------------------
QM1. 画像の種類について私の作成したモバイル用テンプレでは、画像はGIFとPNGを使用しております。何故分けているかというと、DOCOMOで全機種に使用できるのがGIF形式（2003年以前ではJPEGは未対応）、AUで全機種使用出来るのがPNG形式（JPEGは2001年以前は未対応）、ソフトバンクでは全機種対応がJPEG・PNG形式となっている為、個々のキャリアが全機種対応している画像形式にしております。
--------------------------------
QM2. コメントタイトルを付加したい ※ 記事参照--------------------------------
QM3. 記事中の画像表示※ 記事参照
All entries of this category were displayed below.
NEWアクセサリーテンプレ３カラム
アクセサリーテンプレの３カラムバージョンを追加致しました。数日後にダウンロード出来ると思います。この３カラムバージョンは、デザインを全く変えるかどうか結構悩んだワケでございますが、結局２カラムの右に追加しただけというテンプレになてしまいました(`・ω・´)
