80,000PV超え！

仕事でちょっとデカイ山をやっつけててブログの更新もままならない状態でして、
ホントすんません。
それなのにたくさんアクセスいただきまして、7/1　80,000PVを超えることができましたっ！

アクセスしてくださったみなさんありがとうございましたっ！
コメント＆nice！くださったみなさんありがとうございました！
（レス遅くてすみません！！m(..)m）

（デジ）物欲のとどまるところをしらないkovaioの「デジモノ大好き」
これからもよろしくお願いいたします。

リニューアル

ちょっと篭ってリニューアルの準備してました。（＾＾；）

なんとか、vaio君到着前に公開できました～

とは言え、スキンチェンジャーまでは手が回りませんでした。

体力が回復したら、徐々に着手します。。。

実は、このスキンってば、初代オリジナルスキンなんです。＾＾

フルサイズって訳ではないですが、画像を生かせるようにメインもサイドバー透過バージョンです。

外部ファイルの擬似透過もよいでしょ？＾＾

とりあえず、ご報告までに。。。

スキンカスタマイズ [calendar] その2

カレンダーをさらにいじってみました。＾＾

せっかくカレンダーオリジナルにしてるんだし、更新の記録だけでなく、予定表的な使い方をしてみました。

直近だとWWDC07があるので、その開幕日にポインターを持っていくと文字が浮かぶようにしてみました。

いままでソフトの発売日とかイベントの日程なんか忘れちゃって自分のブログを検索してたんだけど、これなら一目瞭然。＾＾

リンクも貼れますが、そのネタで更新すると思うので外部へのリンクは貼ってません。＾＾

スキンカスタマイズ [スクロールボタン]

久しぶりに弄ってみました。＾＾；

「スキンカスタマイズ」と「■デジモノ大好き　TOPICS■」が長くなってきたんで、インラインフレームにスクロールバーで短くしようかと思ったんですけど、スクロールバーはちょっとかっちょ悪い。

なにかいい方法ないかと探してたんですけど、ありました。（笑）
javascriptでいいモノが。＾＾

基本的な構造は、[calendar]と同じです。

カスタムペインにインラインフレームを置いて、外部のHTML（news.html）を読み込んでます。

「news.html」にスクロールをコントロールする「div_scroll.js」とマウスオーバーさせたときアイコンをコントロールする「over.js」を読み込んでます。

使ってみたいかたは、こちらからどんぞ。

http://www002.upp.so-net.ne.jp/b_chboy2/blog/js/div_scroll.js

http://www002.upp.so-net.ne.jp/b_chboy2/blog/js/over.js

HTMLの中にもアイコンコントロールの記述がありますのでHTMLを参考にしてみてください。

スクロールアップボタン
<a href="JavaScript:void(0);" onmousedown="divScroll('news','newscontents','up');" onmouseup="clearInterval(scl1);"><img src="img/new_up.gif" alt="" name="up" id="up" onmouseover="imageUpOver()" onmouseout="imageUpOut();" border="0" height="20" width="20"></a>


スクロールダウンボタン
<a href="JavaScript:void(0);" onmousedown="divScroll('news','newscontents','down');" onmouseup="clearInterval(scl1);" onmouseover="imageDownOver();"><img src="img/new_down.gif" alt="" name="down" id="down" onmouseover="imageDownOver();" onmouseout="imageDownOut();clearInterval(scl1);" border="0" height="20" width="20"></a>

あと、赤文字が表示領域の設定です。

<style>
#news{position:relative;width:170px; height:168px;overflow:hidden;text-align:left; clip: rect(0 400 30 0)}
#newscontents{position:relative; left:0px; top:0px;font-size:10px;text-align:left;line-height:140%}
</style>

ただですね～。
マウスのホイールでスクロールできないんでそれが、難点です。＾＾；

70,000PV超え!

