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

blog用テンプレートやflashのweb用素材などを公開配布しています。

--月--日 スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


この記事の上へ

03月16日 happy-check

checkss.gifカテゴリーなどを上部にもっていきポップアップ式にしてすっきりさせたテンプレートです。
壁紙にはBabyMilkさんの素材を利用させていただいてます。
スプリクトには小粋空間さんで配布されいてる折り畳みスプリクトを使用させていています。
Operaではプロフィール画像を表示する事ができません。


この記事の上へ

03月13日 toall-3c フリーエリアの折り畳み

尚さんから質問いただいたフリーエリアの折り畳みの仕方を説明したいと思います。

下記の用に折り畳みにしたいフリーエリアのソースを変更してください。
<!--フリーエリア1-->
<h2 class="side" id="free1name">フリーエリア</h2>
<div id="free1list">
<p class="side2">バナーや
</p>
</div>
<script type="text/javascript">
<!--
FoldNavigation('free1','on',false);
//-->
</script>
<!--フリーエリア2-->
<h2 class="side" id="free2name">フリーエリア</h2>
<div id="free2list">
<p class="side2">バナーや
</p>
</div>
<script type="text/javascript">
<!--
FoldNavigation('free2','on',false);
//-->
</script>
フリーエリアの数にあわせて赤字
数字を変更すれば折り畳みに化できます。


この記事の上へ

03月10日 happy-toall系画像素材

toall系の差し替え用画像をBabyMilkさんの葉月さんに作っていただきました。お好きな色を選んでDLして画像をかえてみてください。

画像を変える位置はHTMLが1箇所CSSが4箇所です。
HTMLは上の方にある
<!-- search -->
<form method="get" action="">
<input id="search" name="search" class="search">
<INPUT class="searchimg"type="image" value="Search" src="http://blog-imgs-18.fc2.com/h/a/p/happyfree/tasearch.gif" ALIGN="middle" alt="記事検索">
</form>

<!--/search-->
赤字のとこです。
CSSは
body {
color : #000000;
background: url("http://blog-imgs-18.fc2.com/h/a/p/happyfree/2.gif");

div#bese{
text-align : left;
width : 800px ;
margin: auto;

border-right : 2px solid #7E7E7C;
background: url("http://blog-imgs-18.fc2.com/h/a/p/happyfree/4.gif") repeat-y #ffffff;
}

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-b.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-b.gif") no-repeat;
height: 20px;
border :1px solid #7E7E7C;
}
赤字のとこです。
上から左右の背景
左の字の背景
サイドバーの左一番上の背景
残りのサイドバーの背景となってます。
赤セットDL→「toall-aka.zip

青セットDL→「toall-ao.zip

オレンジセットDL→「toall-orenji.zip

緑セットDL→「toall-midori.zip

ピンクセットDL→「toall-pink.zip

各セットには白背景用と黒背景が入っています。


この記事の上へ

03月10日 happy-toall-3cbl

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



この記事の上へ

03月09日 toall-3cの白背景用css

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


CSS↓


この記事の上へ

03月08日 happy-toall-3c

toallss.gifhappy-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日 livedoor用テンプレhappy-red

live-hppy-redFC2用テンプレートのhappy-redをlivedoor用に改良しました。
画像にはBabyMilkさんの素材を利用させていただいてます。

テンプレートセットDL→「live-hppy-red.zip
詳しい説明などはこちらを参照してください


この記事の上へ

03月07日 happy-toall

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

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


この記事の上へ

03月05日 happy-ramia テンプレ

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


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


この記事の上へ

03月02日 livedoor用hppy-skii3カラム版

lo-happy-sukii.jpglivedoor用happy-skkiを3カラムに改良したテンプレートです。記事部分の縦のスクロール幅調節できます。右側のサイドバーの中を自由にできます。
画像には押し花とアイコンさんの素材を利用させていただいてます。

テンプレートセットDL→「live-hppy-skii3c.zip
詳しい説明などはこちらを参照してください

*注意*
このテンプレートはアダルト内容などを含むサイトなどの15禁18禁など年齢制限があるサイト、宗教・言論活動等、一般常識に沿わないサイト、での使用は禁止しさせていただきます


