division

見たまんまシンプルなテンプレートです。
livedoor Blogですでに配布しているものをFC2用に移植してみました。
上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。
オススメカスタマイズ
全体の背景(灰色)
#body{
(中略)
background:#ccc;
}
ブログタイトルの背景(オレンジ色)
#banner{
(中略)
background:#fc3;
}
横型カレンダーの背景(薄い灰色)
#calendar{
(中略)
background:#ddd;
}
ブログ本文の背景(白色)
.blog{
(中略)
background:#fff;
}
サイドバーの背景(白色)
#links{
(中略)
background:#fff;
}
これらの赤文字部分をそれぞれお好きな色に変更して色々と試してみてはいかがでしょうか。
また、それぞれのボーダーの幅や色も調節してみてください。
ダウンロードしてそのままお使いになるよりは個性がでて良いとおもいますよ。
このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。
画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。
このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。
制作環境は以下の通り。
OS:WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ:InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ:中
この記事へのトラックバックURL
http://cie.blog11.fc2.com/tb.php/18-7029439e
この記事へのトラックバック
こんにちは。「division」を使わせていただいてます。かなりお気に入りです。
質問させてください。ブログの本文中にある英語の文章にワードラップをかけるにはどうすればよいのでしょうか。つまり、空白以外の半角の文字の途中で折り返しを行わないようにしたいのですが。
sputnikさんはじめましてこんにちは。
テンプレートをご利用くださりありがとうございます。[にこっ]
> 本文中にある英語の文章にワードラップをかけるにはどうすればよいのでしょうか
CSSの .main{ }の中の
word-break:break-all;
という一文を削除して保存してもらえればワードラップがかかるようになります。
長いURLや長い単語などが本文にあるとIEではよく崩れて表示されてしまうので、意図的に単語の途中でも改行されるように設定していました。[汗2]
他にもコメント本文(.comments-body)やトラックバック本文(.trackback-body)、サイドメニュー部(.side)、引用タグ(blockquote)にも同じように設定してありますので必要に応じて削除して下さいませ。
教えていただいた方法で、ワードラップがかかるようになりました。ありがとうございます。
これからも素敵なテンプレートを期待してます。
質問させてください。
未来日付での投稿意外に、一部の記事を、ブログ上部に表示させる方法があれば教えて頂きたいのですが、いかがでしょうか?表示させたい記事だけ、日付抜きにしたいのですが・・・。
M'zさんはじめまして。
日付抜きですとHTMLテンプレートに直接記述する方法しか無いと思います。
<!-- エントリー -->
の上に
<div class="blogbody">
<h2 class="title">タイトル</h2>
<div class="main">
ここに本文
</div>
<div class="posted">
Posted at <a href="記事のURL">00:00</a>
| <a href="カテゴリのURL">カテゴリ名</a>
| <a href="記事のURL#comments">COM(0)</a>
| <a href="記事のURL#trackback">TB(0)</a>
| <a href="#top">↑</a>
</div>
</div>
と入れてみてください。
ただこの方法ですとコメントやトラックバックの数はご自分で手作業で更新していくしかありません。
>cie さん
ご丁寧にありがとうございました。
変更できました。
度々すいません。また質問してもよろしいですか?
上記方法で、日付抜きで表示させる事ができましたが、この表示された記事のフィールドと、通常の記事フィールドを、切り離して表示させる方法はありますでしょうか?ありましたらお教え下さい。
宜しくお願いします。
なるほど。情報を載せる為に切り離して使いたいという感じなんですね。
それであればHTMLテンプレートの
<!-- エントリー -->
の上ではなく
<div class="blog">
の上に
<div id="info">
<div class="blogbody">
<h2 class="title">タイトル</h2>
<div class="main">
ここに本文
</div>
</div>
</div>
をいれ、CSS側に
#info {
padding-left: 20px;
padding-right: 20px;
background: #fff;
border: solid #000;
border-width: 1px 3px 3px 1px;
margin-bottom: 20px;
}
#info .blogbody {
padding: 15px 0;
border: 0;
}
を追記します。
これで切り離された状態で表示されます。
#あと</br>ではなく<br />ですよー。[ちゅうい]
cie さん
<div class="blog">の上に入れるところまではできましたが、CSS側にいれるところはまだです。
CSS側とはどこになりますか?
それと、切り離し部分の背景がグレー色の状態になっています。
素人なもので、ご迷惑おかけいたして本当にすいません。宜しくお願いします。
すいません、解決いたしました。
本当にありがとうございました。
このテンプレート好きなので、
これらも使わせていただきます。
cieさん テンプレートを気に入って使わせて頂いております。
ありがとうございます。
それで ひとつ質問です(PCには詳しくない私です)
blogタイトルの字を大きく出来るのでしょうか?
ついでに色も指定出来るのかな?
[わかば] どうぞ 宜しく[ねこ]
シニアさんこんにちは。
テンプレートのご利用ありがとうございます。[にこっ]
どちらもテンプレートの編集から「スタイルシート」の下の枠の中を編集すれば実現できます。
> blogタイトルの字を大きく
.blogtitle{ }の間に
font-size: 16px;
という記述がございますので、数値(16の所)を大きくしてみてください。
> 色も指定
.blogtitleのすぐ上に
#banner a:link{color:#000;text-decoration:none;}
という記述があります。
ここの
color:#000;
ここの色コード(#000の部分)を変更してみてください。
この色コード関しましては
スタイルシート カラー
でヤフーやグーグルなどで検索しますと参考になるサイトがたくさん出てきますのでそちらをご覧になってください。
わからない所がありましたら、また質問してくださいませ。
cieさん ありがとうございました[にこっ]
タイトルを大きくしましたが
文字色は またゆっくりと 考えようかと
思ってます。
取り急ぎ お礼まで。
はじめまして
このたびdivisionをダウンロードさせていただきました
上部に走るカレンダーがとても素敵で他の部分もとても使い易かったです
少しカスタマイズさせて頂いたのでご報告に伺いました
他のテンプレートもシンプルでスマートな感じがしてかっこいいです
これからも製作の方がんばってくださいませ
それでは失礼いたします
はじめまして、divisionをダウンロードしました。
シンプルで文字も見やすく、カッコイイですね。
質問なのですが、
記事の最後(1番下)に、Posted at (時間・コメント数など)
とあって、その下に
この記事へのトラックバックURL
この記事へのトラックバック
この記事へのコメント
の3つがありますが、
この記事へのトラックバックURLと
この記事へのトラックバックを消す事はできますか?
よろしければ教えてください。
マサさんはじめまして。
テンプレートのご利用ありがとうございます。
> この記事へのトラックバックURLとこの記事へのトラックバックを消す事はできますか?
トラックバック機能自体が必要なければ、管理画面の「環境設定の変更」項目の「記事投稿時の基本設定」から「トラックバック」を「受け付けない」に設定すれば、文字も消えますし、トラックバックも使えなくなると思います。
わかりました^^
ありがとうございます☆
cieさん お気に入りで 2006年の5月に
教えて頂いてから 変更してから すっかり気にいってます[にこっ]
最近、.ちょっと欲が出ましてね・・・
もう少し 大きい画像が貼れたらな〜〜と・・・。
私のような [わかば]パソコン音痴にも 出来るかな?
どうぞ 宜しく お願い致します
シニア さんこんばんは。
livedoor の方にも書きましたが、メイルで回答させていただきました。遅くなってスミマセンでした。[泣]
cieさん ありがとうございました[にこっ]
私のような[わかば]PC音痴にも良く解る説明で助かりました。
早速 やってみました[はあと]
いつも お世話になり助かってます。
いつも気に入って使わせていただいています。
今まで何度かあったのですが、2カラムタイプの場合、右側のカラムが突然サイズが変わるのか、、平行に並んでいたのが左カラムの下に下がってしまいます。原因はありますでしょうか。
パソコンは詳しくありません。よろしくお願いします。