PROFILE
Template
【Mobile】 やたー
今日の早い時間に公開してた、「しんぷるなロールオーバー」
コレの自動プリロード機能付きが出来たよー。
仕事でどうしても使いたくて頑張っちゃったわー。
JSはいまいちちゃんと理解出来てない部分があったけど、今回のでかなり良い勉強になったですよ。
帰ったら追記しよ。
HTMLの記述や修正も楽になるし、ソースも見やすくなるぜ☆
さて、こんな時間ですが、電車が遅れてますよ。
なんてこったい。
コレの自動プリロード機能付きが出来たよー。
仕事でどうしても使いたくて頑張っちゃったわー。
JSはいまいちちゃんと理解出来てない部分があったけど、今回のでかなり良い勉強になったですよ。
帰ったら追記しよ。
HTMLの記述や修正も楽になるし、ソースも見やすくなるぜ☆
さて、こんな時間ですが、電車が遅れてますよ。
なんてこったい。
【HTML・CSS】 JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
■シンプルなロールオーバー
<headまたは外部JSファイル内>
◇仕組み+使い方
テンプレートではあまり使う所が無い気がしますが(笑)
作品サイトとかで使うつもりなので、メモ。ロールオーバーのJSです。
コレも元々はCSS HappyLifeのhiraさんが公開していたものです。それに手を加えました。
「***_off」という画像があったら、マウスオーバーした時、「***_on」に差し換える、というもの。
元々のは、ページ内の「***_off」という画像全部に反応してしまっていたので、指定したIDの範囲内に「***_off」という画像があったら「***_on」に差し換える、という感じでIDで範囲指定してみました。
でロールオーバーを適用したいIDを指定します。
という感じで複数指定も出来ますよ。
んで、元々のは、この関数の実行をaddEventListenerとかだけで実行させていました。
元々のがそれで実行してたんで、ならってそうしてました。
しかし、残念ながらMacIEでは無効でした(涙)ので、window.onloadで、古ーいブラウザでも動くよう、昔ながらの実行方法を追加してみました。
addEventListenerは、最近のブラウザのなんか特殊な仕組みを利用してるみたいです?
FlashのActionScriptでも実行出来るイベントらしいです。
window.onloadだけの方がシンプルだし、分かりやすい気がするのですが、addEventListenerは何かいいところがあるのでしょうか?
調べてみてもディープな世界ばかりで、どうにも理解出来ませんでした。
あ、「MacIEなんて知らねぇよ、けっ」って人は、window.onloadの部分を消してもらってもOKですよ。
MacIE以外ではしっかり動きますんで。
◇メリット
・ソースがシンプル
・HTMLに余計な記述を増やさず、ロールオーバーができる。
◇デメリット
・「***_on」の画像が無い場合、画像が表示されなくなります
・画像のプリロードをしていないので、最初はonの画像が表示されにくい。
追記:13時くらい
サンプル張るの忘れてました(汗)→Sample
追記:2007.6.29
画像のプリロードを動的にやってくれるバージョン完成♪
内容は↓にて。
↑のサンプルも更新しました。
<headまたは外部JSファイル内>
function smartOver() {
smartRollover('tes');
}
function smartRollover(idName) {
if(document.getElementsByTagName) {
var images = document.getElementById(idName).getElementsByTagName("img");
for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match(/_off¥./))
{
images[i].onmouseover = function() {
this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
}
images[i].onmouseout = function() {
this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
}
}
}
}
}
if(window.addEventListener) {
window.addEventListener("load", smartOver, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", smartOver);
}
else{
window.onload = smartOver;
}
<body>
<p id="tes"><img src="images/test_off.gif" /></p>
◇仕組み+使い方
テンプレートではあまり使う所が無い気がしますが(笑)
作品サイトとかで使うつもりなので、メモ。ロールオーバーのJSです。
コレも元々はCSS HappyLifeのhiraさんが公開していたものです。それに手を加えました。
「***_off」という画像があったら、マウスオーバーした時、「***_on」に差し換える、というもの。
元々のは、ページ内の「***_off」という画像全部に反応してしまっていたので、指定したIDの範囲内に「***_off」という画像があったら「***_on」に差し換える、という感じでIDで範囲指定してみました。
smartRollover('tes');
でロールオーバーを適用したいIDを指定します。
smartRollover('tes');
smartRollover('tes2');
smartRollover('tes3');
という感じで複数指定も出来ますよ。
んで、元々のは、この関数の実行をaddEventListenerとかだけで実行させていました。
元々のがそれで実行してたんで、ならってそうしてました。
しかし、残念ながらMacIEでは無効でした(涙)ので、window.onloadで、古ーいブラウザでも動くよう、昔ながらの実行方法を追加してみました。
addEventListenerは、最近のブラウザのなんか特殊な仕組みを利用してるみたいです?
FlashのActionScriptでも実行出来るイベントらしいです。
window.onloadだけの方がシンプルだし、分かりやすい気がするのですが、addEventListenerは何かいいところがあるのでしょうか?
調べてみてもディープな世界ばかりで、どうにも理解出来ませんでした。
あ、「MacIEなんて知らねぇよ、けっ」って人は、window.onloadの部分を消してもらってもOKですよ。
MacIE以外ではしっかり動きますんで。
◇メリット
・ソースがシンプル
・HTMLに余計な記述を増やさず、ロールオーバーができる。
◇デメリット
・「***_on」の画像が無い場合、画像が表示されなくなります
・画像のプリロードをしていないので、最初はonの画像が表示されにくい。
追記:13時くらい
サンプル張るの忘れてました(汗)→Sample
追記:2007.6.29
画像のプリロードを動的にやってくれるバージョン完成♪
内容は↓にて。
↑のサンプルも更新しました。
【HTML・CSS】 JavaScriptメモ(2):折り畳みナビ
「in the cage」と「avion」で使ってる折り畳みナビの紹介ですー。
■タイトルで開閉、折り畳みナビ
<headまたは外部JSファイル内>
◇仕組み+使い方
コレは元々、JUGEMカスタマイズ講座(現在は更新を休止しているようです)で公開されていた折り畳みスクリプトに手を加えたものです。
指定されたIDの中のテキストに、開閉用のリンクを追加し、指定されたIDをクリックで開けたり閉じたりする、というもの。
JUGEMカスタマイズ講座のは、開閉するリンク用の文字、マークを追加したりしていましたが、タイトル自体が開閉用リンクになった方がシンプルな気がしたので、改造してみました。
といっても、追加する開閉用リンクの文字を指定する箇所をテキストに指定し直しただけですが。
↑で適用するID、最初にクリックする前の状態(closeまたはopen)を指定します。
で、htmlの適用する箇所ですが、ちょっと注意が必要。
という風に、開閉用リンクにしたい場所は、「ID+name」、実際に閉じたり開いたりするしたい箇所には「ID+list」という感じで指定します。
◇メリット
・使うとデザイン的にすっきりするので、画面が見やすい。
・閲覧者的にはあまり目に入らなくて良いものを隠せる。
◇デメリット
・設置が面倒。
・スクリプトが長い
■タイトルで開閉、折り畳みナビ
<headまたは外部JSファイル内>
function ShortNavi() {
FoldNavi('newentry','close');
FoldNavi('category','close');
FoldNavi('comment','close');
FoldNavi('trackback','close');
FoldNavi('archives','close');
FoldNavi('recom','close');
FoldNavi('links','close');
FoldNavi('prof','close');
FoldNavi('fs1','close');
FoldNavi('fs2','close');
FoldNavi('fs3','close');
FoldNavi('fs4','close');
FoldNavi('fs5','close');
}
function FoldNavi(idName,initMode) {
var idTitle = Array(idName,'name').join('');
var idList = Array(idName,'list').join('');
var objTitle = this.document.getElementById(idTitle);
var objLists = this.document.getElementById(idList);
if (!objTitle || !objLists) return;
var dispMode = objLists.style.display;
if (!dispMode) {
var tmpText = Array('FoldNavi(',"'",idName,"','chng','');return(false);").join('');
var insMark = new Array();
var insText = new Array();
insMark[insMark.length] = Array('<a href="#" onclick="',tmpText,'" onkeypress="',tmpText,'">').join('');
insText[insText.length] = insMark.join('');
insText[insText.length] = objTitle.innerHTML + '</a>';
objTitle.innerHTML = insText.join('');
objLists.style.display = (initMode == 'close') ? 'none' : 'block';
} else if (initMode == 'chng') {
objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
}
}
<body>
<body onload="javascript:ShortNavi();" id="n{eid}">
◇仕組み+使い方
コレは元々、JUGEMカスタマイズ講座(現在は更新を休止しているようです)で公開されていた折り畳みスクリプトに手を加えたものです。
指定されたIDの中のテキストに、開閉用のリンクを追加し、指定されたIDをクリックで開けたり閉じたりする、というもの。
JUGEMカスタマイズ講座のは、開閉するリンク用の文字、マークを追加したりしていましたが、タイトル自体が開閉用リンクになった方がシンプルな気がしたので、改造してみました。
といっても、追加する開閉用リンクの文字を指定する箇所をテキストに指定し直しただけですが。
FoldNavi('newentry','close');
↑で適用するID、最初にクリックする前の状態(closeまたはopen)を指定します。
で、htmlの適用する箇所ですが、ちょっと注意が必要。
<h3 id="newentryname"></h3>
<ul id="newentrylist">
<li></li>
</ul>
という風に、開閉用リンクにしたい場所は、「ID+name」、実際に閉じたり開いたりするしたい箇所には「ID+list」という感じで指定します。
◇メリット
・使うとデザイン的にすっきりするので、画面が見やすい。
・閲覧者的にはあまり目に入らなくて良いものを隠せる。
◇デメリット
・設置が面倒。
・スクリプトが長い
【HTML・CSS】 JavaScriptメモ(1):広告カラーリング
2008.3.24追記
以下のエントリは、JUGEMの広告の仕様が変わったため、使用できなくなりました。
JavaScriptエラーになってしまうため、「javascript:CM();」がテンプレート内にある場合は削除してください。
----------------------------------------------------------------
JavaScript関連のメモがようやくまとまったので、更新してゆくデス。
カテゴリが「HTML・CSSの話」になってるけど、気にしないw
いつか書こうと思っていた、広告の色変えのヤツ。
JUGEMのテンプレ配布する人向けですね。
■広告カラーリングJavascript
◇仕組み
まず、JUGEMさんの広告部分について。
この広告部分はiframe部分に特定のアドレスを読み込んで表示させています。
広告の枠線、背景、タイトル、テキスト、URLの色は、↓の
引数部分で変えているようです。
なので、ページ内にある、「jugem_ad」というフレームのアドレスの、引数部分に任意のカラーリングを指定して、広告のテキスト部分の色を強制的に変えているのです。
◇メリット
・テンプレを使う人が、テンプレに合わせて広告のカラー設定を変更する手間が省ける。
・テンプレートのサンプルを表示した時、広告部分に違和感が出ない。
◇デメリット
・広告を画像に設定していても、テキスト広告になってしまう。
・ページを読み込んでいる間は、JSで変更する前のカラーリングで広告が表示されて、ちょっとダサイ。
以下のエントリは、JUGEMの広告の仕様が変わったため、使用できなくなりました。
JavaScriptエラーになってしまうため、「javascript:CM();」がテンプレート内にある場合は削除してください。
----------------------------------------------------------------
JavaScript関連のメモがようやくまとまったので、更新してゆくデス。
カテゴリが「HTML・CSSの話」になってるけど、気にしないw
いつか書こうと思っていた、広告の色変えのヤツ。
JUGEMのテンプレ配布する人向けですね。
■広告カラーリングJavascript
<headまたは外部JSファイル内>
function CM(){
top.jugem_ad.location.href = "http://imaging.jugem.jp/ad/ad_feedme.html?border=fffcf4&bg=fffcf4&title=535353&text=535353&url=666666";
}
<body>
<body onload="javascript:CM();" id="n{eid}">
◇仕組み
まず、JUGEMさんの広告部分について。
この広告部分はiframe部分に特定のアドレスを読み込んで表示させています。
広告の枠線、背景、タイトル、テキスト、URLの色は、↓の
http://imaging.jugem.jp/ad/ad_feedme.html?border=fffcf4&bg=fffcf4&title=535353&text=535353&url=666666
引数部分で変えているようです。
なので、ページ内にある、「jugem_ad」というフレームのアドレスの、引数部分に任意のカラーリングを指定して、広告のテキスト部分の色を強制的に変えているのです。
◇メリット
・テンプレを使う人が、テンプレに合わせて広告のカラー設定を変更する手間が省ける。
・テンプレートのサンプルを表示した時、広告部分に違和感が出ない。
◇デメリット
・広告を画像に設定していても、テキスト広告になってしまう。
・ページを読み込んでいる間は、JSで変更する前のカラーリングで広告が表示されて、ちょっとダサイ。
【テンプレ】 avion
どうもお久しぶりです。
ずいぶん前から構想はあったんですが、上手く組み立てられず、ようやく出来きました。
「avion」
フランス語で「平面」を意味します。でも逆翻訳かけると「飛行機」になる不思議。
そもそもwebは平面的なものなんですが、立体的な平面、よくある壁みたいなものを作ってみたくて。
少しザラザラした背景に、文字を書きなぐっているような、はたまた写真を貼り付けているような。
そんなイメージ。
そして、今回はよりリスト周りと文字周りを見る人に配慮(したつもり)。
深玖さんやその他の方の記事で、
「月別アーカイブとか要らないんじゃない?コメントとか要らないんじゃない?」
って言うのを読んで、
「要る人は要るし、要らない人は要らない。
でも、テンプレだもの、入れておこう。要らない人は削ればOK。
とりあえず、見てる側で要らない人の為に隠しておこうか」
というわけで、こんなんなりました。
それから、世の中には
「文字が小さいと読む気にならないヒト」と「文字が小さくないと書く気にならないヒト」またはその逆のヒト達
がいるようです。
助け合い掲示板とかでも全体的に小さくしたいとか質問も飛んでいたり。
個人的には読みづらいので12pxは欲しいところですが。
なので今回は文字サイズを可変できるようにしてみました。
シェアの多いIE6ではpx等で固定した文字がサイズ可変できないという、不親切な仕様があるので、それに対応させました。
winIEでは文字サイズ「中」で、fxやMacIE、safariの文字サイズ「100%」で、本文文字サイズが12px相当になります。
技術的な話は別エントリで書きます。
カスタマイズは続きにて。
■avion DATA
・全体の幅:600px 記事部分の幅:600px
・1カラム
・文字可変、リスト折り畳み
→avionのDL Sample
【Mobile】 買っちゃった!
無性にフリルの世界に行きたくなった帰り道。
クローゼットチャイルドにふらり寄り道。
ホント最近はイノセントワールドのカットソーが欲しくて欲しくて…!
って、売ってたよ!
今年発売された奴ではないようだけども、身体のラインに沿って薔薇のケミカルレースが!
ちゃんと背中のラインにもあるのだよ!
ドツボでした。
素敵過ぎ。
写メで分からないのが黒×黒の辛いところ。
今年発売のも欲しいけども、店に行けてません。
近くに出来れば無駄に遊びに行くのに!
週末はコレ着てます。
遊び回る予定でキュウキュウです。
金曜ロードショーでラピュタやってたので、夕飯食べながら見てました。
古くても良いものは良い。
ロリィタの魅力と近いものを感じました。
【Mobile】 from MOBILE
こっちがなかなか更新出来ないのは、モブログ設定をしてないせいだと気付きました。笑
というわけで、携帯から用カテゴリを付けてみました。
最近、Twitterも重いし、Twitter Mobileも更新しても、パソコンで付けたログが見れなかったりだし;
一言用のブログとか、RSSとか飛ばせるメモログみたいの作ろうかと思ったんだけど、だったら携帯用カテゴリでいいじゃんねぇ、と。笑
携帯用は写メとかヒトコト・つぶやきのログになります。
で、今回の写真は昨日お迎えしました、Suicaペンギンぬいぐるみ、LLサイズ。
サイズ比較が缶チューハイな辺り、どうよ。笑
今日もこの子を抱き枕に寝ますですよ♪
【WEB】 Safari for PC(Windows)が出たわけだが
http://www.apple.com/jp/safari/
会社のPCでDL→インストールしてみました。
が。
何がおかしいのか、メニューの文字とか諸々が全部棒線(ー)になってまする。orz
何度入れなおしてもダメ。しょぼん。
フォントキャッシュの削除とかも試してみたんだが…う〜ん;
他の人も入れていたようなので、見せてもらうと、日本語ページは「Osaka」にしないと見れない様子(ページの日本語全部が[ー]に;)
色々試してみたいけど、正規版出るまでお預けですね;
何か対策しってるヒト居たら教えてください;;
地道に色々試してはみますが;
おっと。
お久しぶりです。
Safariが色々衝撃的だったもので、つい。笑
今週から1ヶ月くらいはmixi関係のお誘いが多くなるので、mixiでなくこっちで日記を書きまする。
またちょっとずつWebへの興味が増えてきたので、考察とかぼやきとか書きますよ。
じ、時間ができたら、前回のエントリーで書いたJavaScriptも…はぃ。
会社のPCでDL→インストールしてみました。
が。
何がおかしいのか、メニューの文字とか諸々が全部棒線(ー)になってまする。orz
何度入れなおしてもダメ。しょぼん。
フォントキャッシュの削除とかも試してみたんだが…う〜ん;
他の人も入れていたようなので、見せてもらうと、日本語ページは「Osaka」にしないと見れない様子(ページの日本語全部が[ー]に;)
色々試してみたいけど、正規版出るまでお預けですね;
何か対策しってるヒト居たら教えてください;;
地道に色々試してはみますが;
おっと。
お久しぶりです。
Safariが色々衝撃的だったもので、つい。笑
今週から1ヶ月くらいはmixi関係のお誘いが多くなるので、mixiでなくこっちで日記を書きまする。
またちょっとずつWebへの興味が増えてきたので、考察とかぼやきとか書きますよ。
じ、時間ができたら、前回のエントリーで書いたJavaScriptも…はぃ。
【テンプレ】 hortensia
はい、予告どおり、新しいテンプレ。
「hortensia」
オルタンシアとかオルタシアとか読みます。意味は「紫陽花」。フランス語です。
紫陽花と言えば、青や紫の小さい花が密集してる感じですけども、今回は紫陽花らしいモチーフは一切使わず、色で表現してみました。
紫陽花は形もそうですけど、様々な色が集合してるのも、特徴の一つだと思うので。
サイト説明の部分は1行から3行が限界です;
それから、今回は極力divを削ったものにしたので、サイドバー部分を弄くるのはちょっとコツが必要です。
CSSをじっくり見て、よく分からない場合はどうぞ聞いてください。
あ。今回はちょっと面白いJavaScriptを使ってます。
Sample見てもらえると分かりますが、記事部分の画像が交互に変わってます。
このJavaScriptに関しては後々記事を書きますので、少々お持ちくださいませ。
■hortensia DATA
・全体の幅:800px 記事部分の幅:485px サイドバーの幅:195px
・2カラム
→hortensiaのDL Sample
【日常の吐息】 とりあえず、目標達成?
自分用のテンプレ、ようやっと変更しました〜。
一部、内容をハメてみたら、めっちゃ違和感あって、かなりヘッダは直しました。
まぁなんとか、なったかな?
まだまだやりたいことはあるので、のんびりカスタマイズしながら、勉強しようかと。
デザインは、夏も近くなってきたので、涼し気な青で。
そろそろ蒸してきますからね、透明感で爽やかに、がコンセプト。
模様変えたら冬っぽくも出来そうだなぁとか思ったのは内緒。
夏らしくサブカラーでオレンジ入れても良かったかなぁ。
さて、XHTMLの方。
今回やってみた事は、フォーム回り。
フォームをリスト化して、labelとinputをフロートで分けて整えてみました。
定義リスト使おうかとおもったんですが、やってみると意外とタグ増えちゃうなーと思って。
どうせlabel付けてるんだから、コレ使えないかなーとか思ってやってみました。
意外となんとかなるんだねぇ。
フォームでやる分には、問題ないのかなぁ…?
labelってフォーム部品を関連付けるタグ、で合ってますよね?
だから、意味的にもOKじゃないかなーと。
定義リスト使う方が正しいのでしょうが、定義リスト使うのと、テーブル使うのと、同じ気がするんですよね、意味合い的に。
見た目の違いだけなんじゃないかなーとか。
分からない時点でまだまだ勉強が足りませんね。はは
次は、フォームに必須要素つけてみようかな。
以前、書き込みしてくれたかたで、名前無い方いたので。
できるなら、名前無しの時はNoNameを代わりに入れる、みたいな事できないかなーとか。
まぁ、知的好奇心だけは旺盛です。
配布用も、そろそろ新しいの出しますかね〜。
一部、内容をハメてみたら、めっちゃ違和感あって、かなりヘッダは直しました。
まぁなんとか、なったかな?
まだまだやりたいことはあるので、のんびりカスタマイズしながら、勉強しようかと。
デザインは、夏も近くなってきたので、涼し気な青で。
そろそろ蒸してきますからね、透明感で爽やかに、がコンセプト。
模様変えたら冬っぽくも出来そうだなぁとか思ったのは内緒。
夏らしくサブカラーでオレンジ入れても良かったかなぁ。
さて、XHTMLの方。
今回やってみた事は、フォーム回り。
フォームをリスト化して、labelとinputをフロートで分けて整えてみました。
定義リスト使おうかとおもったんですが、やってみると意外とタグ増えちゃうなーと思って。
どうせlabel付けてるんだから、コレ使えないかなーとか思ってやってみました。
意外となんとかなるんだねぇ。
フォームでやる分には、問題ないのかなぁ…?
labelってフォーム部品を関連付けるタグ、で合ってますよね?
だから、意味的にもOKじゃないかなーと。
定義リスト使う方が正しいのでしょうが、定義リスト使うのと、テーブル使うのと、同じ気がするんですよね、意味合い的に。
見た目の違いだけなんじゃないかなーとか。
分からない時点でまだまだ勉強が足りませんね。はは
次は、フォームに必須要素つけてみようかな。
以前、書き込みしてくれたかたで、名前無い方いたので。
できるなら、名前無しの時はNoNameを代わりに入れる、みたいな事できないかなーとか。
まぁ、知的好奇心だけは旺盛です。
配布用も、そろそろ新しいの出しますかね〜。
NEW ENTRYS
- 生存報告とか色々なお知らせ (12/28)
- 生存報告とお知らせと宣伝と (08/21)
- CSS Naked Day だそうです。 (04/09)
- gift (03/28)
- エントリが1ヶ月おきな件について (03/24)
COMMENTS
TRACKBACK
- JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ buggy_trekkerの学習帳 (10/24) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Memoのメモ (08/23) - (追記:2007.8.29)IE7でbodyの背景が拡大/縮小されない!【IE7対策】
⇒ SOHOカアチャン通信 (06/09) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ WEB制作会社のメモ帳in徳島(ホームページ作成Tips) (11/18) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ btmup Blog [tech] (11/04) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Bowz::Notebook (03/12) - Twitterな話。
⇒ COLORFULLIFE (05/16)
ARCHIVES
- December 2010 (1)
- August 2009 (1)
- April 2008 (1)
- March 2008 (2)
- February 2008 (1)
- December 2007 (1)
- November 2007 (1)
- October 2007 (1)
- August 2007 (1)
- July 2007 (2)
- June 2007 (10)
- May 2007 (4)
- April 2007 (9)
- March 2007 (16)
- February 2007 (17)