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

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

02月13日 happy-sukiiskyにflashメニュー

happy-sukii
happy-sukiiskyにフラッシュを利用してカテゴリーを階層メニューにする方法の仕方です。まずはこちらをみて「blogmenu.zip」を設置してください。
(flashを設置できるサーバが必要です。)



まずはテンプレートの編集画面happy-skiiskyの編集を選びHTMLのソースから次のソースを探してください

<!--カテゴリ-->
<!--
<iframe frameborder="0" scrolling="no" width="180" height="180"src=" http://www.happy.blogdns.com/blog/flash/categori/index.html " name="MainFrame">
<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-->
</iframe>
-->
<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-->

<!--プロフィール-->

上のソースの赤字で書かれた部分を設置したblogmenuのindex.htmlのアドレスに書き換えてください。
次に緑字の部分を削除してください。
これでflashの設置ができていれば正しく表示されると思います。

*注意*
Iフレームに対応してないブラウザでは通常のhappy-skiiskyと同じ用に見えます。
また広告表示が必要な無料サーバを利用の場合正しく表示されない場合があります。その際広告表示のない無料サーバを探すか当blogでお勧めしている格安サーバなどを利用してください。


この記事の上へ

02月12日 占いモンキーの設置

セブンティーンさんより質問のあったhappy-skiiskyの占いモンキーの設置方法です。
まずは占いモンキーでタグを取得します。この際設置するサイトは 一般サイトを選んでください。その他の必要な事項を選択して貼り付け用タグを生成するをクリックすると下にタグがでてきますのでそれをコピーしてメモ帳などに貼り付けて下記の赤字ようにタグを足します。
<p style="margin-bottom:10px;">
<script language="JavaScript" type="text/javascript" src="http://uramon.uki2.ne.jp/uranai/?day=6856455b5a5e5e559u420dce7cb2267"></script>
</p>
青字のとこは人によって違いますので上のをそのままコピーしても使えません。

次にfc2の管理画面からテンプレートの編集で設置したいhappy-skiiskyの編集を選択しHTMLに上記のタグを付け足します
こちらの用に左側メニューに占いモンキーを設置してみます。
<!--プロフィール-->
<h2 class="side">PROFILE</h2>
<p class="side"><img src="<%image>" alt="<%author_name>"></p>
<p class="side"><%author_name></p>
<p class="side"><%introduction2></p>

<p style="margin-bottom:10px; ">
<script language="JavaScript" type="text/javascript" src="http://uramon.uki2.ne.jp/uranai/?day=6856455b5a5e5e559u420dce7cb2267"></script></p>

<!--最近のコメント-->

HTMLの中から青字のところを探して赤字の部分のように先ほどのタグを貼り付けます。そして更新ボタンをクリックしプレビューで確認してみてくださいサンプルの用にプロフィールの下に表示されてると思います。
--------------------------------------------
セレクトメニューの下の場合
<!--リンク-->
<select name="menu" onchange="jumpmenu('parent',this,0)">
<option value="<%url>" selected="selected">☆リンク</option>
<!--link-->
<option value="<%link_url>">☆<%link_name></option>
<!--/link-->
</select>
</form>
<p style="margin-bottom:10px; ">
<script language="JavaScript" type="text/javascript" src="http://uramon.uki2.ne.jp/uranai/?day=6856455b5a5e5e559u420dce7cb2267"></script></p>

</div>
<!--wrapper2-->
<!--左サイド終了-->

--------------------------------------------
プロフィールの画像との入れ替え(*緑字のところは削除してください
<!--プロフィール--> <h2 class="side">PROFILE</h2>

<p class="side"><img src="<%image>" alt="<%author_name>"></p>

<p style="margin-bottom:10px; ">
<script language="JavaScript" type="text/javascript" src="http://uramon.uki2.ne.jp/uranai/?day=6856455b5a5e5e559u420dce7cb2267"></script></p>

<p class="side"><%introduction2></p>
<p class="side"><%author_name></p>

<!--最近のコメント-->





この記事の上へ

02月09日 happy-sukiiの記事部分の変更

happy-sukiiの記事部分の縦の変更の仕方を説明したいと思います
cssのソースから下記のソースを探してください。
真中より少ししたくらいにあると思います。
div#wrapper3 {
float : right;
color : #7D7C76;
width : 590px;
height: 450px;
overflow: auto;
margin: 10px 5px 0px 0px ;
text-align : center;
}
赤字の数字の部分を変更すればお好きなサイズに変更できます。


この記事の上へ

02月06日 happytvの色変更の仕方

サンプルのようにhappytvの本文背景の色の変更の仕方を説明します。
happy-tv
まずは変更したい色のファイルをダウンロードしてください。
ブルー」 「ピンク」 「グリーン」 「イエロー


中にある3種類の画像ファイルをFC2BLOGの管理画面からファイルのアップロードで
ファイルをアップロードします。アップロードしたらそれぞれの画像をクリックし画像を表示させときます。
次にテンプレートの編集画面に行き色の変えたいテンプレートの修正をクリックします。クリックするとHTMLとCSSのソースが表示されます。今回の画像変更はCSSのみの編集ですのでスタイルシートのソースを見やすいように画面を移動させてください。
ソースの中からまずは記事の上の部分を探します。下記が上の部分のソースです。
div.entryStart {
background: url("
http://free.hippy.jp/blog/img/tvbltop.gif") no-repeat;
margin : 12px 5px 0px 5px;
height:65px;
padding : 90px 0 5px 0;
}

赤字の部分を先ほどアップした画像のTV上の画像を開きアドレスバーからアドレスをコピーして赤字の部分と書き換えしてください。
書き換えをしたら更新ボタンを押してプレビューで確認してみてください。TVの上の部分の画像が変わっているはずです。
中央下部分も同じように変更してみてください。
------------------------------------------------------------
中央部分のソース
.entrybody {
color : #000000;
margin : 0px 5px 0px 5px;
background: url("
http://free.hippy.jp/blog/img/tvbl.gif") repeat;
padding : 0px 30px 5px 45px;
}

------------------------------------------------------------
下部分のソース
ul.entrydate {
padding : 10px 0 0 0;
background: url("
http://free.hippy.jp/blog/img/tvblbotm.gif") no-repeat;
list-style-position : inside;
text-align : right;
font-size:x-small;
height:180px;
margin : 0px 5px 0px 5px;


この記事の上へ