FC2 blog web素材「はっぴ〜★フリー」

happy-toall-3cを少し手直しして白背景にしたものです
happy-toall同様小粋空間さんで配布されいてる折り畳みスプリクトを使用させていています。

• [03-10 17:45] [
• FC2用テンプレート　テンプレート] [
• コメント (0) ] [
• トラックバック (0) ]

ikkanさんから質問いただいた白背景用cssです。 コピーして差し替えてお使いください。

ＣＳＳ↓
@charset "euc-jp"; /* CSS Document */ * { box-sizing : border-box} * { -moz-box-sizing : border-box} * { margin : 0; padding : 0; } body { color : #000000; background: url("http://blog-imgs-18.fc2.com/h/a/p/happyfree/2.gif"); line-height : 1.2; font-size : 13px; font-family : "Verdana", "ＭＳ ゴシック", "Osaka"; font-style : normal; font-weight : normal; scrollbar-base-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #ff0000; scrollbar-arrow-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-face-color: #ffffff; } h2,h3 { color : #FF4949; text-align : center; font-size:14px; font-weight : bold; margin-top: 10px; } a.foldmark { float : right; font-size:10px; text-decoration: none; color : #666666; margin : 3px 5px 0px 0px; } span.cat{ float : right; width : 20px ; font-size:10px; } div#wrapper2 a.cat{ font-size:10px; color : #7D7C76; } /* リンクなど ------------------------------------------------------------ */ a { text-decoration : none; color : #000000; } a:hover { text-decoration : none; color : #cc6699; } a img { border-style : none; border-width : 0px; text-decoration : none; } /* ベース ------------------------------------------------------------ */ div#bese{ text-align : left; width : 860px ; margin: auto; border-right : 2px solid #7E7E7C; background: url("http://blog-imgs-18.fc2.com/h/a/p/happyfree/4.gif") repeat-y #ffffff; } /* タイトル ------------------------------------------------------------ */ div#titl{ float : left; width : 685px; } h1 { color : #000000; margin: 0px 5px 0px 40px; font-size : 16px; font-weight : bold; } div.sukihana{ float : left; width : 420px; margin: 10px 0px 15px 10px; background: url("") no-repeat; } p.introduction { color : #000000; text-align : center; margin : 5px 0px 5px 30px; } /* 検索 ------------------------------------------------------------ */ div#searchs{ float : right; width : 200px; margin-top:0px; } input#search { color :#000000; border-width:2px; background: transparent; text-align : center; width : 100px; margin-top:30px } input.searchimg{ margin: 18px 5px 0px 0px; } p.admin { margin: 0px 5px 0px 60px; float : right; border-left :1px solid #7E7E7C; border-bottom :2px solid #7E7E7C; padding : 0px 5px; width : 50px; text-align : center; } /* カレンダー calendar ------------------------------------------------------------ */ div#wrapper1 { float : left; color : #000000; width : 675px; background: #ff0000; border-bottom : 1px solid #7E7E7C; border-right : 2px solid #7E7E7C; margin: 0px 0px 0px 8px; } div#wrapper1 a{ color : #ffffff; } div#wrapper1 a:hover { text-decoration : none; color : #cc6699; } p.calendar { color : #B9CDE1; text-align : center; } ul.calendar { float : left; width : 670px; text-align : center; border-bottom : 1px solid #000000; list-style-position : inside; padding : 2px 0; background: #ff0000;} ul.calendar li { display : inline; list-style-type : none; margin: 0px 3px 0px 0px; } /* サイド ------------------------------------------------------------ */ div#wrapper2 { float : left; width : 180px; margin: 5px 0px 0px 8px ; text-align : center; } div#wrapper2 a { text-decoration : none; color : #3366cc; } div#wrapper2 a:hover { text-decoration : none; color : #cc6699; } div#wrapper4 { float : right; width : 160px; margin: 5px 2px 0px 0px ; text-align : center; } div#wrapper4 a { text-decoration : none; color : #3366cc; } div#wrapper4 a:hover { text-decoration : none; color : #cc6699; } a.kiyaku { text-decoration : none; color : #ff0000; } a.kiyaku hover { text-decoration : none; color : #cc6699; } h2.sidet { text-align : center; font-size : 13px; font-weight : bold; margin: 5px 5px 0px 5px; background: url("http://blog-imgs-18.fc2.com/h/a/p/happyfree/1.gif") no-repeat; height: 20px; border :1px solid #7E7E7C; border-top :2px solid #7E7E7C; } h2.side { text-align : center; font-size : 13px; font-weight : bold; margin: 0px 5px 0px 5px; background: url("http://blog-imgs-18.fc2.com/h/a/p/happyfree/1.gif") no-repeat; height: 20px; border :1px solid #7E7E7C; } p.side { margin: 0px 5px 0px 5px; text-align : left; border-left :1px solid #7E7E7C; border-right :1px solid #7E7E7C; padding : 0px 0 0 10px; } p.sideti { margin: 0px 5px 0px 5px; text-align : left; border-left :1px solid #7E7E7C; border-right :1px solid #7E7E7C; padding : 0px 0 0 10px; font-weight : bold; } p.sideen { margin: 0px 5px 0px 5px; text-align : left; border-left :1px solid #7E7E7C; border-right :1px solid #7E7E7C; padding : 0px 0 0 10px; border-bottom :1px solid #7E7E7C; } div.side { margin: 0px 5px 0px 5px; text-align : left; border :1px solid #7E7E7C; border-top :2px solid #ffffff; width : 168px; } p.side2 { margin: 0px 5px 0px 5px; text-align : center; border :1px solid #7E7E7C; border-top :1px solid #ffffff; padding : 2px 0px; } /* 記事部分 ------------------------------------------------------------ */ div#wrapper3 { float : left; width : 490px; height: 450px; overflow: auto; margin: 5px 2px 0px 0px ; } div#wrapper3 a { text-decoration : none; color : #0000ff; } div#wrapper3 a:hover { text-decoration : none; color : #cc6699; } div.entrys { border : 2px dotted #BEDBFF; margin : 5px 5px 15px 0px; width : 465px; background : url("") no-repeat #BEDBFF; } div.entry-titl{ height: 25px; background : url("") no-repeat #BEDBFF; margin : 0px 8px 0px 0px; width : 445px; padding : 5px 0 0 0; } h2.entryStart { float : left; width : 340px; text-align : left; font-size:14px; border:none; margin : 0px 0px 0px 10px; } p.entrycategory { width : 60px; text-align : right; float : right; margin : 2px 0px 0px 0px; } .entrybody { color : #000000; margin : 0px 10px 10px 10px; background : url("") no-repeat #ffffff; border-bottom : 2px solid #7E7E7C; border-right : 2px solid #7E7E7C; padding : 5px; } ul.entrydate { list-style-position : inside; text-align : center; font-size : 10px; margin : 10px 0px 0px 0px; border-top : 1px solid #C4C4C4; } ul.entrydate li { display : inline; list-style-type : none; } div.entrybody img { float: left; margin: 0 10px 5px 0; border: 1px solid #000000; } div#wrapper3 a.foldmark { width : 75px; float : right; font-size:12px; text-decoration: none; color : #ff0000; margin : 2px 0 0 0; background : url("http://blog-imgs-18.fc2.com/h/a/p/happyfree/tuiki.gif") no-repeat #BEDBFF; } a.aposted{ font-size:10px; float: right; } /* コメント ------------------------------------------------------------ */ h3#comment-top { margin : 10px 5px 0 5px; } h4.comment-Start { margin : 0 5px 0 5px; } div.commentbody { text-align : center; padding : 10px 15px 5px 15px; margin : 5px 10px 5px 10px; background : url("") no-repeat #ffffff; border-bottom : 2px solid #7E7E7C; border-right : 2px solid #7E7E7C; } p.commentend { padding : 10px 0 5px 0; margin : 0 5px 0px 5px; } h3.comment-post { margin : 0 5px 5px 5px; } table.comment-submit { border-collapse : collapse; margin : 0 5px 0 5px; text-align : center; } td.comment{ border-bottom : 1px dotted #000000; } div.commentfom { margin : 0 5px 0 5px; } h3.commentedit { margin : 0 5px 5px 5px; } /* トラックバック ------------------------------------------------------------ */ h3#trackback-top { margin : 12px 5px 0px 5px; } p.trackback-url { text-align : center; padding : 0 15px 0 15px; margin : 10px 5px 5px 5px; } h4.trackback-Start { text-align : center; padding : 0 15px 0 15px; margin : 10px 5px 0px 5px; } div.trackback-excerpt{ text-align : center; padding : 0 15px 0 15px; margin : 0px 5px 0px 5px; } p.trackback-end { border-bottom : 1px dotted ; margin : 0px 5px 10px 5px; } div.page{ text-align : center; margin : 10px 5px 10px 5px; padding : 0 15px 0 15px; } /* copyright ------------------------------------------------------------ */ div#copyright { padding : 20px 10px 5px 10px; font-size : 10px; width : 830px ; text-align : center; clear : both; } div#copyright p{ color : #7D7C76; border-top :1px solid #cccccc; } div#copyright a{ color : #ff0000; border-top :1px solid #cccccc; } /* Mac版IEの文字化け対策 ------------------------------------------------------------ */ /* マック版IEでは表示できるフォントを指定しないと文字化けを起こ しますので通常は削除しないで下さい */ textarea,input,select { font-family : "30D230E930AE30CE20Pro20W3","Osaka","Verdana","Helvetica","Arial","FF 2DFF3320FF3030B430B730C330AF",sans-serif; }

• [03-09 09:17] [
• FC2用テンプレート　テンプレート] [
• コメント (0) ] [
• トラックバック (0) ]

happy-toallを3カラムにして黒背景にしました。happy-toall同様小粋空間さんで配布されいてる折り畳みスプリクトを使用させていています。

右側のサイドバーは全てフリーエリアにしています。
自由に変更して使用してください。
変更方法
HTMLがわかる方は
<div id="wrapper4">〜</div><!--wrapper4-->の間を自由に変更してください。
HTMLがあまりわからない方は下記を参考にして変更してください。
<h2 class="side">フリーエリア</h2>
上のフリーエリアの所を項目のタイトルに
<p class="side2">
広告など
</p>
上の広告などの部分を広告なら広告のタグを
<p class="side2">〜</p>の中にいれます。
同じ項目に2つ以上ある場合は
<p class="side2">〜</p>を足していきます。
項目を増やしたい場合は
<h2 class="side">〜</h2>を足して
<p class="side2">〜</p>を足していきます。これの繰り返しをしていけばできると思います。
そのままで6項目入るようになっていますが6項目も必要なければあまった分を消します。
注意点としては
<div id="wrapper4">と</div><!--wrapper4-->の間に必ず入れる事と
<div id="wrapper4">と</div><!--wrapper4-->を消さない事です。

わからない事がありましたらお気軽に質問してください。

• [03-08 23:15] [
• FC2用テンプレート　テンプレート] [
• コメント (13) ] [
• トラックバック (0) ]

小粋空間さんで配布されいてる折り畳みスプリクトを使用させていただきメニュー部分を折り畳みしてシンプルな2カラムを作ってみました。
3/8追記記事も折りたためるように変更しました。

作成したhappy-toallを改良して3カラムにしてFCafeで配布されているツリースプリクトを使用さてもらいメインブログ用も作ってみました。最初に表示される記事に追記記事も読み込ませて折りたたんで記事一覧ぽくしてみました。
画像なども追記に書けばもっと 一覧ぽくなると思いますがこちらの方がいいかなぁと思い現在みたいな感じにしています。

• [03-07 20:04] [
• FC2用テンプレート　テンプレート] [
• コメント (0) ] [
• トラックバック (0) ]

黒背景でシンプルな2カラムを作ってみました。サイドバーにコメントを表示させるようにしてみました。画像はセイニィさんから頂いた物をしようしています。
小粋空間さんで配布されいてる折り畳みスプリクトを使用させていただき記事本文とコメント部分を折り畳み式に変更してみました。

サイドバーが大きめの為カテゴリーにはサンプルで使ってるようなツリー表示などさせるのによいと思います。
サンプルで使用しているツリースプリクトにはFCafeで配布されているスプリクトを使用させて頂いてます。

• [03-05 21:40] [
• FC2用テンプレート　テンプレート] [
• コメント (2) ] [
• トラックバック (1) ]