2005.10.30
4seasons
トップ画像がメインになるテンプレートですので記事部は地味に作りました。
javascriptを使ってページを読み込むごとにトップ画像を切り替える事ができます。
livedoor Blogですでに配布しているものをFC2用に移植してみました。
プレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。
このテンプレートの使用上の注意
ブラウザの設定でJavaScriptを切っている場合は画像が切り替わりません。
そのため一応CSSにも画像(夏)を指定してあります。#bannerを参照。
トップ画像のサイズは横800px、縦350pxです。
※このテンプレートに限りトップ画像のみ2次加工厳禁です！
トップ画像以外はご自由にしてくださって構いません。
Safariでテンプレートを編集すると表示が変になってしまうようなので注意してください。
HTMLテンプレートの画像切り替えスクリプト部の
document.write('<\/style>');
この\(macだとバックスラッシュ)マークが影響して起こる問題らしいです。
オススメカスタマイズ
新たに画像(横800x縦350)を用意して、切り替える画像URLを差し替えるもしくは追加してみてください。
というか適当に選んだ画像なので差し替え推奨です。(汗)
差し替え方法はHTMLテンプレートの</head>タグの上に
<script language="JavaScript">
<!--
photo = new Array();
//画像の指定。ランダムに表示したい数だけ増やす。photo[連番] = '画像URL';
photo[0] = '画像のURL';
photo[1] = '画像のURL';
photo[2] = '画像のURL';
photo[3] = '画像のURL';
r = Math.floor(Math.random()*photo.length);
document.write('<style type="text/css">');
document.write('#banner{background: url("'+photo[r]+'") no-repeat;}');
document.write('<\/style>');
// -->
</script>
</head>
という記述がございますので
赤文字部分に差し替える画像のURLを入力してください。
※画像を差し替える場合はCSSの#bannerに指定している背景画像も変更してください。
また切り替える画像を増減させることが出来ます。
増やす場合は上の引用に青字で書かれているように
photo[3] = '画像のURL';
photo[4] = '画像のURL';
photo[5] = '画像のURL';
という風に追記すればできますし、逆に数字の大きいほうから削除すれば少なくすることも出来ます。
800x350だと比較的大きな縦幅なのでもう少し縦幅が小さい(800x200とか)画像を使用してもいいとおもいます。
※その際にはCSSの#bannerや.blogtitleを適宜調節してください。
※切り替えに使用する画像サイズは必ず揃えてください。
このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。
画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。
このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。
制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ：中
この記事へのトラックバックURL
http://cie.blog11.fc2.com/tb.php/19-8570d180
この記事へのトラックバック
この記事へのコメント
こんにちは。
このテンプレを見つけてとても気に入ったので使いたいんですが、サイドバーの"最近のコメント"等の項目を英語にしたいと思います。htmlの部分を見る限り、すでにそれらは英語になってますよね？なぜ日本語で表記されてるんでしょうか？Calendarはどちらもそのまま英語で、htmlの部分を試しに消したりしてみると実際のデザインでも消えてるんで反映されてるということですよね？サイドバーのほかの項目の見出しはやり方が違うんでしょうか？？[泣2]
このテンプレを見つけてとても気に入ったので使いたいんですが、サイドバーの"最近のコメント"等の項目を英語にしたいと思います。htmlの部分を見る限り、すでにそれらは英語になってますよね？なぜ日本語で表記されてるんでしょうか？Calendarはどちらもそのまま英語で、htmlの部分を試しに消したりしてみると実際のデザインでも消えてるんで反映されてるということですよね？サイドバーのほかの項目の見出しはやり方が違うんでしょうか？？[泣2]
Posted by lolっち at 2005.12.29 13:06 | 編集
lolっちさんはじめましてこんにちは。
おそらく「プラグイン」を有効にされているからだと思われます。
「プラグイン」を無効にするか、有効にしたままプラグインのそれぞれの項目の名前を英語に変えて保存してみてください。
おそらく「プラグイン」を有効にされているからだと思われます。
「プラグイン」を無効にするか、有効にしたままプラグインのそれぞれの項目の名前を英語に変えて保存してみてください。
出来ました！！ありがとうございます！！[くるっ]使わせて頂きますね。[わかば]
Posted by lolっち at 2005.12.29 15:15 | 編集
またまたすみません。
また質問があります。サイドバーのRSSの項目は、ソースの中の何処にあるのでしょうか？
html、css共にチェックしたんですが、それっぽいのが見当たりません。[泣]
また質問があります。サイドバーのRSSの項目は、ソースの中の何処にあるのでしょうか？
html、css共にチェックしたんですが、それっぽいのが見当たりません。[泣]
Posted by lolっち at 2005.12.30 11:48 | 編集
RSSはhtmlの下のほうにある
<div class="syndicate">
<a href="<%url>?xml">Syndicate this site (XML)</a>
</div>
の所です。
<div class="syndicate">
<a href="<%url>?xml">Syndicate this site (XML)</a>
</div>
の所です。
どうも。cieさん。お手数かけました。
自分でしっかり確認するべきでした。ありがとうございます！！
自分でしっかり確認するべきでした。ありがとうございます！！
Posted by lolっち at 2006.01.02 16:32 | 編集
はじめまして
絵文字を使いたいんですが
どうすればいいでしょうか？
絵文字を使いたいんですが
どうすればいいでしょうか？
Posted by ななこ at 2006.03.10 01:16 | 編集
分かりました。
質問コーナーにありました。
早速使ってます。
とても気に入ってます。
ありがとうごさいました<(＿ ＿)>ペコ
質問コーナーにありました。
早速使ってます。
とても気に入ってます。
ありがとうごさいました<(＿ ＿)>ペコ
Posted by ななこ at 2006.03.10 22:11 | 編集
初めまして。テンプレート使用させていただいてます。初歩的な質問で恥ずかしいのですが、今は記事の中の画像の後に文字を入れると画像の下に文字がうつりますよね？記事の画像の横に文字を入れるようにしたいのですが、何処を設定したらいいのですか？
Posted by ヒーナママ at 2006.05.11 23:06 | 編集
ヒーナママさんはじめまして。
テンプレートをご利用くださりありがとうございます。[にこっ]
写真|文字文字
写真|文字文字
￣￣
というようにされたいのでしょうか。
それなら<img>(画像)タグの中に
align="left"
もしくは
style="float:left;"
を入れてみてください。
例：
<img src="画像URI" align="left" />文字文字
テンプレートをご利用くださりありがとうございます。[にこっ]
写真|文字文字
写真|文字文字
￣￣
というようにされたいのでしょうか。
それなら<img>(画像)タグの中に
align="left"
もしくは
style="float:left;"
を入れてみてください。
例：
<img src="画像URI" align="left" />文字文字
初めまして♪
このテンプレートを見付けてとっても気に入って使わせて頂いてます
質問なんですが…
カレンダーの記事が書かれてる部分の色なんですが…
今のままだとグレーでちょっと太くなるぐらいですので色を変えたいのですが…
どうすれば良いのでしょうか？
このテンプレートを見付けてとっても気に入って使わせて頂いてます
質問なんですが…
カレンダーの記事が書かれてる部分の色なんですが…
今のままだとグレーでちょっと太くなるぐらいですので色を変えたいのですが…
どうすれば良いのでしょうか？
Posted by カノンママ at 2006.08.18 11:59 | 編集
何度もスイマセンm(_ _)m
後…『続きを読む』も英語とかに変えたいのですが…
ヨロシクお願いします
後…『続きを読む』も英語とかに変えたいのですが…
ヨロシクお願いします
Posted by カノンママ at 2006.08.18 12:01 | 編集
本当に何度もスイマセン(>_<)
続きを読むの部分は出来ました♪
後…コメントの部分なんですが…
色を変えたりするボタン【上みたいなの】は使えないんでしょうか？
カスタマイズは初心者なので…分からない事だらけです
ヨロシクお願いします
続きを読むの部分は出来ました♪
後…コメントの部分なんですが…
色を変えたりするボタン【上みたいなの】は使えないんでしょうか？
カスタマイズは初心者なので…分からない事だらけです
ヨロシクお願いします
Posted by カノンママ at 2006.08.18 15:53 | 編集
カノンママさんはじめまして。
テンプレートのご利用ありがとうございます。[にこっ]
まず管理メニューから「テンプレートの設定」にアクセスします。
つづいてカスタマイズしたいテンプレート名(4seasons)の欄にある[編集]をクリックしてテンプレートの編集画面に行きます。
> カレンダーの記事が書かれてる部分の色
「スタイルシートの編集」の下の枠に
.calender td a{
color:#888;
font-weight:bold;
}
という記述がございますので、ここのを
.calender td a{
color:#888;
font-weight:bold;
}
青色部分をお好きな色コードに編集して枠の下の更新ボタンを押します。
#色コードは検索すると色々と出てきますのでそちらを参照してください。
> 『続きを読む』も英語とかに変えたい
こちらは「HTMLの編集」の下の枠の中に
続きを読むという記述がありますので、ここをお好きな英語にして枠下の更新ボタンを押すと変えられます。
> 色を変えたりするボタン【上みたいなの】は使えないんでしょうか？
これは少し難しいかもしれませんが
http://blog.blog2.fc2.com/blog-entry-18.html
こちらで導入方法が詳しく説明されていますので参考になさってください。
テンプレートのご利用ありがとうございます。[にこっ]
まず管理メニューから「テンプレートの設定」にアクセスします。
つづいてカスタマイズしたいテンプレート名(4seasons)の欄にある[編集]をクリックしてテンプレートの編集画面に行きます。
> カレンダーの記事が書かれてる部分の色
「スタイルシートの編集」の下の枠に
.calender td a{
color:#888;
font-weight:bold;
}
という記述がございますので、ここのを
.calender td a{
color:#888;
font-weight:bold;
}
青色部分をお好きな色コードに編集して枠の下の更新ボタンを押します。
#色コードは検索すると色々と出てきますのでそちらを参照してください。
> 『続きを読む』も英語とかに変えたい
こちらは「HTMLの編集」の下の枠の中に
続きを読むという記述がありますので、ここをお好きな英語にして枠下の更新ボタンを押すと変えられます。
> 色を変えたりするボタン【上みたいなの】は使えないんでしょうか？
これは少し難しいかもしれませんが
http://blog.blog2.fc2.com/blog-entry-18.html
こちらで導入方法が詳しく説明されていますので参考になさってください。
ありがとうございました[にこっ]
出来ました[らぶ]
満足のカスタマイズになりました[はあと]
出来ました[らぶ]
満足のカスタマイズになりました[はあと]
Posted by カノンママ at 2006.08.20 12:39 | 編集
自分で考えたのですがなかなか出来ません＞＜
教えてください。
バックの色をすべて白にしたいのですが、どこを変えればできますか？
それから、フッターの一番下が少しずれているのですが、まっすぐするにはどうしたらいいですか？すいませんが教えてください。
教えてください。
バックの色をすべて白にしたいのですが、どこを変えればできますか？
それから、フッターの一番下が少しずれているのですが、まっすぐするにはどうしたらいいですか？すいませんが教えてください。
Posted by かずみ at 2007.01.05 23:53 | 編集
かずみさんはじめまして。
テンプレートのご利用ありがとうございます。
「バックの色を白に」というのは左右にある"影"のようなものを消したいという事でよろしいでしょうか。
それであっているなら、まずスタイルシートの body{ }の中の
background:url('http://blog11.fc2.com/c/cie/file/4seasons_body.png') repeat-y;
background-position:50% 0%;
と #footer{ }の中の
background:url('http://blog11.fc2.com/c/cie/file/4seasons_footer.png') no-repeat;
background-position:bottom;
をそれぞれ削除して保存してください。
そうすれば真っ白になります。
真っ白になればフッターの部分のズレも気にならないかと思います。
テンプレートのご利用ありがとうございます。
「バックの色を白に」というのは左右にある"影"のようなものを消したいという事でよろしいでしょうか。
それであっているなら、まずスタイルシートの body{ }の中の
background:url('http://blog11.fc2.com/c/cie/file/4seasons_body.png') repeat-y;
background-position:50% 0%;
と #footer{ }の中の
background:url('http://blog11.fc2.com/c/cie/file/4seasons_footer.png') no-repeat;
background-position:bottom;
をそれぞれ削除して保存してください。
そうすれば真っ白になります。
真っ白になればフッターの部分のズレも気にならないかと思います。
ありがとうございます♪左右の線（影のような）は残したいのです。自分でバックを白にしたらその線まで消えてしまったのです＞＜
線は残したいんですが、それは無理なのでしょうか？現在かなりうす〜い水色になってますよね。
このうす〜い水色のところだけ白にしたいのです。ややこしいことをすいません。
教えていただけないでしょうか？
とっても気に入っています（*^_^*）
線は残したいんですが、それは無理なのでしょうか？現在かなりうす〜い水色になってますよね。
このうす〜い水色のところだけ白にしたいのです。ややこしいことをすいません。
教えていただけないでしょうか？
とっても気に入っています（*^_^*）
Posted by かずみ at 2007.01.08 17:24 | 編集
なるほど、私の見込み違いでしたね。[汗2]
左右の線より中か外かにもよりますが一応両方の事を書いておきますね。
■線より外側の場合
もともと何も色の指定をしていないので薄い水色ではなく真っ白(#FFFFFF)ですので大丈夫かと思います。
もしかするとディスプレイの設定などで、青白くなってしまっているのかもしれません。
■線より内側の場合
こちらもうすい水色ではなく薄い灰色(#F8F8F8)になっています。
こちらは画像で色を指定してありますので
まず、スタイルシートの body { }の中の
background:url('http://blog11.fc2.com/c/cie/file/4seasons_body.png') repeat-y;
ここを
background:url('http://blog11.fc2.com/c/cie/file/4seasons_body_white.png') repeat-y;
このように編集し、次に #footer { }の中の
background:url('http://blog11.fc2.com/c/cie/file/4seasons_footer.png') no-repeat;
ここを
background:url('http://blog11.fc2.com/c/cie/file/4seasons_footer_white.png') no-repeat;
というように編集して保存してみてください。
これで内側の色も真っ白になります。
あとフッターのズレなんですけど、これはブログを見てみないことにはちょっと見当つきませんです。
差し支えなければコメントのURL欄にアドレスを入れていただければと思います。
左右の線より中か外かにもよりますが一応両方の事を書いておきますね。
■線より外側の場合
もともと何も色の指定をしていないので薄い水色ではなく真っ白(#FFFFFF)ですので大丈夫かと思います。
もしかするとディスプレイの設定などで、青白くなってしまっているのかもしれません。
■線より内側の場合
こちらもうすい水色ではなく薄い灰色(#F8F8F8)になっています。
こちらは画像で色を指定してありますので
まず、スタイルシートの body { }の中の
background:url('http://blog11.fc2.com/c/cie/file/4seasons_body.png') repeat-y;
ここを
background:url('http://blog11.fc2.com/c/cie/file/4seasons_body_white.png') repeat-y;
このように編集し、次に #footer { }の中の
background:url('http://blog11.fc2.com/c/cie/file/4seasons_footer.png') no-repeat;
ここを
background:url('http://blog11.fc2.com/c/cie/file/4seasons_footer_white.png') no-repeat;
というように編集して保存してみてください。
これで内側の色も真っ白になります。
あとフッターのズレなんですけど、これはブログを見てみないことにはちょっと見当つきませんです。
差し支えなければコメントのURL欄にアドレスを入れていただければと思います。
初めまして。
とっても自分の個性を出せる素敵なテンプレートで、ずっと使わせて頂いています[にこっ]
上記で■線より外側の場合は元々何も指定していないようなのですが、これに色を付けたいとというのは可能なのでしょうか。
その場合はどうすればよいのでしょうか。
とっても自分の個性を出せる素敵なテンプレートで、ずっと使わせて頂いています[にこっ]
上記で■線より外側の場合は元々何も指定していないようなのですが、これに色を付けたいとというのは可能なのでしょうか。
その場合はどうすればよいのでしょうか。
MNMさんはじめまして。
テンプレートのご利用ありがとうございます。[にこっ]
線の外側に好きな色をつけるというのは上のかずみさんのケースと同様に、画像を編集してアップロードし、スタイルシートの該当部分を書き直すといった作業が必要です。
お気に召すかは保証できませんが、具体的に色などを指定していただければこちらで画像を作り、スタイルシートの編集箇所なども書かせてもらいますよ。
テンプレートのご利用ありがとうございます。[にこっ]
線の外側に好きな色をつけるというのは上のかずみさんのケースと同様に、画像を編集してアップロードし、スタイルシートの該当部分を書き直すといった作業が必要です。
お気に召すかは保証できませんが、具体的に色などを指定していただければこちらで画像を作り、スタイルシートの編集箇所なども書かせてもらいますよ。
お返事ありがとうございます。
そうですね、上記のかずみさんと同じでサイドのバーは消さずに、その後ろのバックの白を色付きもしくは柄付きにしたいのです。（未だ構想中です）
ご好意大変嬉しいのですが、勉強の為に自分でやろうかと思っています。汗]
画像をアップロードして、スタイルシートのどの部分を編集すればいいのか教えて頂けますか？
そうですね、上記のかずみさんと同じでサイドのバーは消さずに、その後ろのバックの白を色付きもしくは柄付きにしたいのです。（未だ構想中です）
ご好意大変嬉しいのですが、勉強の為に自分でやろうかと思っています。汗]
画像をアップロードして、スタイルシートのどの部分を編集すればいいのか教えて頂けますか？
MNMさんこんにちは。
スタイルシートは body { } の
background: url('http://blog11.fc2.com/c/cie/file/4seasons_body.png') repeat-y;
background-position:50% 0%;
ここらへんを編集してみてください。
わからないことがありましたら気軽に質問どうぞです。
スタイルシートは body { } の
background: url('http://blog11.fc2.com/c/cie/file/4seasons_body.png') repeat-y;
background-position:50% 0%;
ここらへんを編集してみてください。
わからないことがありましたら気軽に質問どうぞです。
いつもcieさんのテンプレート使わせてもらっていますm(_ _)mありがとうございます。
質問なのですが、
トップ画像をクリックするとトップに戻るようにしたいのですが、
どのようにカスタマイズすれば良いでしょうか。
自分なりに考えたりもしましたがさっぱり分かりませんでした。
お時間があればぜひよろしくお願いします。
質問なのですが、
トップ画像をクリックするとトップに戻るようにしたいのですが、
どのようにカスタマイズすれば良いでしょうか。
自分なりに考えたりもしましたがさっぱり分かりませんでした。
お時間があればぜひよろしくお願いします。
真理絵さんこんにちは。[にこっ]
ご利用ありがとうございます。
スタイルシートを編集する場合。
#banner {} の中の height:320px; を height:350px; にします。
次に .blogtitle {} の中を
font-size:16px;
font-weight:bold;
text-align:left;
だけにして、
.blogtitle a {
display:block;
padding: 327px 0 2px 20px;
_height: 327px;
background:url('http://blog11.fc2.com/c/cie/file/4seasons_blogtitle.png') repeat-x 0 100%;
}
こちらを追加してみてください。
----
HTMLを編集する場合。
<div id="banner">
<h1 class="blogtitle"><a href="./" accesskey="1"><%blog_name></a></h1>
<div class="description"><%introduction></div>
</div>
ここを
<a href="./" accesskey="1"><div id="banner">
<h1 class="blogtitle"><%blog_name></h1>
<div class="description"><%introduction></div>
</div></a>
こんな感じに編集します。
----
一応どちらの方法でも写真の部分もクリックできるようになるはずですので、お好きなほうを選んでやってみて下さい。
ご利用ありがとうございます。
スタイルシートを編集する場合。
#banner {} の中の height:320px; を height:350px; にします。
次に .blogtitle {} の中を
font-size:16px;
font-weight:bold;
text-align:left;
だけにして、
.blogtitle a {
display:block;
padding: 327px 0 2px 20px;
_height: 327px;
background:url('http://blog11.fc2.com/c/cie/file/4seasons_blogtitle.png') repeat-x 0 100%;
}
こちらを追加してみてください。
----
HTMLを編集する場合。
<div id="banner">
<h1 class="blogtitle"><a href="./" accesskey="1"><%blog_name></a></h1>
<div class="description"><%introduction></div>
</div>
ここを
<a href="./" accesskey="1"><div id="banner">
<h1 class="blogtitle"><%blog_name></h1>
<div class="description"><%introduction></div>
</div></a>
こんな感じに編集します。
----
一応どちらの方法でも写真の部分もクリックできるようになるはずですので、お好きなほうを選んでやってみて下さい。
はじめまして、こちらのテンプレートを利用させていただいています。
とても気に入っています。
カスタマイズしたくてコメントを参考に自分なりに色々と操作してみました。
そこでどうしても出来ないのが記入した日付の位置の変更です。
↓オリジナルテンプレート
--------------
記事の日付
記事タイトル
記事本文
--------------
となっているのを
↓希望��
--------------
記事タイトル
記事の日付
記事本文
--------------
とスタイルに変更したいのですが
どうにも上手くいかないのです。
また別のパターンも可能でしょうか？
↓希望��
--------------
記事タイトル(サイズはやや大きめ) 記事の日付(フォントサイズはやや小さめで）
記事本文
--------------
それらしい箇所を消したり移動させたりしてみたのですが
日付の位置は変わらずフォントサイズが大きくなったり
形が崩れてしまったり・・・。お手上げになってしまいました。
初歩的なことをお聞きしてるとおもうのですが御助力をお願いしたします。[泣]
とても気に入っています。
カスタマイズしたくてコメントを参考に自分なりに色々と操作してみました。
そこでどうしても出来ないのが記入した日付の位置の変更です。
↓オリジナルテンプレート
--------------
記事の日付
記事タイトル
記事本文
--------------
となっているのを
↓希望��
--------------
記事タイトル
記事の日付
記事本文
--------------
とスタイルに変更したいのですが
どうにも上手くいかないのです。
また別のパターンも可能でしょうか？
↓希望��
--------------
記事タイトル(サイズはやや大きめ) 記事の日付(フォントサイズはやや小さめで）
記事本文
--------------
それらしい箇所を消したり移動させたりしてみたのですが
日付の位置は変わらずフォントサイズが大きくなったり
形が崩れてしまったり・・・。お手上げになってしまいました。
初歩的なことをお聞きしてるとおもうのですが御助力をお願いしたします。[泣]
はじめまして。
すごく気に入ったので、色々と編集して使おうと思ってます。初心者なので教えいただきたいのですが、「記事へのコメント」をするときの項目に、絵文字とかプレビューを付けたいのですがどうすればなるのでしょうか。
（今、このコメントを書きこんでいる物と同じようにしたいのですが・・・。）
すごく気に入ったので、色々と編集して使おうと思ってます。初心者なので教えいただきたいのですが、「記事へのコメント」をするときの項目に、絵文字とかプレビューを付けたいのですがどうすればなるのでしょうか。
（今、このコメントを書きこんでいる物と同じようにしたいのですが・・・。）
鈴乃さん、ｇｉｎｇａさん、はじめまして。
テンプレートのご利用ありがとうございます。
先に鈴乃さんからレスさせてもらいますね。ｇｉｎｇａさんへのレスはひとつしたのコメントに書きますので。
まず、希望１についてですが、HTMLテンプレートの
<div class="date"><%topentry_year>.<%topentry_month>.<%topentry_day></div>
<div class="blogbody">
<h2 id="a<%topentry_no>" class="title"><%topentry_title></h2>
<div class="main">
この部分を
<div class="blogbody">
<h2 id="a<%topentry_no>" class="title"><%topentry_title></h2>
<div class="date"><%topentry_year>.<%topentry_month>.<%topentry_day></div>
<div class="main">
このように移動させてあげてください。
つぎに希望２のほうはスタイルシートの
.date{
font-size:0.65em;
font-weight:normal;
padding:0px 0px 1px 5px;
margin:10px 0px 5px;
text-align:left;
letter-spacing:2px;
}
ここを
.date{
font-size:0.65em;
font-weight:normal;
padding:0px 5px 1px 0px;
margin:10px 0px -25px;
text-align:right;
letter-spacing:2px;
}
このように変えてもらえれば、記事タイトルの右側に日付が表示されるようにできます。
こちらの場合、記事タイトルが長いと日付とかぶってしまいますのでご注意ください。
文字のサイズは
.date {}, .title {} 内のそれぞれのfont-size: 〜〜em;
を好みに合わせて変更してください。
テンプレートのご利用ありがとうございます。
先に鈴乃さんからレスさせてもらいますね。ｇｉｎｇａさんへのレスはひとつしたのコメントに書きますので。
まず、希望１についてですが、HTMLテンプレートの
<div class="date"><%topentry_year>.<%topentry_month>.<%topentry_day></div>
<div class="blogbody">
<h2 id="a<%topentry_no>" class="title"><%topentry_title></h2>
<div class="main">
この部分を
<div class="blogbody">
<h2 id="a<%topentry_no>" class="title"><%topentry_title></h2>
<div class="date"><%topentry_year>.<%topentry_month>.<%topentry_day></div>
<div class="main">
このように移動させてあげてください。
つぎに希望２のほうはスタイルシートの
.date{
font-size:0.65em;
font-weight:normal;
padding:0px 0px 1px 5px;
margin:10px 0px 5px;
text-align:left;
letter-spacing:2px;
}
ここを
.date{
font-size:0.65em;
font-weight:normal;
padding:0px 5px 1px 0px;
margin:10px 0px -25px;
text-align:right;
letter-spacing:2px;
}
このように変えてもらえれば、記事タイトルの右側に日付が表示されるようにできます。
こちらの場合、記事タイトルが長いと日付とかぶってしまいますのでご注意ください。
文字のサイズは
.date {}, .title {} 内のそれぞれのfont-size: 〜〜em;
を好みに合わせて変更してください。
つづいて、ｇｉｎｇａさんへのレスです。
うちで使用しているコメントプレビュー機能は、 stroll::blog さんの
stroll::blog | コメントをプレビュー表示
http://melrose.jugem.cc/?eid=143
を使用させていただいてます。
個々のブログサービスによって若干使い方が違いますが、「FC2 ブログ コメントプレビュー」などで検索すると、FC2ブログ用の参考記事がいろいろと引っかかりますので、そちらを参考にされたほうがよろしいかと思います。
あと、テキストはプレビューされますが、絵文字や文字装飾はプレビューされませんです……
うちで使用しているコメントプレビュー機能は、 stroll::blog さんの
stroll::blog | コメントをプレビュー表示
http://melrose.jugem.cc/?eid=143
を使用させていただいてます。
個々のブログサービスによって若干使い方が違いますが、「FC2 ブログ コメントプレビュー」などで検索すると、FC2ブログ用の参考記事がいろいろと引っかかりますので、そちらを参考にされたほうがよろしいかと思います。
あと、テキストはプレビューされますが、絵文字や文字装飾はプレビューされませんです……
[ぱちぱち]ありがとうございました！！
できました〜！！！
タイトルと日付をもう少しくっつけたいとは思いますが、満足しています[にこっ]
！
できました〜！！！
タイトルと日付をもう少しくっつけたいとは思いますが、満足しています[にこっ]
！
立て続けに申し訳ございません。
コメント（本文）のサイズを変更したい場合はスタイルシートのほうをさわるのでしょうか？
それともHTMLのほうでしょうか？
一応スタイルシートの下記↓の部分をいじってみたのですが
変化がみられなかったので・・・。
}/* コメント本文 */
.comments-body{
font-size:0.65em;
margin:0px 0px 15px 10px;
padding:0px 0px 0px 5px;
letter-spacing:2px;
word-break:break-all;
申し訳ございません、もう一度ご助力お願い致します[泣]
コメント（本文）のサイズを変更したい場合はスタイルシートのほうをさわるのでしょうか？
それともHTMLのほうでしょうか？
一応スタイルシートの下記↓の部分をいじってみたのですが
変化がみられなかったので・・・。
}/* コメント本文 */
.comments-body{
font-size:0.65em;
margin:0px 0px 15px 10px;
padding:0px 0px 0px 5px;
letter-spacing:2px;
word-break:break-all;
申し訳ございません、もう一度ご助力お願い致します[泣]
お返事ありがとうございました。
色々試してみたんですが、余りに私が初心者過ぎて、難しくて・・・。もうちょっと勉強してからにします[泣]
色々試してみたんですが、余りに私が初心者過ぎて、難しくて・・・。もうちょっと勉強してからにします[泣]
返信が遅くなって申し訳ありません。いろいろありまして対応が遅れてしまいました。ごめんなさい。[泣]
>> 鈴乃さん
見た目は基本的にスタイルシートをさわってあげてください。
font-size:0.65em;
ですので、ここの数値を変更すればOKです。
ただ、変更した数値が少ないとあまり変化を体感できませんので、0.8em 1em 1.3em などなど試してみてください。
>> ｇｉｎｇａさん
がんばってください。[さむあっぷ]
>> 鈴乃さん
見た目は基本的にスタイルシートをさわってあげてください。
font-size:0.65em;
ですので、ここの数値を変更すればOKです。
ただ、変更した数値が少ないとあまり変化を体感できませんので、0.8em 1em 1.3em などなど試してみてください。
>> ｇｉｎｇａさん
がんばってください。[さむあっぷ]
お礼を言うのが遅くなってしまいました（＾＾；）
ありがとうございました！無事カスタマイズ終了したしました！！！
ありがとうございました！無事カスタマイズ終了したしました！！！
Posted by 鈴乃 at 2007.10.30 00:14 | 編集
始めまして。本日より「4seasons」使わせてもらってます。トップ画像は私の撮りました写真を使用させてもらいました。自分の画像が使え、テンプレもシンプルで大変気に入っています。ありがとうございました。何か問題点ございましたらお知らせください。
画像が入れ替わるようにするにはCSSの画像変更部分をどのようにすればいいのでしょうか？
初歩的な質問ですみません。
初歩的な質問ですみません。
Posted by お気楽ママ at 2008.02.11 18:47 | 編集
この記事へコメントする
| HOME |
Recent Entries
Recent Comments
Recent Trackbacks
Archives
Categories
Tags
Links
Profile
cie
普段はlivedoor Blog用のテンプレートを作っています。コンテストに釣られて浮気。
本家はLinksのbuena suerte!からどうぞです。
本家はLinksのbuena suerte!からどうぞです。
Credit
Powered By FC2 BLOG