この記事の上へ

03月01日 happy-ramiaのカテゴリーツリー化

FCafeさんで配布されているツリー化スプリクトをhappy-ramiaに設置する方法を紹介したいと思います。

まずは下記のソースをコピーしてメモ帳などに貼り付けてください。

<script type="text/javascript">
<!--
n=0; tgt=0; var Item=new Array(); var Ctg=new Array();
Ctg[0]=new Array("その他","テンプレート","flash","分類3"); // category 用分類名
Ctg[1]=new Array("OTHERS","group 1","group 2"); // LINK 用分類名
function getItem(u1,u2,u3,u4,u5) {
j=u1;
if (j==0 || j==1) { u1=Ctg[j][0];
if (u2.indexOf('.')>0) { p=u2.split("."); u1=Ctg[j][p[0]]; u2=p[1] }
}
n++; Item[n]=u1+'$'+u2+'$'+u3+'$'+u4+'$'+u5;
}

function mkTree() {
var Cc=new Array(); var Ce=new Array(); var Ct=new Array();
v=0; Ct[0]="";a1='" title="';
for(i=1;i<=n;i++) {g=Item[i].split('$')[0]; f=0;
for(j=0;j<=v;j++) {if (g==Ct[j]) {Cc[j]++; Ce[j][Cc[j]]=i; f=1}
}
if (f==0) {v++; Cc[v]=1; Ce[v]=new Array(); Ce[v][1]=i;Ct[v]=g}
}
for(i=1;i<=v;i++) { l=Cc[i];
for(j=1;j<=l;j++) { p=Item[Ce[i][j]].split('$');
if (j<l) {a0="<p class=side2>├";a2="</p>";} else {a0="<p class=side2>└"; a2="<br></p>"}
if (j==1) {document.write('<strong>'+p[0]+'</strong><br>')}
document.write(a0+'<a href="'+p[2]+a1+p[3]+'">'+p[1]+'</a>'+p[4]+a2);
} }
n=0;
}
//-->
</script>

メモ帳に貼り付けたら上のソースの赤字の部分を分類したい名前に変更してください。この際その他は分類していないものが入ります。また分類名を増やす場合は("その他","テンプレート","flash","分類3","分類4") などのように「,」をいれて増やしてください。
変更が終わったらfc2の管理画面からテンプレートの設定に行き設置したいテンプレートの編集を選びHTMLのソースから下記の場所を探し
</script>
ここに貼り付ける
</head>
<body>
<div id="bese">

青字の所にメモ帳からコピーして貼り付けてください。
次に下記のソースをコピーして
<!--カテゴリ-->

<h2 class="side">CATEGORIES</h2>
<div class="side">
<!--リスト始-->
<script type="text/javascript"> <!--category-->
getItem("0","<%category_name>","<%category_link>"," <%category_name>","[<%category_count>]");
<!--/category--> </script>
<noscript>
<!--category-->
<p class="side">
<a href=" <%category_link>" title="<%category_name>=<%category_count>件"> <%category_name> [<%category_count>]</a>
</p>
<!--/category-->
</noscript>
<!--/リスト終-->
<script type="text/javascript">mkTree()</script>
</div>


<!--プロフィール-->
HTMLの下の方から次のソースを探して
<!--カテゴリ-->
<h2 class="side">CATEGORIES</h2>

<!--category-->
<p class="side">
<a href=" <%category_link>" title="<%category_name>=<%category_count>件"> <%category_name> [<%category_count>]</a>
</p>
<!--/category-->

<!--プロフィール-->
青字
の部分を選択してコピーした物を貼り付けてください。
最後にカテゴリーの編集に行き分類したいカテゴリー名の先頭に「1.」などの半角数字とドットをつけます。
例 テンプレートに分類したい物には
1.テンプレート 1.カスタマイズ 1.livedoor用
flashに分類したい物は
2.flashメニュー 2.flashスクロール
分類3に分類したい物は
3.日記
などです。この時「1.」などを付けていない物が未分類にツリー化されます。

以上ですがわからない事や問題ないどありましたら気軽に質問してください。
またソースの公開を許可していただいたFCafeのdanielさんありがとうごさいました。


この記事の上へ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。