3/5に50,000PVを超え、4/中旬に60,000PVを超え、
昨日（5/22）70,000PVを超えることができましたっ！
これもみなさんのおかげです！

アクセスしてくださったみなさん、
コメント＆nice!をくださったみなさん、
ほんとにほんとにありがとうございました！

3/5の50,000PVから78日間で20,000PV。
一時期、3週間で10,000PVもアクセスのあったときもありましたが、
いまは、約6週間10,000PVのペースで落ち着いてきました。

マイペースな更新ですが、これからもkovaioの触手の動くモノを中心に書いてきますので、
これからもよろしくお願いいたしますっ！＾＾；

オリジナルスキン [calendar まとめ]

遅くなりましたが、まとめです。＾＾；

■はじめに

前の記事でも書きましたが、インラインフレームタグを使うと外部のファイルを呼び出すことが出来ます。

インラインフレームは、フレームのように土台となるHTMLを必要とせず、行内（インライン）に表示させることの出来るフレームです。
現状ソネ風呂は1つのカスタムペインの中に2000文字しか記述することができず、カレンダーのようなテーブルを多用しているものを表示させるのが苦手なわけですが、テーブルを多用するようなHTMLを外部ファイルにしてしまい、このインラインフレームを使って読み込めば、問題なく表示させることが出来ます。

とはいえ、外部ファイルはHTMLになるわけでソネ風呂のサーバにはアップできませんので、フリーのサーバなど用意する必要がありますので、予めご了承ください。

カレンダーをカスタムするメリットは、日曜や土曜のように曜日ごとにリンクアイコンを変更できますし、手を掛ければ日ごとにリンクアイコンを変えることも可能。（あくまで手を掛ければです。（＾＾；））

デメリットは、散々書いてますけど、手間がかかります。（＾＾；）
一記事ごとにHTMLを書き換えないといけないので、毎日更新されてる方には向いてないかもしれませんね～（＾＾；）
それと、前の記事でも書きましたけど、[skin switcher]との相性はよろしくないです。（＾＾；）

■カレンダーを読み込む

図のようにカレンダーの上部と下部を切り離し、それぞれアイフレームで読み込みます。

カスタムペインの中に入れてるソースはこんな感じ。

<p class="auto">

<IFRAME name="up"
src="http://www002.upp.so-net.ne.jp/b_chboy2/blog/calendar/2007_04.html" 
width=170 height=195 scrolling="no"
frameborder="0">

この部分はインラインフレームを使用しています。

</IFRAME><br class="auto"/>

<IFRAME name="down"
src="http://www002.upp.so-net.ne.jp/b_chboy2/blog/calendar/monthly.html" 
width=170 height=70 scrolling="no"
frameborder="0">

この部分はインラインフレームを使用しています。

</IFRAME></p>

なんで[monthly.html]を作ってるかと言いますと、月のリンクを1つのファイルに表示もできますが、月が変わるたびに全ファイルに新しい月のリンクを作らなくちゃいけなくなるので、手間を省くためにリンクファイルを外部ファイルにしてたりします。＾＾

■カレンダーの外部ファイル化

カレンダーをいちいち作り直すのはめんどくさいので、カレンダーのソースをいただきます。＾＾；
いただくところはここです。

色の反転しているところ。
図ではわかりづらいのですが、tableタグのところです。

リンクアイコンを変えるにはCSSも外部ファイル化しておかないといけないので、オリジナルで外部ファイル化しちゃいました。
カレンダー用CSSはこちらを参照くださいまし。
http://www002.upp.so-net.ne.jp/b_chboy2/blog/calendar/calendar.css

えっと、自分で書いてて何なんですけど、あんまりまとめっぽくなってない気がします。（＾＾；）
なので、わからないことはコメントに入れてください～

オリジナルスキン [calendar その2]

せっかくフルカスタマイズしたカレンダーなんで英語に変えただけではつまらない。

赤りんごと

青りんごを追加して遊んでみました。＾＾

