fc2ブログ

*TENTEN★くらぶ*

ブログ用テンプレート作成サイト♪

01月≪ 02月/12345678910111213141516171819202122232425262728≫03月

『NEW』アイコン

鮎のテンプレートで使っている『NEWアイコン』。
最初に作ったのを使い回してます…(^^ゞ

でもそれじゃ、あんまりだよねぇ~と思うので、種類を少し増やしてみました。
もちろん、余所の素材屋さんのアイコンを使ってもOKですよ(^o^)
(ちゃんと素材屋さんのリンクを貼ってね)

【NEWアイコン・見本】 持ち帰らないでねd(^-^)!
〔1〕  〔2〕  〔3〕
 [ newicon.gif ]  [ newicon2.gif ] [ newicon3.gif ]
〔4〕 〔5〕 〔6〕
 [ newicon4.gif ] [ newicon5.gif ] [ newicon6.gif ]

【方法】
「HTMLの編集」の上部にある下記の赤文字の部分を上記のアイコンに変えてください。
<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/newicon.gif">')}
}
--></script>

</head>
スポンサーサイト



修正:03

《2月27日00時10分:共有テンプレ「ayu-tp2_03」再登録済み》

【修正箇所】
ブログ名の幅が狭く2段になってしまう不具合。

「スタイルシートの編集」内、
h1 {
font-family : "HGP創英角ポップ体",Osaka;
font-size: 25px;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
}
赤文字部分の数値を変えてください。

掲示板設置しました~♪

質問掲示板[Q&A★BOX]を設置しました

基本的に質問は、関連する記事のコメントに書いて頂きたいのですが、『どこの記事のコメントに書けばいいか判らない質問など』の場合にお使いください。

掲示板を設置したので、メールフォームは削除しました

テンプレ【ayu-tp2_03】

【ayu-tp2_03】テンプレート見本【ayu-tp2_03】
*茶系 *クラフト柄素材 *2カラム
*シンプル *左メニュー

[見本]


[鮎から一言]
テンプレ「ayu-tp2_07」の色柄違いです。
鮎にしては、結構、濃いめのダーク系になりました。
背景には、判りにくいけどクラフト柄が入ってます。スキャンして作りました。リピートが判らないように大きめに作ったけど、どうでしょ?
記事部分は、やはり背景色が濃いと読みにくいために薄い色を使いました。

[機能]
※記事部分に罫線(便箋風)を入れました。
※絵文字の罫線ズレ対応は、「au」のみです。
ソフトバンク絵文字は弱冠、ドコモ絵文字は大幅に罫線から文字がズレます。それらを主に使いたいのでしたら、「スタイルシートの編集」の「.emoji」の「margin」の数値を変えてください。

[画像アップ]
※記事横幅は「594px」です。この範囲に収まる画像横幅でお願いします。
※縦幅は、「20×倍数-3」で作ってください。または、サムネイルを利用してください。
罫線を使っていますので、この縦幅に寄っては、画像の下部の記事が罫線枠に入らなくなります。

[お願い]
ダウンロードされた方で、使用に不具合があった方は、この記事下に書き込んでください。
お尋ね頂いた内容+解決法は、今後のために、内容のみブログに記載させて頂きますので、ご了承ください。
原因究明に時間がかかることもあり、お返事が遅れたり、後の書き込みの方の返事が先になったりすることもあると思います。

「03」裏話?

「07」でも試行錯誤したのですが、メニュー背景画像がどうしても下まで伸びませんでした…。
でも「03」では伸びてるでしょ?

実は、プラグインの背景指定ではなく、「container」の背景画像として指定してあります(^_^)b
なので、もしかするとプラグインからズレる心配もあるのだ。
まぁ、「body」指定ではないから大丈夫だとは思うけど。

修正:01

《2月23日17時00分:共有テンプレ「ayu-tp3_01」再登録済み》

【修正箇所】
記事タイトルの左側が空く不具合のため。

【方法】
「スタイルシートの編集」内、数値を変えてください。
div.section h2 {
    font-family :"HGP創英角ポップ体",Osaka;
    float : right;
    padding : 60px 10px 0px 8px;
    font-size : 11pt;
    voice-family : "\"}\"";
    voice-family : inherit;
    font-weight : normal;
}

修正:04&09

《2月21日08時50分:共有テンプレ「ayu-tp2_04」再登録済み》
《2月21日08時50分:共有テンプレ「ayu-tp3_09」再登録済み》

■修正箇所■
絵文字入力時の文字の罫線ズレ。
但し、[au絵文字]のみ対応!


