fc2ブログ
2005.05.29

plain

plain共有テンプレートにもう一つエントリーしてみました。
名前の通り比較的シンプルなビジュアルなので文字色などお好きにカスタマイズしてくださいませ。

テンプレートの設定 → テンプレートの追加 → ユーザ共有テンプレートから追加 → P → plainから選択できます。



CSSの中の#bannerのところの
#banner{
 width:800px;
 height:200px;
 background-color:#369;
 background-image:url('http://blog-imgs-29.fc2.com/c/i/e/cie/plain_banner.png');
 background-repeat:no-repeat;
 text-align:left;
}
赤い文字のところを変えるとブログのタイトルの後ろの色(プレビュー画像の青色のところ)が変わります。
これだけでも印象が変わるのでお好きな色に変えてみてください。


このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。

このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。

制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.4、Opera8、Netscape7.1
IE使用時の文字サイズ：中か小
スポンサーサイト




Posted at 23:32 | Template | COM(25) | TB(0)
この記事へのトラックバックURL
http://cie.blog11.fc2.com/tb.php/8-33d13269
この記事へのトラックバック
この記事へのコメント
こんにちは。テンプレートをお借りしています。
記事の文字を小に設定してるのですが小さくなりません。
何か設定しなければならないのでしょうか？
教えてほしいのですが。宜しくお願いします。
Posted by kukimi at 2005.06.01 16:13 | 編集
kukimiさんこんばんは。

<span style=font-size:x-small>とされていますが
元々記事(.main)の文字サイズがx-smallなので変化しないと思います。
なので
<span style="font-size:xx-small";>
としてみてください。
Posted by cie at 2005.06.01 22:43 | 編集
cieさんこんにちは。
お返事、ありがとうございます。
文字が小さくなりました。
Posted by kukimi at 2005.06.02 14:00 | 編集
テンプレートをお借りしています。

質問です。

右メニューの色を
リンク→青
マウスをのせたとき→赤
既訪問先→紫

にしたいのですが、どこを変更すればよいのでしょうか
教えてください。
Posted by 平山 at 2005.09.16 10:44 | 編集
平山さんご利用ありがとうございます。

