TEMTEM★倶楽部
FC2・テンプレート制作用ブログ♪
Ｑ＆Ａ：mobile版：記事と画像を一度に表示させる方法
［No.23］ 2007/08/18 (Sat) 21：09
Ｑ18．mobile版テンプレートで、タイトルをクリックで、記事と画像を一度に表示させられませんか？
Ａ．mobile版では、記事タイトルを押すと、記事詳細ページでは、記事のみ表示され、画像は[画像]と表示され、更にその[画像]を押すと、次ページでは、画像のみが表示されます。
でも、カメラマークを押すと、記事と画像が一緒に出ますよね。
今回のカスタマイズは、カメラマークを押さなくても、記事タイトルクリックだけで、記事と画像を同時に出す方法です。
「HTMLの編集」内の以下の２箇所を新タグに変更してください。
（これは、「ayu-mobile-03」でのタグですが、他のテンプレートも変わりないと思います）
変更して、正確に機能しなかったり、他に影響があるようでしたら、教えてください。
Ａ．mobile版では、記事タイトルを押すと、記事詳細ページでは、記事のみ表示され、画像は[画像]と表示され、更にその[画像]を押すと、次ページでは、画像のみが表示されます。
でも、カメラマークを押すと、記事と画像が一緒に出ますよね。
今回のカスタマイズは、カメラマークを押さなくても、記事タイトルクリックだけで、記事と画像を同時に出す方法です。
「HTMLの編集」内の以下の２箇所を新タグに変更してください。
（これは、「ayu-mobile-03」でのタグですが、他のテンプレートも変わりないと思います）
<!--ｴﾝﾄﾘｰ表示開始-->
<!--topentry--><br>
<img src="http://blog85.fc2.com/z/zuttoissyodayo2/file/03-04.gif"><a href="<%topentry_link><%tail_url>"><%topentry_title></a>
<a href="<%topentry_link>&photo=true<%tail_url>"><img src="http://blog85.fc2.com/z/zuttoissyodayo2/file/kamera.gif" border="0"></a><br>
↓↓↓↓
＜新＞
<!--ｴﾝﾄﾘｰ表示開始-->
<!--topentry--><br>
<img src="http://blog85.fc2.com/z/zuttoissyodayo2/file/03-04.gif"><a href="<%topentry_link>&photo=true<%tail_url>"><%topentry_title></a><br>
+ + + + + + + +
<!--個別ｴﾝﾄﾘｰ表示開始-->
<!--mobile_other_area--><br>
<!--/mobile_other_area-->
<!--mobile_phs_area--><img src="http://blog85.fc2.com/z/zuttoissyodayo2/file/03-04.gif">
<!--/mobile_phs_area-->
<img src="http://blog85.fc2.com/z/zuttoissyodayo2/file/03-04.gif"><a href="<%topentry_link><%tail_url>"><%topentry_title></a>
<a href="<%topentry_link>&photo=true<%tail_url>"><img src="http://blog85.fc2.com/z/zuttoissyodayo2/file/kamera.gif" border="0">
</a><br>
↓↓↓↓
＜新＞
<!--個別ｴﾝﾄﾘｰ表示開始-->
<!--mobile_other_area--><br>
<!--/mobile_other_area-->
<!--mobile_phs_area--><img src="http://blog85.fc2.com/z/zuttoissyodayo2/file/03-04.gif">
<!--/mobile_phs_area-->
<img src="http://blog85.fc2.com/z/zuttoissyodayo2/file/03-04.gif"><a href="<%topentry_link>&photo=true <%tail_url>"><%topentry_title>
</a><br>
変更して、正確に機能しなかったり、他に影響があるようでしたら、教えてください。
Ｑ＆Ａ：「続きを読む」の誤文字表示
［No.22］ 2007/08/17 (Fri) 21：08
Ｑ17．「続きを読む」の文字表示が『 」の続きを読む">続きを読む » 』と表示されます。どうしてですか？
Ａ．記事タイトルに、絵文字が使われているのが原因だと思われます。
「続きを読む」の上にマウスを持っていくと、【「記事タイトル名」の続きを読む】と出ます。
タグで自動にタイトル名を読み込んでいるのだけど、そのタイトルに絵文字が使われていると、絵文字のimgタグも読み込むので、タグがおかしくなるのだと思います（専門家じゃないので断定はできません）。
解決方法は、
�ゝ�事タイトルに絵文字を挿入しない。
�◆崑海�を読む」機能を使わない。
��「続きを読む」のマウス説明をなくす。
の３通りです。
��の場合は、「HTMLの編集」内、
<!--more_link-->
<p class="entry-more"><a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">続きを読む »</a></p>
<!--/more_link-->
の線部分を消してください。
タイトルに絵文字を使われる場合、この「続きを読む」タグだけではなく、その他にもタイトル名を自動で読み込むタグはありますので、それらに影響する可能性はない、とは言えないと思います。
Ａ．記事タイトルに、絵文字が使われているのが原因だと思われます。
「続きを読む」の上にマウスを持っていくと、【「記事タイトル名」の続きを読む】と出ます。
タグで自動にタイトル名を読み込んでいるのだけど、そのタイトルに絵文字が使われていると、絵文字のimgタグも読み込むので、タグがおかしくなるのだと思います（専門家じゃないので断定はできません）。
解決方法は、
�ゝ�事タイトルに絵文字を挿入しない。
�◆崑海�を読む」機能を使わない。
��「続きを読む」のマウス説明をなくす。
の３通りです。
��の場合は、「HTMLの編集」内、
<!--more_link-->
<p class="entry-more"><a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">続きを読む »</a></p>
<!--/more_link-->
の線部分を消してください。
タイトルに絵文字を使われる場合、この「続きを読む」タグだけではなく、その他にもタイトル名を自動で読み込むタグはありますので、それらに影響する可能性はない、とは言えないと思います。
Ｑ＆Ａ：NEWアイコンの設置
［No.21］ 2007/08/16 (Thu) 21：07
Ｑ16．記事タイトルに、NEWアイコンをつけたいのですが？
Ａ．鮎作成のテンプレには、NEWアイコンの付いてないテンプレもあります（最初の方に作ったテンプレ）。
設置は簡単ですので、お試し下さい。
但し、IEしか反映されません。
〔1〕NEWアイコンをアップロードします。
どこかの素材屋さんで借りてきた場合は、貴方のブログでファイルアップします。
鮎作成のアイコンを使う場合は、不要です（カテゴリー：素材参照）。
〔2〕「HTMLの編集」内の〔head〜/head〕の中に、
下線部分は、NEWアイコンのURLを入れてください。
アイコンURLを知るには、UPした画像の上で右クリック→プロパティ→アドレス：(URL)をコピーします。
〔３〕同じく「HTMLの編集」内の
上の場合は、記事タイトルの後に表示されます。
記事タイトル前に表示したい場合は、
<%topentry_title>
の前に貼り付けてください。
Ａ．鮎作成のテンプレには、NEWアイコンの付いてないテンプレもあります（最初の方に作ったテンプレ）。
設置は簡単ですので、お試し下さい。
但し、IEしか反映されません。
〔1〕NEWアイコンをアップロードします。
どこかの素材屋さんで借りてきた場合は、貴方のブログでファイルアップします。
鮎作成のアイコンを使う場合は、不要です（カテゴリー：素材参照）。
〔2〕「HTMLの編集」内の〔head〜/head〕の中に、
<!--記事タイトルのNEWアイコン-->赤太文字を入れてください。
<script type="text/javascript"><!--
var today=new Date();
function nw(u1,u2,u3,u4) {
var nt=24; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<img src="http://blog85.fc2.com/
z/zuttoissyodayo2/file/newicon11.gif">')}
}
--></script>
</head>
下線部分は、NEWアイコンのURLを入れてください。
アイコンURLを知るには、UPした画像の上で右クリック→プロパティ→アドレス：(URL)をコピーします。
〔３〕同じく「HTMLの編集」内の
<!--topentry-->の青太文字を追加してください。
<div class="section" id="a<%topentry_no>">
<div class="entry-header"><h2><%topentry_title>
<script type="text/javascript">
nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>)
</script>
</h2></div>
上の場合は、記事タイトルの後に表示されます。
記事タイトル前に表示したい場合は、
<%topentry_title>
の前に貼り付けてください。
Ｑ＆Ａ：「続きを読む」のリンク先と改行
［No.20］ 2007/08/15 (Wed) 21：06
Ｑ15.『続きを読む』（文字が違うテンプレもあり）を押すと、続きの記事ではなく、記事のTOPが表示されるのと、本文と続き文が改行されずに、くっついて表示されるのを直したい。
Ａ．以下の場所に追加タグ（赤文字）を入れてください。
（このまま、全部をコピペでもＯＫ〜）
「HTMLの編集」内、
Ａ．以下の場所に追加タグ（赤文字）を入れてください。
（このまま、全部をコピペでもＯＫ〜）
「HTMLの編集」内、
<div class="entry-body"><%topentry_body>
<!--more_link-->
<p class="entry-more"><a href="<%topentry_link>#more"
title="「<%topentry_title>」の続きを読む">続きを読む »</a></p>
<!--/more_link-->
<!--more--><br><a name="more" id="more"></a><br>
<%topentry_more>
<!--/more-->
</div>
<!-- 記事フッター部分 -->
<ul class="entry-footer">
Ｑ＆Ａ：ブラウザ「Opera」の改行
［No.19］ 2007/08/14 (Tue) 21：05
Ｑ14．ブラウザ「Opera」で改行できるようにする方法は？
Ａ．答えの前に…言い訳です
ブラウザ「Opera」ですが。
杏のテンプレートでは、改行がされません。
改行反映されるように調べたのですが、それをしちゃうと、なんか、全体文字が細くなっちゃうんです…(T.T)
（↑杏のパソコンだけかも知れませんが…）
なんかそれが杏的には、許せなくて……f(^ー^;
なので、ブラウザ「Opera」の改行問題は、放棄しました。
これから作るテンプレートにも、対処は致しません。
ごめんなさいm(__)m
でも、皆様のブログではOperaの方がお見えかも知れませんので、改善方法だけ書いておきますね。
「スタイルシートの編集」の上の方にある、
Ａ．答えの前に…言い訳です
ブラウザ「Opera」ですが。
杏のテンプレートでは、改行がされません。
改行反映されるように調べたのですが、それをしちゃうと、なんか、全体文字が細くなっちゃうんです…(T.T)
（↑杏のパソコンだけかも知れませんが…）
なんかそれが杏的には、許せなくて……f(^ー^;
なので、ブラウザ「Opera」の改行問題は、放棄しました。
これから作るテンプレートにも、対処は致しません。
ごめんなさいm(__)m
でも、皆様のブログではOperaの方がお見えかも知れませんので、改善方法だけ書いておきますね。
「スタイルシートの編集」の上の方にある、
を消すと、改行が反映されるそうです。*:before,
*:after {
content : "";
}
Ｑ＆Ａ：サイドメニュー位置（左右）の変更
［No.18］ 2007/08/13 (Mon) 21：02
Ｑ13．右メニューを左側にする方法を教えてください。
Ａ．メニューの位置って、人それぞれでお好みがあるみたいですね。
杏は、基本は、テンプレが気に入れば、どちらでも良いのですが、ポリシーがある方もお見えみたいですので、変更方法を書いておきますね。
下記の場所を変更してください。
各記事にて、『変更不可』と書かれているテンプレートは、変更できませんので、ご注意ください。
「スタイルシートの編集」内、
paddingの書き方がそれぞれのテンプレで違ってるので、ご注意ください。
（padding:10px←上部 15px←右部 20px←下部 30px←左部;）
Ａ．メニューの位置って、人それぞれでお好みがあるみたいですね。
杏は、基本は、テンプレが気に入れば、どちらでも良いのですが、ポリシーがある方もお見えみたいですので、変更方法を書いておきますね。
下記の場所を変更してください。
各記事にて、『変更不可』と書かれているテンプレートは、変更できませんので、ご注意ください。
「スタイルシートの編集」内、
div#primary-column {
float : left; →right
width : 500px;
padding : 0px 20px 15px 30px; ←赤数字を反対に（左右の空白）
voice-family : ""}"";
voice-family : inherit;
width : 500px;
}
div#secondary-column {
float : right; →left
width : 260px;
padding : 0px 20px 15px 10px; ←赤数字を反対に（左右の空白）
}
paddingの書き方がそれぞれのテンプレで違ってるので、ご注意ください。
（padding:10px←上部 15px←右部 20px←下部 30px←左部;）
Ｑ＆Ａ：ブログ名＆説明文の位置＆幅の変更
［No.17］ 2007/08/12 (Sun) 20：57
Ｑ12．ブログ名＆説明文の位置＆幅の変更方法は？
Ａ．「スタイルシートの編集」内の下記の場所をそれぞれ変更してください。
★ブログ名のカスタマ★
★ブログ説明文のカスタマ★
〔注意〕
テンプレートに寄って、書き方が違いますが、良く見れば判ると思います。
Ａ．「スタイルシートの編集」内の下記の場所をそれぞれ変更してください。
★ブログ名のカスタマ★
/* タイトル */
div#branding h1 {
font-family : "HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
font-weight : normal;
voice-family : ""}"";
voice-family : inherit;
font-size : x-large;
padding-top : 120px; ←上部空白
padding-left : 35px; ←左側空白
padding-right : 400px; ←右側空白
font-size : xx-large;
text-align : left;
}
★ブログ説明文のカスタマ★
/* サイトの説明 */
div#branding p {
font-family : "HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
font-weight : normal;
color : #c2d0de;
padding-left : 40px; ←左側空白
padding-right : 400px; ←右側空白
padding-top : 5px; ← ブログ名との間
padding-bottom : 5px;
font-size : x-small;
voice-family : ""}"";
voice-family : inherit;
font-size : small;
text-align : left;
}
〔注意〕
テンプレートに寄って、書き方が違いますが、良く見れば判ると思います。
Ｑ＆Ａ：罫線ありテンプレの画像貼付
［No.25］ 2007/08/11 (Sat) 21：12
Ｑ11．罫線のあるテンプレートでの、画像貼り付けによる文字の罫線ズレの解決方法は？
Ａ．以下の２通りをお試しください。
<1> 画像の縦幅を罫線の倍数数値で作成する。
* 罫線幅は『20px』です。
<2> 画像に回り込みタグ『align="☆☆"』を入れる。
* ☆☆には、記事上の画像の位置：「left（左）」or 「right（右）」。
* 但し、回り込みですので、画像の横に文字が入ります↓↓。
方法は、「記事を書く」画面で、通常の方法で記事内に画像タグを取り込み、上記タグを入れ（赤文字）、緑文字打ち消し部分は削除してください。
画像の横に文字が入るのがイヤなら、書き込み時に、画像の縦幅分（行幅が20pxなので、画像が200pxなら、200÷20＝10で、１０行くらい）ほど改行すると画像横から文字が外れるはずです（大体の目安です）。
パソコン機能の『単語登録』などに「align="left"」を入れて、簡単な「読み」（私は、「あ」を押すだけ）で出るように登録しておけば、いちいち全部のタグを入れなくても良いから簡単ですヨ。
Ａ．以下の２通りをお試しください。
<1> 画像の縦幅を罫線の倍数数値で作成する。
* 罫線幅は『20px』です。
<2> 画像に回り込みタグ『align="☆☆"』を入れる。
* ☆☆には、記事上の画像の位置：「left（左）」or 「right（右）」。
* 但し、回り込みですので、画像の横に文字が入ります↓↓。
方法は、「記事を書く」画面で、通常の方法で記事内に画像タグを取り込み、上記タグを入れ（赤文字）、緑文字打ち消し部分は削除してください。
<a href="http://貴方のブログ画像URL.jpg" target="_blank"><img src="http://貴方のブログ画像URL.jpg" alt="画像説明文" border="0" align="left"></a><br clear="all">
画像の横に文字が入るのがイヤなら、書き込み時に、画像の縦幅分（行幅が20pxなので、画像が200pxなら、200÷20＝10で、１０行くらい）ほど改行すると画像横から文字が外れるはずです（大体の目安です）。
パソコン機能の『単語登録』などに「align="left"」を入れて、簡単な「読み」（私は、「あ」を押すだけ）で出るように登録しておけば、いちいち全部のタグを入れなくても良いから簡単ですヨ。
Ｑ＆Ａ：罫線ありテンプレの絵文字使用（改訂）
［No.24］ 2007/08/10 (Fri) 21：10
Ｑ10．罫線のあるテンプレートでの、絵文字使用の罫線ズレの解決方法は？
Ａ．下記のようにカスタマイズしてください。
「スタイルシートの編集」内、
まずは、絵文字タグを上記のように変更してください。
罫線幅は「20px」で、（Docomoで考えると）絵文字の縦幅は12pxなので、『絵文字の幅＋� 椨◆畄喟�幅』の式に当てはめると、「12+4+4＝20」で、� �4・�◆�4となります。
もちろん、� �3・�◆�5でも、� �1・�◆�7でも、� �5・�◆�3でも、ＯＫです。
各社の絵文字の大きさは以下の通りです。
貴方が主に使用する絵文字の会社のmargin数値を入れてください。
☆Docomo―→[12×12px]→margin : 4px 0px 4px 0px;
☆ｿﾌﾄﾊﾞﾝｸ-→[15×15px]→margin : 2px 0px 3px 0px;
☆au―――→[14×15px]→margin : 2px 0px 3px 0px;
（数値は任意です。長文でのテストはしていませんので、ズレがある出てくる可能性もあります。貴方のブログにあった位置になるように変えてください）
但し、絵文字は、各社仕様の違いで大きさが統一しません。
兼用すると、ズレます（ｿﾌﾄﾊﾞﾝｸとauは同じですが、Docomoは特に）。
下記の場合は、修正が効きません。
『記事内画像を写真風にするタグを入れている』場合です。
理由は判りませんが、同じ画像と識別しているのか、写真風タグの画像背景白部分を絵文字も読み込んでいるようです。
それ以外の解決法は杏の知識では判りませんので、、
<1>罫線タグを削除する。
<2>ずれるのは我慢する。
で、お使いくださるか、他のテンプレートに変更してください。
Ａ．下記のようにカスタマイズしてください。
「スタイルシートの編集」内、
.emoji{
border : 0px;
margin : ��px 0px ��px 0px;
vertical-align:middle;
}
まずは、絵文字タグを上記のように変更してください。
罫線幅は「20px」で、（Docomoで考えると）絵文字の縦幅は12pxなので、『絵文字の幅＋� 椨◆畄喟�幅』の式に当てはめると、「12+4+4＝20」で、� �4・�◆�4となります。
もちろん、� �3・�◆�5でも、� �1・�◆�7でも、� �5・�◆�3でも、ＯＫです。
各社の絵文字の大きさは以下の通りです。
貴方が主に使用する絵文字の会社のmargin数値を入れてください。
☆Docomo―→[12×12px]→margin : 4px 0px 4px 0px;
☆ｿﾌﾄﾊﾞﾝｸ-→[15×15px]→margin : 2px 0px 3px 0px;
☆au―――→[14×15px]→margin : 2px 0px 3px 0px;
（数値は任意です。長文でのテストはしていませんので、ズレがある出てくる可能性もあります。貴方のブログにあった位置になるように変えてください）
但し、絵文字は、各社仕様の違いで大きさが統一しません。
兼用すると、ズレます（ｿﾌﾄﾊﾞﾝｸとauは同じですが、Docomoは特に）。
下記の場合は、修正が効きません。
『記事内画像を写真風にするタグを入れている』場合です。
理由は判りませんが、同じ画像と識別しているのか、写真風タグの画像背景白部分を絵文字も読み込んでいるようです。
それ以外の解決法は杏の知識では判りませんので、、
<1>罫線タグを削除する。
<2>ずれるのは我慢する。
で、お使いくださるか、他のテンプレートに変更してください。
Ｑ＆Ａ：コメントの時間表示
［No.16］ 2007/08/09 (Thu) 20：56
Ｑ9．コメントにも投稿時間が出るようにしたいのですが？
Ａ．下記の方法で、ソースを追加してください。
【方法】
「HTMLの編集」内、
コメントフッターにあるそれぞれのパート（月日・名前・編集ボタンなど）は、ひとつひとつ「<li>〜</li>」で囲まれています。
場所は、自分のお好きな位置へどうぞ(上のは、月日の次に入ります)。
Ａ．下記の方法で、ソースを追加してください。
【方法】
「HTMLの編集」内、
<h4 class="comment-header">TITLE：<%comment_title></h4>の赤文字ソースを追加してください。
<div class="comment-body">
<%comment_body>
</div>
<ul class="comment-footer">
<li>| <%comment_year>-<%comment_month>-<%comment_day> |</li>
<li>[ <%comment_hour>:<%comment_minute> ]</li>
<li><%comment_mail+name> #<%comment_trip></li>
<li><%comment_url+str></li>
<li>[ <a href="<%comment_edit_link>" title="コメントの編集">編集</a> ]</li>
</ul><img src=http://blog85.fc2.com/z/zuttoissyodayo2/file/05-h10.gif align=center>
コメントフッターにあるそれぞれのパート（月日・名前・編集ボタンなど）は、ひとつひとつ「<li>〜</li>」で囲まれています。
場所は、自分のお好きな位置へどうぞ(上のは、月日の次に入ります)。
Ｑ＆Ａ：ブログ説明文に改行
［No.15］ 2007/08/08 (Wed) 20：50
Ｑ8．ブログ説明文を改行できませんか？
Ａ．直接「HTMLの編集」の中にブログ説明文を書き込めばできます。
【方法】
「HTMLの編集」内、
Ａ．直接「HTMLの編集」の中にブログ説明文を書き込めばできます。
【方法】
「HTMLの編集」内、
<div id="branding"><!-- branding -->の太文字の場所に、
<a name="pagetop"></a>
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<div class="site_intro"><%introduction></div>
</div><!-- /branding -->
<div id="branding"><!-- branding -->の赤文字のように改行記号「 <br> 」を挟んで文字を入れると説明文が改行できます。
<a name="pagetop"></a>
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<div class="site_intro"> 一行目<br>二行目 </div>
</div><!-- /branding -->
Ｑ＆Ａ：ブログタイトル名を画像表示
［No.14］ 2007/08/07 (Tue) 20：49
Ｑ7．ブログタイトル名を画像で表示したいのですが？
Ａ．�，泙困蓮△桓�分で用意（作成）したブログタイトル画像を、ファイルアップロードして、画像URLをコピーします。
※コピーの仕方は、ファイルアップロード表示された画像上で右クリックして、プロパティを選択し、アドレス(URL)を「http://〜gif」までを反転させ、右クリックでコピーします。
�◆�HTMLの編集」内の
以上でＯＫです。
但し、画像の大きさに寄っては、その下のブログ説明文も下がるので、調整が必要です。
Ａ．�，泙困蓮△桓�分で用意（作成）したブログタイトル画像を、ファイルアップロードして、画像URLをコピーします。
※コピーの仕方は、ファイルアップロード表示された画像上で右クリックして、プロパティを選択し、アドレス(URL)を「http://〜gif」までを反転させ、右クリックでコピーします。
�◆�HTMLの編集」内の
<div id="branding"><!-- branding -->の赤文字部分に「 <img src="�，妊灰圈爾靴寝菫�URLを貼り付ける"> 」と書く（←コピーできます。「」は省く）
<a name="pagetop"></a>
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<div class="site_intro"><%introduction></div>
</div><!-- /branding -->
以上でＯＫです。
但し、画像の大きさに寄っては、その下のブログ説明文も下がるので、調整が必要です。
Ｑ＆Ａ：ブログタイトルをフラッシュ画像
［No.13］ 2007/08/06 (Mon) 20：35
Ｑ6．ブログタイトルをフラッシュ画像にしたいのですが？
Ａ．画像１枚使用の場合は、普通のHP用の方法で表示されると思いますが、数枚使用の場合は、下記の方法で表示されます。
（と思います…自信はありませ〜ん(>_<)）
インフレームを使ってください。
下記方法では、ブログ説明文が、フラッシュ画像の下に出ます。
�．侫薀奪轡絏菫�など必要ファイルを「アップロード」します。
�◆�HTMLの編集」内、
「 <div style="text-align:center;"> <IFRAME src="貴方がUPしたファイル名" border="0px" frameborder="0" width="横幅" height="縦幅" scrolling="NO" name="Flash"> </IFRAME> </div> 」
と入れてください（コピペ）。
青文字は、拡張子「swf」のファイルです。「http://〜」から入れてください。
緑文字は、画像幅数に変えてください。
「style="text-align:center」は、ブログでのフラッシュの位置です。
（↑これは中央）
��「スタイルシートの編集」内、
【お願い】
杏が判るのは、フラッシュのアップ方法のみです。
フラッシュ内部のことは解りませんので、フラッシュ素材配布サイトさんで質問してください。
後、フラッシュ素材を使った場合は、ブログにフラッシュ素材配布サイトさんのリンク表示を忘れないでください（詳しいことは、素材サイトさんの利用規約などをご覧ください）。
Ａ．画像１枚使用の場合は、普通のHP用の方法で表示されると思いますが、数枚使用の場合は、下記の方法で表示されます。
（と思います…自信はありませ〜ん(>_<)）
インフレームを使ってください。
下記方法では、ブログ説明文が、フラッシュ画像の下に出ます。
�．侫薀奪轡絏菫�など必要ファイルを「アップロード」します。
�◆�HTMLの編集」内、
<div id="branding"><!-- branding -->の青文字部分を消して、<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<div class="site_intro"><%introduction></div>
</div><!-- /branding -->
「 <div style="text-align:center;"> <IFRAME src="貴方がUPしたファイル名" border="0px" frameborder="0" width="横幅" height="縦幅" scrolling="NO" name="Flash"> </IFRAME> </div> 」
と入れてください（コピペ）。
青文字は、拡張子「swf」のファイルです。「http://〜」から入れてください。
緑文字は、画像幅数に変えてください。
「style="text-align:center」は、ブログでのフラッシュの位置です。
（↑これは中央）
��「スタイルシートの編集」内、
div#branding {の線部分を消してください。
font-family :"HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
width : 830px;
height : 160px;
float : right;
margin-top : 10px;
padding-top : 10px;
text-align : left;
background-image : url(http://blog85.fc2.com/z/zuttoissyodayo2/file/04-q09.gif) ;
background-repeat : no-repeat;
background-position : center;
font-weight : normal;
}
【お願い】
杏が判るのは、フラッシュのアップ方法のみです。
フラッシュ内部のことは解りませんので、フラッシュ素材配布サイトさんで質問してください。
後、フラッシュ素材を使った場合は、ブログにフラッシュ素材配布サイトさんのリンク表示を忘れないでください（詳しいことは、素材サイトさんの利用規約などをご覧ください）。
Ｑ＆Ａ：ブログパーツの中央表示
［No.12］ 2007/08/05 (Sun) 20：34
Ｑ5．ブログペットを取り付けましたが、メニュー欄の中央に変更しても中央になりません。どうすればいいですか？
Ａ．ブログペット・Homeサイトで説明してある方法でプラグインに設置すると、「設定の変更」で中央に変更しても反映されません（なぜかは判りません…）。
中央にしたい場合は、「HTMLの変更」の中に入っているソースを全部消さずに、
緑文字部分は消しても消さなくても構いません。
その上で、「設定の変更」で「中央」に変更してください。
Ａ．ブログペット・Homeサイトで説明してある方法でプラグインに設置すると、「設定の変更」で中央に変更しても反映されません（なぜかは判りません…）。
中央にしたい場合は、「HTMLの変更」の中に入っているソースを全部消さずに、
<!-- ＆freeareaの中にHTMLが代入されます。 -->の赤文字の部分だけを消して、ブログペットソースを入れてください。
<p class="plugin-freearea" &align>&freearea
</p>
緑文字部分は消しても消さなくても構いません。
その上で、「設定の変更」で「中央」に変更してください。
Ｑ＆Ａ：記事上にフリースペース
［No.11］ 2007/08/04 (Sat) 20：33
Ｑ4．記事の上にフリースペースを作りたいのですが？
Ａ．方法は三通りあります。
もっとあるかも知れませんが、杏が現在判るのはこれだけです(^^ゞ
<１>１番簡単なのは、日付を未来に設定して、記事を書く方法です。
これなら、常に１番上に持ってくることができ、フリースペースとして利用できます。
但し、日付が表示されちゃうのが、難点。
<２>HTML内にソースを書く方法です。
「HTMLの編集」内の場所に、
改行は文末に「<br>」と入れてください。
「スタイルシートの編集」内にどこでも良いので、
フリースペースの内容変更は、常に「HTMLの編集」内で変えることになります。
TOPページのみに表示されます。
全ページに表示させたい時は、最初「<!--index_area-->」と最後「<!--/index_area-->」のみを消してください。
テンプレートに寄っては、枠の上下位置など変更する必要がありますので、ご注意ください。
<３>プラグイン｢3｣を使って、HTMLを変える方法です。
ちょっと知識はいりますが、プラグイン｢3｣HTMLを記事上に編集します。
これだと内容の変更は、プラグインの設定の中でできます。
でも、その他のカテゴリーは、プラグイン｢3｣に持って来れないので、サイドメニューには｢3｣は使えない不便もありますが、｢1｣と｢2｣があるので、さほど問題はないと思います。
ちなみに、杏のテンプレートは、すべてこのタイプです。
Ａ．方法は三通りあります。
もっとあるかも知れませんが、杏が現在判るのはこれだけです(^^ゞ
<１>１番簡単なのは、日付を未来に設定して、記事を書く方法です。
これなら、常に１番上に持ってくることができ、フリースペースとして利用できます。
但し、日付が表示されちゃうのが、難点。
<２>HTML内にソースを書く方法です。
「HTMLの編集」内の場所に、
<div id="primary-column" class="column"><!-- primary-column -->と入れてください。
<!--index_area-->
<div align="center">
<!--TOPフリーエリア-->
<div class="free_area">
フリースペースの使い方は、作者ブログをご覧ください。<br>
<strong>太字にしたい場合はこの中に入れてください</strong><br>
普通の字は、ココへ書いてください。
</div>
<!--/TOPフリーエリア-->
</div>
<!--/index_area-->
改行は文末に「<br>」と入れてください。
「スタイルシートの編集」内にどこでも良いので、
div.free_area {と入れてください。
width : 90%;
text-align: left;
font-size: 13px;
padding: 13px;
margin: 15px 0px 15px 0px;
line-height: 130%;
border : 2px dotted #c8b693;
}
フリースペースの内容変更は、常に「HTMLの編集」内で変えることになります。
TOPページのみに表示されます。
全ページに表示させたい時は、最初「<!--index_area-->」と最後「<!--/index_area-->」のみを消してください。
テンプレートに寄っては、枠の上下位置など変更する必要がありますので、ご注意ください。
<３>プラグイン｢3｣を使って、HTMLを変える方法です。
ちょっと知識はいりますが、プラグイン｢3｣HTMLを記事上に編集します。
これだと内容の変更は、プラグインの設定の中でできます。
でも、その他のカテゴリーは、プラグイン｢3｣に持って来れないので、サイドメニューには｢3｣は使えない不便もありますが、｢1｣と｢2｣があるので、さほど問題はないと思います。
ちなみに、杏のテンプレートは、すべてこのタイプです。
Ｑ＆Ａ：サイドメニューが落ちる（カラム落ち）
［No.10］ 2007/08/03 (Fri) 20：31
Ｑ3．サイドメニューが下に落ちて、レイアウトが崩れるのですが？
Ａ．これに関してはあまり詳しくはないのですが、２通りの原因があります。
〔1〕１番判りやすい原因は、アップ画像の大きさ。
記事中、若しくは、メニューエリアに、横幅以上の画像を入れてしまうと、テンプレートに設定した全体幅（記事幅＋メニュー幅）を超えてしまうので、レイアウトが崩れてしまうのです。
直すには、画像の大きさを変更し、再UPするしかないようです。
または、サムネイルを活用するとか…（←鮎は判りません…）。
レイアウトが崩れるウンヌン…の前に、大きな画像は、読み込み時間がかかるので、訪れてくれている人を待たせてしまい、読者の足を遠のかせてしまう原因になるのでは、と思います。
〔2〕２番目は、プラグインが原因の時。
サイドメニュー欄に、いろいろ機能（プラグインＤＬなど）を付け足すと思いますが、その中のどれかが原因の場合もあります。
直すには、原因となるプラグイン機能を削除することです。
どれが原因かを見つけるには、「プラグインの設定」画面でプラグインカテゴリーの「設定の変更」で、「表示の設定」を“非表示”にします。
必ず、ひとつを非表示にして、画面を確認して、と試してくださいね。
“削除”ではありませんので、お間違いのないように。
Ａ．これに関してはあまり詳しくはないのですが、２通りの原因があります。
〔1〕１番判りやすい原因は、アップ画像の大きさ。
記事中、若しくは、メニューエリアに、横幅以上の画像を入れてしまうと、テンプレートに設定した全体幅（記事幅＋メニュー幅）を超えてしまうので、レイアウトが崩れてしまうのです。
直すには、画像の大きさを変更し、再UPするしかないようです。
または、サムネイルを活用するとか…（←鮎は判りません…）。
レイアウトが崩れるウンヌン…の前に、大きな画像は、読み込み時間がかかるので、訪れてくれている人を待たせてしまい、読者の足を遠のかせてしまう原因になるのでは、と思います。
〔2〕２番目は、プラグインが原因の時。
サイドメニュー欄に、いろいろ機能（プラグインＤＬなど）を付け足すと思いますが、その中のどれかが原因の場合もあります。
直すには、原因となるプラグイン機能を削除することです。
どれが原因かを見つけるには、「プラグインの設定」画面でプラグインカテゴリーの「設定の変更」で、「表示の設定」を“非表示”にします。
必ず、ひとつを非表示にして、画面を確認して、と試してくださいね。
“削除”ではありませんので、お間違いのないように。
Ｑ＆Ａ：カレンダー表示
［No.9］ 2007/08/02 (Thu) 20：30
Ｑ2.テンプレートにカレンダーが表示されないのですが？
Ｑ2-2.前のテンプレートでは表示されてたのに、テンプレートを変えたらカレンダーが表示されなくなりました。どうすれば良いですか？
Ａ．Ｑ１の場合……
ブログの開始当初は、プラグインにはカレンダーが設定されていません。
「環境設定」→「プラグインの設定」→「プラグインの追加」でカレンダーを選び、設定してください。
Ａ．Ｑ２の場合……
テンプレートには、「プラグイン対応」と「プラグイン非対応」の二通りのタイプがあります。
プラグイン非対応テンプレートは、HTMLにカレンダーが組み込まれているので、プラグインにカレンダーが設定されていなくてもブログには、カレンダーが表示されます。
つまり、プラグイン非対応テンプレートから、プラグイン対応テンプレートに変えた場合に、プラグインのカレンダー設定が必要になるのです。
以上の２つを試してもカレンダーが表示されない場合は、テンプレート作成者にその旨を明記して、お尋ねください。
ちなみに杏のテンプレートは、すべてプラグイン対応です。
Ｑ2-2.前のテンプレートでは表示されてたのに、テンプレートを変えたらカレンダーが表示されなくなりました。どうすれば良いですか？
Ａ．Ｑ１の場合……
ブログの開始当初は、プラグインにはカレンダーが設定されていません。
「環境設定」→「プラグインの設定」→「プラグインの追加」でカレンダーを選び、設定してください。
Ａ．Ｑ２の場合……
テンプレートには、「プラグイン対応」と「プラグイン非対応」の二通りのタイプがあります。
プラグイン非対応テンプレートは、HTMLにカレンダーが組み込まれているので、プラグインにカレンダーが設定されていなくてもブログには、カレンダーが表示されます。
つまり、プラグイン非対応テンプレートから、プラグイン対応テンプレートに変えた場合に、プラグインのカレンダー設定が必要になるのです。
以上の２つを試してもカレンダーが表示されない場合は、テンプレート作成者にその旨を明記して、お尋ねください。
ちなみに杏のテンプレートは、すべてプラグイン対応です。
Ｑ＆Ａ：画像の枠
［No.8］ 2007/08/01 (Wed) 20：29
Ｑ1．記事内の画像の枠を写真風にするにはどうすれば良いですか？
Ａ．以下の方法で試してください。
（ブログ・ヘルプのカスタマイズ・マニュアルにも載ってます）
【方法】
「スタイルシートの編集」内、
「entry-body」は記事内を表しますので、記事内の画像にしか反映されません。
「padding」は、余白の太さ、
「background-color」は、余白の色、
「border」は、外枠の太さ(1px)と枠模様と枠の色、
を指定します。
“solid”は線、“dotted”は点線です。
これだけだと、絵文字にも反映されてしまうので、以下の赤太文字タグを追記してください。
Ａ．以下の方法で試してください。
（ブログ・ヘルプのカスタマイズ・マニュアルにも載ってます）
【方法】
「スタイルシートの編集」内、
div.entry-body img {のソースをどこでも良いので、入れてください。
padding : 3px;
border : 1px solid /*dotted*/ #c8b693;
background-color : #ffffff;
}
「entry-body」は記事内を表しますので、記事内の画像にしか反映されません。
「padding」は、余白の太さ、
「background-color」は、余白の色、
「border」は、外枠の太さ(1px)と枠模様と枠の色、
を指定します。
“solid”は線、“dotted”は点線です。
これだけだと、絵文字にも反映されてしまうので、以下の赤太文字タグを追記してください。
/* 絵文字 */
.emoji{
border : 0px;
vertical-align:middle;
margin : 2px 0px 0px 0px;
padding : 0;
background-color : transparent;
}