今回このカレンダー用のCSSを作ったんで、ちょこっと追加。
それぞれ土曜、日曜のリンクで読み込む画像を青りんご、赤りんごに変更してます。

↓通常のリンク
#calendar td.link{background:url("active_cal.jpg")
no-repeat 1px -1px;
font-weight:bold;
font-size:10px;
}

↓日曜のリンク（赤りんご）
#calendar td.sunlink{background:url("active_cal_sun.jpg")
no-repeat 1px -1px;
font-weight:bold;
font-size:10px;
}

↓土曜のリンク（青りんご）
#calendar td.satlink{background:url("active_cal_sat.jpg")
no-repeat 1px -1px;
font-weight:bold;
font-size:10px;
}

HTMLの方はといいますと、

↓通常
<td class="link">

↓日曜
<td class="sunlink">

↓土曜
<td class="satlink">

通常のlinkにsunかsatを追加すればOKです。

青りんごは少し毒々しいかな？＾＾；

オリジナルスキン [calendar]

いまデジモノ大好きを見て気がつく人は何人いるかなぁ～？＾＾；

カスタムペインに英語表示のオリジナルカレンダーを設置してみました。

前回のメンテナンスで実は

インラインフレーム[iframe]タグが使えるようになった

んですけど、気づいてた人いますかぁ～？＾＾

それまでは、[iframe]が使えず、[iframe]を使わないで外部ファイルを読み込む方法を試みてたんですが、いまいちうまくいかず、難航していたのですが、[iframe]が使えるようになり一気に解消。＾＾

んでもってこんな感じのものが出来上がりました。＾＾ｖ

オリジナルカレンダーの使い方は、こんな感じですが、表現できないこともいくつかあるんでそこは目を瞑ってください。＾＾；

[skin switcher]との相性はイマイチ（＾＾；）ですが、これは、これで面白いのではないでしょうか。

攻略方法は、追々書きますが、この[iframe]を使いこなすと、カスタムペインの文字数制限も気にせずサイドバーをカスタマイズできますし、カスタマイズの幅が一気に広がったのでは。＾＾

sknysさんカレンダー攻略こんなんでいかがでしょうか。＾＾

祝！1周年！＋1日

2006年3月22日からはじめた[デジモノ大好き]ですが、ついに1周年を迎えることが出来ました。＾＾
こんなに続くとは思っても見なかったのですが、これもひとえにみなさんのおかげでございます。

アクセスしてくださったみなさん、
コメント＆nice!をくださったみなさん、
TBをくださったみなさんホントにホントにありがとうございました！

これからもなにとぞよろしくお願いいたします。＾＾

えっと。一応、アクセスランキングBEST20を作ってみました。＾＾；
以外にmobileネタにアクセスが集中しているんだなぁと改めて感心してみたり。

RANK	タイトル	閲覧数	カテゴリー
1	W51CA　その3	3,184	mobile
2	オリジナルスキン　その2	2,996	blog
3	W44S　その1	1,644	mobile
4	W51CA その12 アデリーペンギン	904	mobile
5	W51CA その8	872	mobile
6	W43S その2	847	mobile
7	新型iPodVideoかも!?	780	iPod
8	W51CA その11 動画	760	mobile
9	W51CA その6	735	mobile
10	W51CA その9 ブラウザ	717	mobile
11	W44S その2	695	mobile
12	W43S　その3	642	mobile
13	W51CA その5	601	mobile
14	W51CA その7	515	mobile
15	W51CA その10 番外編	479	mobile
16	W51CA・W51SH その2　＋W52T	462	mobile
17	W51CA その4	434	mobile
18	生茶エコパンダキャンペーン	431	web site
19	Mac用USBワンセグチューナー	421	notePC
20	オリジナルスキン	408	blog

記念ってことで、1周年記念スキンにしてみました。＾＾

オリジナルスキン [skin switcher]

ってことでまとめてみました。＾＾