罫線を入れて、絵文字を使うと、文字が罫線内に入らないのが気になって、補正方法を追加しました。
但し、ソフトバンク・ドコモ・auの絵文字では画像の大きさが違います。
この大きさに寄っては、数値に収まりませんので、お使いの絵文字に寄って、「スタイルシートの編集」内の「.emoji」内の「margin」の数値を変えてください。

*絵文字を使われる方は、再DLをお願いします。

*カスタマイズされている方で、 方法を知りたい方は、お知らせください。

お知らせ

これまでは、修正した箇所などのお知らせ時に、カスタマイズされている方のために、ご自身で修正できるように、方法(画像付き)を入れてきましたが、これからは、連絡(質問)があった時に「載せるorお教えする」ことにしました。

理由は、
①鮎の手間を省くため
(説明画像を作成したりして結構時間がかかる)
②載せる必要性の有無が判らないため
(載せてもそれが役に立ってるのかどうかが不明で、もしかして無意味??と思うので)
です。

とりあえずは、この仕方で進めます。
また変わってくるかも知れませんが…。
ご了承ください

テンプレ【ayu-tp3_09】

【ayu-tp3_09】テンプレート見本【ayu-tp3_09】
*白&茶系 *「04」の3カラム版
*ペアくま素材 *シンプル

[見本]

[鮎から一言]
「ayu-tp2_04」の3カラム版です。
変えたところは、背景の足跡を3つにしました。
じゃないと、3カラム位置とのバランスが悪いので。

[機能]
※記事ヘッダー部分に、ページトップに戻れる「TOP」リンクをつけました。
※記事上部にフリースペースを付けました。書込は、「HTMLの編集」の中でできます。必要のない方は、「<!--index_area-->」から「<!--/index_area-->」までを消してください。INDEXページにしか表示されません。
※記事下の「前ページ/HOME/次ページ」のリンクを画像にしました。
※記事部に罫線を入れました。 絵文字の対応は、「au」のみです。ソフトバンク絵文字は弱冠、ドコモ絵文字は大幅に罫線から文字がズレます。(コメント記事部には線は入りませんので、コメントでの絵文字使用はOKです)。
 絵文字を多用する方で、ラインを消したい時は、
