ウェブでお仕事　ねこやしき

ちょっとしたＴＯＰページが欲しいけど．．．ってないですか？
ここではＴＯＰ用のフリーエリアの設定方法をご説明します♪

わたし、悩んでいました ヽ(`Д´)ﾉ なんでぇ〜！！

未来日付の記事でＴＯＰページらしきものも更新したものの．．．
次々と日々の記事が表示されます。ファンブログでは表示記事数の指定が
出来ないんですね。10件位表示されるのかな？

簡単にいえばブログ記事表示の前に表示されるエリアを作るわけです。
もちろん記事編集のエディタを使用しないので日付表示などはありませんよ。

使い方は色々です、ＴＯＰで常に表示したい内容やブログの紹介文や、
フリーエリアからカテゴリにリンクさせたり。小さめにお知らせエリアにして
いつも通り日々の記事を表示させても良いし、1ページ作成してＴＯＰページのみ
表示させホームページ風にしたりできます。「ねこやしき」は後者ですね　(*゜▽゜*)

【作成は、こちらで〜す　↓↓↓】

はじめにスタイルシート内の記事の設定部分に下記指定をコピペしてください。

スタイルシートへ追記　　　　　　　　　　　　　　　　　　　　メインへ追記
/* ----------------トップフリーエリア設定 */ .free-area { background-color: #eeeeff; border: 1px solid #ccc; padding: 10px 10px 10px; margin: 5px 5px 5px 5px; font-size: 12px; } .free-area p { margin: 0px 0px 10px 0px; } .free-area ul { margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 17px; padding: 0px; } 　　　<!--index_area--> <!-- トップ用フリーエリア --> <div class="free-area"> ここに記事記入して下さいね。 </div> <!-- トップ用フリーエリア END --> <!--/index_area--><br>

フリーエリアの全体は、スタイルシート追記「free-area」 部分で設定します。

＜上記ＨＴＭＬの設定内容＞

background-color: #eeeeff;　→→　全体の背景カラーの設定です。白にするなら #ffffff
border: 1px solid #ccc;　　 →→　フリーエリアの枠線のカラー設定。枠線無しなら省いてOKです。
padding: 10px 10px 10px;　　→→　枠線と中身（記事）の余白設定。
margin: 5px 5px 5px 5px;　　→→　枠線とその周りの余白設定
font-size: 12px;　　　　 　　→→　エリア内の全体で基本の文字サイズ。

.free-area p では段落の行間幅を設定しますが、このままで良いかと。
.free-area ul ではエリア内のリスト指定をしますが、ここではサイズ的な設定のみなのでこのままで。

メインへ追記のコピペ先は、メインの中にある＜!--entry--＞ではじまりブログ記事の設定をしている部分があります。その＜!--entry--＞の真上に追記してください。
＜!--entry--＞より下に追記すると、１記事ごとにフリーエリアが表示されてしまいます。


フリーエリアの中に、スクロール付きテキストエリアを使用したり、
例えば、こんな感じも作れます。↓↓↓

TOP PAGE ここでブログの説明など軽くいっちゃって下さい♪♪ What's New 【お知らせ】などで使用できる、テキストエリアです 　2008/○/×..... 更新しました。 　2008/○/×.....　今日のお得情報。 　 　↑↑↑　こんな感じでＵＰ情報など記入してもＯＫです。 (*´д｀)=з　ごめんなさい．．．テキストエリア内では画像や、ＨＴＭＬが使用できないのです。残念ですが、テキストのみ可能です。

　　かわいいぃ〜でしょ ♪
　　
　　和風アクセサリーの「NAGOMI -和見」のTAO CATなる
　　猫アクセTAO CATは他にMIKE CAT、BLACK CATの３タイプ　


いきなりですが、なんで猫の説明してるの？？　なんて言わないでくださいね。
だって、わたしはcat freekなんですから。おまけに、こんな白黒にゃんこ見たら
紹介せずにはいられないべ　(*^_^*)A

「ねこやしき」をリニュアルして以来、ポイントがどうだ、お小遣い稼ぎがどうだと、
いってる日が続きましたし、たまにはホッとＮＡＧＯＭＩですぜっ　（。^з^）〜♪

気付いた方いるかなぁ．．．そうです。うちのコとおなじ白黒ぶちねこサンです。
このコ達が里子に出されて我家へ来てから11年が過ぎました。（しみじみ）
私も年をとるはずですわ　(;^ω^A　変わらず、こんなに可愛いのに既に11歳に
なっていたんですね〜

ついでに、うちのコも紹介しちゃいます　↓↓↓ （家に来てまだ間のない頃です。）


そして、この凛々しい白黒ぶちねこは現在のうちのコZip＆Pockyです♪　↓↓↓



里親になったからには、ずう〜と一緒です　

小さい時はかわいいなんて言いながら捨て猫にしてしまう人、信じられないですよね　(*´д｀)=з。
何らかの事情があるとしても、せめて里親を探す位の最低限の事はするべき！　
簡単にペットを飼うものではありませんよね、最後までみてあげましょうね　(*゜▽゜*)

話がずれてるような．．．今後もうちのコ達は登場する事も、その時はよろしくです。
ねこ好きのあなたも、一度のぞいてみてね　↓↓↓

　　かわいぃ〜でしょ
　　うちのプーちゃんでございま〜す♪
　　他にも同じ顔したジップは次回に
　　ご紹介しますね

　　．．．んな話じゃなくて！！
　　画像の回り込みをＨＴＭＬで挑戦〜

　　ちなみにこちらは、ファンブログの
　　画像挿入で回り込みました。

　　そのまま使用、画像でかすぎっ！！
　　なので、画像を小さくしてＨＴＭＬで
　　書いてみますね。


こんな感じです　↓↓↓

〓　わぁ〜い。
ね、小さくなりましたよ〜　ファンブログで、なんとか小さくする事が、
出来るのかもしれませんが、私はいつもこのＨＴＭＬを使います。

リンクする商品画像の横に紹介文書きたいときなんかに、便利ですよ♪


こんなＨＴＭＬを書きこみま〜す　↓↓↓

＜img src="○○" width="横幅" align="画像位置" vspace="上下の余白" hspace="左右の余白"＞

○○　　　　　　　ここには画像のＵＲＬを入れます。
横幅　　　　　　　縦の指定もできますが、画像が壊れるので横幅のみ指定します。
　　　　　　　　　　ちなみに上の画像は120pxに指定しました。
画像位置　　　　left か right で指定します。
上下の余白　　余白指定しないと画像にくっついて読みづらいです。
　　　　　　　　　　ちなみに上の画像には10px指定。
左右の余白　　余白指定しないと画像にくっついて読みづらいです。
　　　　　　　　　　ちなみに上の画像には10px指定。

※　＜＞は表示する為に、全角にしているので実際は半角にして下さいね。

試してみて、うまく行かなかったらコメント下さいね。

ブログの記事内では、わたしはあまり使わないんですが、
ちょっとした時につかえるかなぁ．．．
サイドバーのなかで使っても良いかなと思います。

※　cols="縦幅" rows="横幅"で大きさは変更できます。
＜textarea cols="40" rows="5" style="border:solid 1px #666666;"＞ ノーマルバージョンです。 ＜/textarea＞
※　当ブログでは、スタイルシート自体にスクロールバーの指定をしているので、
ノーマルが、この赤いスクロールになってしまいますが、指定していなければ、
普通のグレーのスクロールバーになるはずです。

＜textarea cols="40" rows="5" style="border:1px #3366CC solid; background-color:#FFFFFF; scrollbar-face-color:#ffffff; scrollbar-arrow-color:#3366CC; scrollbar-track-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#3366cc; scrollbar-darkshadow-color:#ffffff; scrollbar-shadow-color:#3366cc;"＞ 色つけてみました〜 ＜/textarea＞

＜textarea cols="40" rows="5" style="border:solid 1px #ccffcc; background-color:#ccffcc; scrollbar-face-color:#ccffcc; scrollbar-arrow-color:#3366CC; scrollbar-track-color:#ccffcc; scrollbar-highlight-color:#ccffcc; scrollbar-3dlight-color:#ccffcc; scrollbar-darkshadow-color:#ccffcc; scrollbar-shadow-color:#ccffcc;"＞ 線をつけずにバックに色つけました♪ ＜/textarea＞

もしコピペするんだったら、＜＞ の部分が全角になってるので、
半角に直して使わないと反映されませんよ〜

スクロールバーの色は好きに変更してくださいね。スクロールバーの
変更に関して詳しくは「スクロールバーのカスタマイズ」を参考にどうぞ。

ブログも長くなるとサイドバーのカテゴリや最新記事の表示が、
とてつもなく長くなりますよね。特にファンブログは表示数が設定できないので
イラっとする事も．．．(-_-ﾒ;)　だってバナーもたくさん貼りたいし．．．

そんな時に便利な （？） ツリー型のカテゴリリストの紹介です。
当サイトのサイドバーにも同じカテゴリリストがありますよ。
もし気入ったら使ってみてくださいね♪

Ａ <SCRIPT language="JavaScript"> <!-- flag = new Array(); function tree(menu){ tree_list = document.all.item("tree"); if(flag[menu] == 1){ tree_list[menu].style.display='none'; flag[menu] = 0; } else{ tree_list[menu].style.display='block'; flag[menu] = 1; } } --> </SCRIPT>

Ｂ <SPAN onclick="tree(0)" style="cursor:hand"> <font color="#3366cc"><b>カテゴリ見だしデス</b></font></SPAN><BR> <DIV color="996600" id="tree" style={display:none;}> ┣<a href="#">メニュ１</a><br> ┣<a href="#">メニュ２</a><br> ┣<a href="#">メニュ３</a><br> ┣<a href="#">メニュ４</a><br> ┗<a href="#">メニュ５</a><br> </DIV>

Ａ
こちらは「デザインの変更」から、フリースキンの編集の
メイン ポータル　アーカイブ　１記事　プロフィール 全ての
＜heder＞〜＜/heder＞に貼りつけて下さい。

Ｂ
「項目の追加と編集」に追加作成します。
こちらも貼りつけたら、リンク先ＵＲＬとメニュー記入して
サイドバーに表示して下さいね。

　ここで記入するリンク先ＵＲＬはカテゴリ分けをするなら、
　　　元々、ファンブログでのカテゴリ別のＵＲＬを記入して下さいね。
　　　１記事のみで良ければ１記事のＵＲＬ（コメント欄が出てくるページ）
　　　を記入すれば、そのページだけにリンクします。

うまく表示できなっかたらコメント下さいね、ブログにお邪魔します。