■はじめに

[skin switcher]は、ユーザが好きなスキンに切り替えることが出来るもので、仕組みは、2つのCSSファイルをジャバスクリプトを使って切り替えるってものです。
ココとかは、フォントサイズを変更することができるけど、考え方は一緒。

ソネ風呂の場合、ベースになるスキンとデフォルトで呼び出すスキンを同じモノにしておくとよいです。

図解すると、こんな感じ。

真中の[.jsファイル]がCSSを切り替える[skin switcher]なるモノです。＾＾

ココから拾ってきたのですが、英語なのでよーわかりません。
参考にさせていただいたのは、こちらです。

■カスタムスキンを用意

まずは、ベースになるカスタムスキンを作ります。
これは、こちらを参考にがんばって作ってください。＾＾；

で、そのベースになるCSSを元に背景色を変えたり、フォントカラーを変えたりもう1つのカスタムスキンを作るわけですが、注意しておかなくちゃいけないのは、読み込む方のCSSの方に指定がされていないとベースのものが出てきちゃいます。

EVAスキン	黒虎スキン	EVAをベースにした場合

EVAスキンでは、コメント欄に枠をつけてますが、黒虎スキンでは指定してません。
ベーススキンをEVAスキンにするとこんな感じで黒虎スキンなのにEVAスキンの枠が出てきちゃいます。

そんなことに注意しながら2枚のカスタムスキンを作ると、管理画面上ではこんな感じになります。

■外部CSSファイルのリンク

カスタムスキンを作ってソースを見るとカスタムスキンのCSSファイルが外部ファイル化されリンクされているので、それぞれのカスタムスキンのCSSのリンクをコピっておきましょう。

<link rel="stylesheet" type="text/css" href="Http://blog.so-net.ne.jp/_images/blog/_82b/b_chboy2/205691/ style.css?1173437095000" media="all"/>

赤文字が外部ファイル化されたCSSのURLです。
httpはHttpになってますからご注意ください。

■skin switcher.js

ココからstyleswitcher.jsをダウンロードして、それをサーバにアップするんですが、ソネ風呂はjs（ジャバスクリプト）ファイルはアップできないので、どこかのサーバにアップする必要があります。

サーバお持ちでない人もいると思いますので、kovaioのサーバにあげておきますので、こちらのstyleswitcher2.jsをお使いください。
（※kovaioの都合でjsファイルを削除することもありますので、その点はご理解いただきお使いください。）

Http://www002.upp.so-net.ne.jp/b_chboy2/blog/js/styleswitcher2.js

２つの外部CSSとJSファイルがそろえば、後は、カスタムペインにHTMLを埋め込めば終了です。

■skin switcherの設置

カスタムペインにいつもの作法で埋め込んでいただければ、OKです。＾＾

<link rel="stylesheet" href="Http://blog.so-net.ne.jp/_images/blog/_82b/b_chboy2/205691/ style.css?1171524510000"　type="text/css" title="Default" />
<link rel="alternate stylesheet" href="Http://blog.so-net.ne.jp/_images/blog/_82b/b_chboy2/207516/ style.css?1173023530000" type="text/css" title="eva" />

↑ここはそれぞれの外部CSSの呼び出すための指定をしてます。

<script type="text/javascript" src="Http://www002.upp.so-net.ne.jp/b_chboy2/blog/js/ styleswitcher2.js"></script>

↑これは、js（ジャバスクリプト）の呼び出しを指定してます。

<a href="#" onclick="setActiveStyleSheet('eva'); return false;" onkeypress="">EVAスキン</a>

<a href="#" onclick="setActiveStyleSheet('Default'); return false;" onkeypress="">黒虎スキン</a>

↑ここはリンクですね。

赤文字を指定しなおしてもらえればOKかと。
httpはHttpになってますからご注意ください。

一応、カスタムは、自己責任でお願いしますね。＾＾；
ではでは。