div.entry-body {
padding : 15px 0px 10px 0px;
margin : 0px 10px 0px 10px;
line-height:20px;
background:url(http://blog-imgs-17.fc2.com/z/u/t/zuttoissyodayo2/line-dot.gif);}
の線部分を消してください。

[3カラムの使い方]
* 右メニューは、プラグイン・カテゴリーの「1」と「2」、
* 左メニューは、プラグイン・カテゴリーの「3」、
が入ります。
左メニューに入れたい項目は、設定を変更してください。


[画像アップ]
※記事横幅は「450px」です。この範囲に収まる画像幅でお願いします。
※縦幅は、「20×倍数-3」で作ってください。
 記事文字下に横点線を使っていますので、この縦幅に寄っては、画像の下部の記事がラインの中に入らなくなります。

[お願い]
ダウンロードされた方で、使用に不具合があった方は、この記事下に書き込んでください。
お尋ね頂いた内容+解決法は、今後のために、内容のみブログに記載させて頂きますので、ご了承ください。
原因究明に時間がかかることもあり、お返事が遅れたり、後の書き込みの方の返事が先になったりすることもあると思います。

Q&A:コメントの時間表示

Q10.コメントにも投稿時間が出るようにしたいのですが?

A.下記の方法で、ソースを追加してください。

【方法】
「HTMLの編集」内、
 <h4 class="comment-header">TITLE:<%comment_title></h4>
<div class="comment-body">
<%comment_body>
</div>
<ul class="comment-footer">
<li>|&nbsp;<%comment_year>-<%comment_month>-<%comment_day>&nbsp;|</li>
<li>[ <%comment_hour>:<%comment_minute> ]</li>
<li><%comment_mail+name> #<%comment_trip></li>
<li><%comment_url+str></li>
<li>[&nbsp;<a href="<%comment_edit_link>" title="コメントの編集">編集</a>&nbsp;]</li>
</ul><img src=http://blog-imgs-17.fc2.com/z/u/t/zuttoissyodayo2/05-h10.gif align=center>
の赤文字ソースを追加してください。

コメントフッターにあるそれぞれのパート(月日・名前・編集ボタンなど)は、ひとつひとつ「<li>~</li>」で囲まれています。
場所は、自分のお好きな位置へどうぞ(上のは、月日の次に入ります)。

カスタマ:04

《2月14日08時20分:共有テンプレ「ayu-tp2_04」再登録済み》

記事下の「ジャンル&スレッドテーマ」 の表示位置が点線上になるのが気になる方は下記の数字を
div.section p {
margin : 1.5em 0 0 0;
}
のように直してください。

Q&A:ブログ説明文に改行

Q9.ブログ説明文を改行できませんか?

A.直接「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 -->
<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 -->
の赤文字のように改行記号「 <br> 」を挟んで文字を入れると説明文が改行できます。

Q&A:ブログタイトル名を画像表示

Q8.ブログタイトル名を画像で表示したいのですが?

A.「ayu-tp3_01」を例に説明しますが、鮎のテンプレはだいたい同じようなソース表示だと思います。

①まずは、ご自分で用意(作成)したブログタイトル画像を、ファイルアップロードして、画像URLをコピーします。
※コピーの仕方は、ファイルアップロード表示された画像上で右クリックして、プロパティを選択し、アドレス(URL)を「http://~gif」までを反転させ、右クリックでコピーします。

②「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 -->
の赤文字部分に「 <img src="①でコピーした画像URLを貼り付ける"> 」と書く(←コピーできます。「」は省く)

以上でOKです。

但し、画像の大きさに寄っては、その下のブログ説明文も下がるので、調整が必要です。

修正:04

《2月11日23時40分:共有テンプレ「ayu-tp2_04」再登録済み》

●記事フッター部分の「TOP▲」が正常に働かない不具合を修正しました。

【方法】

「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 -->
の赤文字ソースを追加してください。

修正:04

《2月11日22時40分:共有テンプレ「ayu-tp2_04」再登録済み》

●記事タイトル部分が途中で改行される不具合を修正しました。
●「続きを読む」の表示が罫線内に入るように修正しました。

フリースペースをお使いの方は、以下の方法で修正してください。

【方法】

「スタイルシートの編集」内、
div.date {
font-size: 10pt;
float : right;
padding : 22px 15px 0px 0px;
text-align : center;
font-weight : normal;
}
・青文字部分を削除。
・赤文字部分を「right」に変更(最後の「;」は消さないように)。

div.section h2 {
font-family :"HGP創英角ポップ体",Osaka;
float : left;
padding : 6px 15px 0px 30px;
font-size : 11pt;
voice-family : "\"}\"";
voice-family : inherit;
font-weight : normal;
}
に変更。

p.entry-more {
padding : 1px 15px 0 0;
text-align : right;
}
に変更。

Q&A:うさぎさんカーソル

Q7.鮎さんのブログで表示されている「うさぎさんカーソル」を自分のブログにも付けたいのですが?

A.結論からお答えすると、FC2さんのブログでは無理です…(>y<;)

カーソル素材は、拡張子が「cur(ノ-マルカ-ソル)」または「ani(アニメ-ションカ-ソル)」しか利用できません。
(鮎使用のうさぎさんは、curです)
ですが、FC2さんでは、cur・aniの拡張子のアップロードができないので、表示できないのです。

ですが、方法はあって、上の拡張子をファイルアップできるHPをお持ちなら、それを介して表示できます。

ようするに、別のHPにカーソル素材を転送して、そのHPのアドレス(http://~.cur)でブログ上に画像を読み込むワケです。
(但し、すべてのHPが上の拡張子を読み込めるのかどうかは鮎には判りません)

但し、表示できるブラウザは、IEだけのようです。

自分のアドレスでカーソル素材を用意できる方用に、その方法を載せておきますね。

【方法】
1)カーソルで検索して、配布している素材屋さんから、カーソル素材をDLする(右クリック保存はできません。DL保存となるので、解凍ソフトが必要です)。

2)カーソル素材が用意できたら、自分のHPへファイルアップする。

3)「スタイルシートの編集」の「body」の場所に
< cursor : url(http://貴方のHPアドレス/●●.cur); >
と入れる(<>は省く)。
(このCSSは、リンク上に来ると普通の手カーソルに戻るタイプです。リンク上に来ても画像のままのCSSとかありますので、探してみてね)

以上で表示できます。

余談ですが。
共有プラグインに似たのがありました。訪れた方の選択制ですが、利用するのも手かな、と思います。

さらに余談ですが。
HPをお持ちでなくても、お使いのプロバイダーさんに寄っては、契約者には無料で使えるHP容量があると思います。
なので、本格的にHPを作らなくても良いので、一応開設して、カーソル素材置き場として使ってはどうでしょうか?
もちろん、いくら契約者さんでも、そういう使い方は禁止となっていればできませんけどね。

後、無料HPでも使えますが、こちらは「素材置き場」としての利用は、規約違反と明記しているところが多いので、問題にならないようにお願いします。

こんなことをする方はいないと思いますが、カーソル配布素材屋さんに「直リン」しないでくださいねヾ(℃゜)々!!!

テンプレ【ayu-tp2_04】

テンプレート[ayu-tp2_04]見本【ayu-tp2_04】
*白&茶系 *2カラム *右メニュー
*ペアくま素材 *シンプル

見本

[鮎から一言]
ペアくまさんに、色違いのペアルックを着せてみました~(^◇^)
作ってる時はな~んにも考えてなかったけど、出来てから見ると「あやや?ペアくまさんって、見方によってはバレンタイン仕様??」って思っちゃいました。
手にチョコでも持たせてみようかな、とも考えたけど、もうバレンタインまで日がないし、鮎的には、”行事に関係なく、いつでも使えるテンプレート”が好きなので、やめました。
背景にクマさんの足跡を固定しました。

[機能]
※記事ヘッダー部分に、ページトップに戻れる「TOP」リンクをつけました。
※記事上部にフリースペースを付けました。書込は、「HTMLの編集」の中でできます。必要のない方は、「<!--index_area-->」から「<!--/index_area-->」までを消してください。INDEXページにしか表示されません。
※記事下の「前ページ/HOME/次ページ」のリンクを画像にしました。
※記事部にラインを入れました。「au」絵文字のみに対応しています。(コメント記事部には線は入りませんので、コメントでの絵文字使用はOKです)。
 絵文字(3種類)を多用する方で、ラインを消したい時は、
div.entry-body {
padding : 15px 0px 10px 0px;
margin : 0px 10px 0px 10px;
line-height:20px;
background:url(http://blog-imgs-17.fc2.com/z/u/t/zuttoissyodayo2/line-dot.gif);
}
の線部分を消してください。

[画像アップ]
※記事横幅は「500px」です(内部幅はこれ以下)。
この範囲に収まる画像幅でお願いします。
※縦幅は、「20×倍数-3」で作ってください。
 記事文字下に横点線を使っていますので、この縦幅に寄っては、画像の下部の記事がラインの中に入らなくなります。
 別の方法もあり、『Q&A』に載せてあります。

[お願い]
ダウンロードされた方で、使用に不具合があった方は、この記事下に書き込んでください。
お尋ね頂いた内容+解決法は、今後のために、内容のみブログに記載させて頂きますので、ご了承ください。
原因究明に時間がかかることもあり、お返事が遅れたり、後の書き込みの方の返事が先になったりすることもあると思います。

Q&A:ブログタイトルをフラッシュ画像

Q6.ブログタイトルをフラッシュ画像にしたいのですが?

A.画像1枚使用の場合は、普通の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://blog-imgs-17.fc2.com/z/u/t/zuttoissyodayo2/04-q09.gif) ;
background-repeat : no-repeat;
background-position : center;

font-weight : normal;
}
の線部分を消してください。

【お願い】
鮎が判るのは、フラッシュのアップ方法のみです。
フラッシュ内部のことは解りませんので、フラッシュ素材配布サイトさんで質問してください。
後、フラッシュ素材を使った場合は、ブログにフラッシュ素材配布サイトさんのリンク表示を忘れないでください(詳しいことは、素材サイトさんの利用規約などをご覧ください)。

Q&A:ブログペットの中央表示

Q5.ブログペットを取り付けましたが、メニュー欄の中央に変更しても中央になりません。どうすればいいですか?

A.ブログペット・Homeサイトで説明してある方法でプラグインに設置すると、「設定の変更」で中央に変更しても反映されません(なぜかは判りません…)。

中央にしたい場合は、「HTMLの変更」の中に入っているソースを全部消さずに、
<!-- &freeareaの中にHTMLが代入されます。 -->
<p class="plugin-freearea" &align>
&freearea
</p>
の赤文字の部分だけを消して、ブログペットソースを入れてください。
緑文字部分は消しても消さなくても構いません。

その上で、「設定の変更」で「中央」に変更してください。

カレンダー

01 | 2007/02 | 03
- - - - 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 - - -

最近の記事&コメント

カテゴリー
プロフィール

杏
Author:杏
(前HN:鮎)

パソコンは少々囓った程度の
知識しか持っていませんので
期待なさらずに…。

テンプレの感想・ご意見が
あれば是非聞かせてください。

御訪問者様人数


現在の閲覧者数:

アーカイブ

リンク
ブログ内検索