リンク色を変更する場合、CSS部分を編集してください。
(コメント欄だと強制改行されますが、それぞれ}まで1行で書いていますのでメモ帳などに貼り付けて編集された方がわかりやすいかもしれません。)
---
.side li a, .side li a:link, .side li a:visted{color:#999;text-decoration:none;}
.side li a:hover, .side li a:focus, .side li a:active{color:#ccc;text-decoration:underline;}
---
このような記述がありますので、この2行を削除した後、
---
.side li a, .side li a:link{color:blue;text-decoration:none;}
.side li a:visted{color:purple;text-decoration:none;}
.side li a:hover, .side li a:active{color:red;text-decoration:underline;}
---
この3行を入れて保存してください。
Posted by cie at 2005.09.17 12:39 | 編集
お返事ありがとうございます。

ご説明の通りやってみました。しかし、マウスをのせたときは赤になるのですが、それ以外は変化なしです。

お忙しいところ大変申し訳ありません。
Posted by 平山 at 2005.09.19 04:24 | 編集
平山さんすみません。スペルミスがありました。[泣2]
それと個別に指定しないとスタイルが効かないみたいなので
--
.side li a{color:blue;text-decoration:none;}
.side li a:link{color:blue;text-decoration:none;}
.side li a:visited{color:purple;text-decoration:none;}
.side li a:active{color:red;text-decoration:underline;}
.side li a:hover{color:red;text-decoration:underline;}
--
このようにしてください。これで変わると思います。
Posted by cie at 2005.09.19 11:46 | 編集
できました。
ありがとうございました。感謝いたします。

今後ともよろしくお願いいたします。
Posted by 平山 at 2005.09.20 05:39 | 編集
テンプレお借りしました。News系などもエントリーしたかったのでこういう落ち着いた感じは最高です。

このシリーズは続くのでしょうか？
作品を楽しみにしています。
Posted by KGO at 2005.09.30 19:53 | 編集
KGOさんはじめまして。
「テンプレートの追加」画面でのPlainのコメントとても嬉しかったです。ありがとうございます。

> このシリーズは続くのでしょうか？
シリーズ？ではありませんが、記事がメインの落ち着いたテンプレートを作るよう常に心がけております。
今はあまり時間が割けないのですぐにとはいきませんが、そのうち作っていきたいです。
ただlivedoorからの移植が先になるかと思いますのでそれが終ってからになりますね。
Posted by cie at 2005.10.12 11:41 | 編集
テンプレートをお借りしています、平山です。

リンク先を同じウィンドウで開きたいのですが、方法を教えていただけないでしょうか？

お忙しいところ申し訳ありません。
お手すきのときで結構です。

http://zenritusen502.blog24.fc2.com/blog-category-27.html
Posted by 平山 at 2005.10.13 11:12 | 編集
平山さんこんばんは。

> リンク先を同じウィンドウで開きたいのですが
記事を編集して頂ければわかりますが、記事本文のリンク部分が
<a href="URI" target="_blank">文字文字文字</a>
というようになっていますので赤文字の所を削除して保存してもらうと同じウィンドウに表示されますです。
Posted by cie at 2005.10.15 23:15 | 編集
できました。ありがとうございます。

いつも丁寧にご説明いただきありがとうございます。
大変助かりました。
Posted by hira at 2005.10.17 13:37 | 編集
cieさん、こんにちは！いつもお世話になっております！

相変わらずPlainを愛用させて頂いてますが、初めてFirefox最新verをDLして自分のページを見たところ、記事の文字がやたら大きく楷書体のようになっていて、逆にサイドの文字はIEで見るより小さく見えました。IEとほぼ同じように見えるようにする対策ってありますか？もしあったらでいいんですが、教えていただいてもいいでしょうか・・・？

P.S.Livedoorからの移植お疲れ様でした。また気が向いたらFC2でもまたテンプレート作ってくださいね～。
Posted by Mimi at 2005.11.10 19:32 | 編集
Mimiさんこんばんは。

> IEとほぼ同じように見えるようにする対策ってありますか？
あります。
実はlightcyanからフォントの指定法をブラウザ間で違いが出にくい指定方法に変えてました。
それまで配布していたborder,plain,several line,pinkish lineについてもフォント指定の修正は済んでいたんですが、移植作業の区切りが付いてしまって安心したのかテンプレートの更新をするのをど忘れしてしまいました。[汗2]

先ほどそれぞれのテンプレートを更新してきましたので、お手数ですがもう一度ダウンロードしてみて下さい。
ご指摘感謝いたします。[にこっ]

#例の引用でPタグを使うとマージンなどが減っていく現象も解決策見つけたので修正してます。[さむあっぷ]
Posted by cie at 2005.11.11 01:42 | 編集
cieさん、

いつも親切に答えてくださってありがとうございます！再度ダウンロードして、見事成功しました。ただ、画像をalign="left"で左において、文章をその横に配置、というのを良くしていますが、Firefoxだと、画像が若干、右の文章より下がっているようです。もし、これも直るようでしたらご教授下さい。
（http://butterflied.blog35.fc2.com/）

で、本サイトの方を早速直そうと思ったら・・・早速テンプレートをダウンロードしてから作業をしようと思いましたら、サイドバーのコメントのタイトルが、ソースでは英語（Recent Comments）になっているのに、表示してみると日本語「最近のコメント」になっていたり、表示するとRSSフィードがあるのにソースにはなかったりしました。上記の二つ目のブログを直していた時はそういうのはなかったんですが・・・（表記は英語で、RSSフィードはなしです。）

いつもいつも申し訳ありませんが、何か分かりましたら教えて下さい！
Posted by Mimi at 2005.11.11 12:16 | 編集
何度もすみません！！！またやってしまいました・・・思い切り勘違いしました。もうひとつの方は、プラグインが有効になっていたのです。無効にして解決しました。無事Firefoxでも希望通りの見た目になりました。画像の件だけ、もし解決できたらお願いします。

＞#例の引用でPタグを使うとマージンなどが減っていく現象も解決策見つけたので修正してます
覚えていてくださってありがとうございました！ありがたいです！！

（余計なコメントを増やしてしまったので、削除してくださって構いません！）

本当にお騒がせしました！
Posted by Mimi at 2005.11.11 16:28 | 編集
Mimiさんこんにちは。
以前はプラグインに対応してなかったのですこしややこしかったですかね。
そういえば私もプラグインが使えるようになった時同じような事をしてたような・・・[笑]

画像の件ですがCSSの .main img{ }にある
margin:5px 8px 3px 0px;
の赤文字の所を3pxくらいにすると文章と同じ高さくらいになると思います。

真ん中のコメントだけ削っておきますね。[さむあっぷ]
Posted by cie at 2005.11.12 11:09 | 編集
cieさん、

こんにちは！早速やってみました！無事成功です。どうもありがとうございました～[さむあっぷ]、嬉しいです。

コメントの件、ありがとうございます。お手数おかけしました。

また何かありましたら宜しくお願いしますね！
Posted by Mimi at 2005.11.12 16:29 | 編集
はじめまして。素敵なテンプレートですので是非使わせていただきたいのですが、コメントにタイトルを入れるにはどうしたらいいでしょうか？

いきなり質問すいません。お返事お待ちしております。
Posted by teru at 2005.11.13 06:44 | 編集
teruさんはじめまして。
テンプレートをご利用くださりありがとうございます。[にこっ]

> コメントにタイトルを入れるにはどうしたらいいでしょうか？
まずHTMLテンプレート部の
<!--comment-->
<div id="comment<%comment_no>" class="comments-body"><%comment_body></div>
ここを
<!--comment-->
<div class="comments-title" id="comment<%comment_no>"><%comment_title></div>
<div class="comments-body"><%comment_body></div>
に変更します。
次に投稿フォーム部の（少しわかりにくいかもしれません)
<tr>
<td valign="top"><label for="comment">コメント: </label></td>
の直前に
<tr>
<td valign="top"><label for="title">タイトル: </label></td>
<td><input id="title" name="comment[title]" value="" /></td>
</tr>
を入力。（編集フォームにも同じように入力してください）

続いてCSS部に
#title{width:250px;border:1px solid #333;}
と
.comments-title{
font-size:0.8em;
font-weight:bold;
margin:5px 5px 0px 8px;
padding:5px 5px 0px 8px;
background:#fafafa;
}
を追記。
.comments-body{ }内の
margin:5px 5px 0px 8px;
の赤文字部分を0pxにして保存してください。
これでタイトルの入力欄、そしてコメント欄にコメントタイトルが表示されるはずです。

#本当は投稿フォームのtabindexなどの調整が必要ですがすごく長くなるので割愛しました。
Posted by cie at 2005.11.14 00:33 | 編集
Cieさん、こんにちは！

またまた質問させてください。

いつも、自サイトはIEで見ていて、文字サイズは中にしていましたが、それを小にすると、極端に文字が小さくなってしまう事が分かりました。こちらや、その他のサイトなどは、中と小でそれほど見た目が変わらないので、私が何かまたやってしまったのかなーとも思うのですが[泣]

対応策ありましたら、お手数ですが宜しくお願い致します！！
Posted by Mimi at 2005.12.05 17:23 | 編集
Mimiさんこんばんわ。

私も最近気付いたのですが、body要素にフォントサイズを1emで指定していると、Mimiさんがお書きになったように極端に文字サイズが変わってしまいます。

毎度毎度お手数ではありますが、body{ }の中にある
font-size:1em;
を100%にして保存しなおしてください。
これでIEでもそれほど極端にはならないと思います。
Posted by cie at 2005.12.05 22:55 | 編集
早速の回答ありがとうございました！教えて頂いたとおりにやってみたら、無事解決しました。
いつもありがとうございます[にこっ]

また何かありましたら、その時は宜しくお願いいたしますね。
Posted by Mimi at 2005.12.05 23:36 | 編集
テンプレートお借りしました。
それとアレンジさせていただきました。
あまりにも原型を留めていないところ申し訳なく思います。

CieさんのValid志向のシンプルテンプレートは信用できます！
さらにカッコいいテンプレ期待してます。頑張ってください！！
有り難うございました。
Posted by Murata at 2008.01.27 15:55 | 編集
この記事へコメントする
ご利用のブラウザ、設定ではご利用になれません。
  コメントが反映されない現象が起こっているようですので お手数ですが「書込」ボタンを押される前に本文を全てコピーしておいて下さい。
書き込み後はコメントが反映されているかどうか確認をお願い致します。
 
| HOME |
PAGE TOP↑