--年--月--日
2010年03月16日
アクセスカウンタ
今まで全く気にしていなかったけど、アクセスカウンタってblogには付けるもの？
どこから来た人が見てるとか、今日のアクセス数はすごいとか統計はどうのとか全く興味がないので・・・。
仮設置はしてみたけど、Adblockな人はまずカウンタ読み込まないだろうし（自分も「あれ？画像でないだけど！？」とすこし戸惑ったけどADBCLOCKで消えてただけだったｗ）、なんともしっくりこないかんじ。
何故アクセスカウンタを設置してみようと思ったかというとたまたまブログランキングで自分のサイトが3000件中の400位？くらいの位置にきてるときがあったのが気になっただけだけども。
更新頻繁にしてるときはFC2にtrackback飛んでるだろうからたまたまアクセスが増えることもあるかと思うけど、そんなたいした事を書いてるわけでもないし、まだまだブロガーとしては質は良くないほうだと自認しているので、
やっぱ気にしないことにしようかな・・ｗ
しばらくはカウンタ設置はしてみるけどそのうち撤去するかもしれません。
以上、どうでもいいこと。（一週間も更新しないとこからしてあれだし・・・ｗ）
あくまで備忘録ですので。
時にはコンピュータとは全く関係の無い話、ゲームとかぱちすろとか音楽とかの話題を書く事もあるかもしれませんが、そんな話をネタに知識を共有できる仲間が増やせることができればこの上ない幸いです。
どこから来た人が見てるとか、今日のアクセス数はすごいとか統計はどうのとか全く興味がないので・・・。
仮設置はしてみたけど、Adblockな人はまずカウンタ読み込まないだろうし（自分も「あれ？画像でないだけど！？」とすこし戸惑ったけどADBCLOCKで消えてただけだったｗ）、なんともしっくりこないかんじ。
何故アクセスカウンタを設置してみようと思ったかというとたまたまブログランキングで自分のサイトが3000件中の400位？くらいの位置にきてるときがあったのが気になっただけだけども。
更新頻繁にしてるときはFC2にtrackback飛んでるだろうからたまたまアクセスが増えることもあるかと思うけど、そんなたいした事を書いてるわけでもないし、まだまだブロガーとしては質は良くないほうだと自認しているので、
やっぱ気にしないことにしようかな・・ｗ
しばらくはカウンタ設置はしてみるけどそのうち撤去するかもしれません。
以上、どうでもいいこと。（一週間も更新しないとこからしてあれだし・・・ｗ）
あくまで備忘録ですので。
時にはコンピュータとは全く関係の無い話、ゲームとかぱちすろとか音楽とかの話題を書く事もあるかもしれませんが、そんな話をネタに知識を共有できる仲間が増やせることができればこの上ない幸いです。
2010年03月08日
CSS position:absolute でie6mustdie（哀）
googleやyoutubeのie6サポート打ち切りたい気持ちがよくわかる。
とくにXHTML1.0準拠で互換表示を許さないレイアウトを組んでいるときに感じます。
今日はレイアウトについてIE6を利用しながらもIE6に鉄槌を下したというお話。
結果から言いますと、
残念残念。
とくにXHTML1.0準拠で互換表示を許さないレイアウトを組んでいるときに感じます。
今日はレイアウトについてIE6を利用しながらもIE6に鉄槌を下したというお話。
結果から言いますと、
div#ie6mustdie {
height:auto;
position:absolute;
top:100px;
bottom:40px;
}
のようにしたところ、上と下の同時指定とか、左と右の同時指定とか、そんなことできっかよ。ぶぅ！とIE6に言われたわけで、IE8ならOKなわけです。残念残念。
嫌いキライ大っきらい！: 小技を利かせてheight:100%なレイアウト調整してるのに！
ie6mustdie.
おいおい、せっかく高さをCSSで階層指定の100%とかautoとか組み合わせてXB対策してるのにそこ突いたら身もふたもないぜ、と自分でも思っておりますが、互換表示などやりたくありませんし、こうしないとヘッダー、フッター領域を固定で確保しつつ、中央のメインコンテンツをブラウザサイズで可変した上でさらに内部をスクロール（ちゃんとスクロールバーを全部見せるように）させることが不可能なのです。
ヘッダー領域、フッター領域、メインコンテンツ全てにパーセント指定すればいけますけど見た目が良くないし、メインコンテンツには動的にコンテンツが入ったり出たりするのでレイアウト崩れが起きることは必至。
上限下限のパーティションを明確に区切るには position=absolute, top, bottom 指定が必須な気がします。
IE6のための処方箋を: 施せる方法があれば教えてください。
微妙にレイアウトをごまかしてIE6でも対応する方法ならいくらでもあるし、戴けないCSSプロパティを指定する方法もありますけど、ここは正攻法で解決できる策が見つかるまでは、やはり ie6mustdie しかないみたいです。
ハッピーになれるかもしれないテストコード
モックアップとhtml,cssソースは以下のような感じ。
IE6救済は可能だろうか。少なくともこのテストコードではIE6ではまともな描画は行いません。
画面のレイアウトと付き合っていくのはほんと、永遠のテーマかもしれない。
HTML5でCSS3な時代になると楽になるかもしれないけど、やはりHTML5というのはdevelopper側の都合なのだな、と思います。ブラウザを使う側のWEBクライアントはお客様ですもん。
CSS
/** style.css **/
@charset 'UTF-8';
* {
margin:0;
padding:0;
}
html {
height:100%;
}
body.layout-lunachat-liquid {
height:100%;
width:100%;
}
/* 固定ヘッダー */
div#container-header {
background-color: rgb(255, 187, 64);
height: 90px;
width: 100%;
position:absolute;
top:0px;
}
/* メインとその他のコンテンツ領域
* ここでとどめを刺すこととなる。
*/
div#container-content {
background-color: #cc8888;
overflow:auto;
height:auto;
position:absolute;
left:10px;
right:10px;
top:100px;
bottom:40px;
}
/* メイン */
div#content{
height:100%;
background-color:#ccccff;
margin:auto;
overflow:auto;
}
/* メインを邪魔しないその他のコンテンツ */
div#content-right{
height:100%;
width:200px;
background-color:#0f0;
float:right;
}
/* 固定フッター */
div#container-footer {
clear:both;
background-color: rgb(255, 187, 64);
height: 30px;
width: 100%;
position:absolute;
bottom:0px;
}
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta name="generator" content="VIM - Vi IMproved version 7.2"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body class="layout-lunachat-liquid">
<div id="container-header">
#container-header<br/>
<input type="button" value="サイドバーを隠す" onclick="javascript:document.getElementById('content-right').style.display='none';"/>
<input type="button" value="サイドバーを表示" onclick="javascript:document.getElementById('content-right').style.display='block';"/>
</div>
<div id="container-content">
<div id="content-right">
#content-right<br/>
hoge<br/>
hoge<br/>
hoge<br/>
hoge<br/>
</div>
<div id="content">
#content<br/>
test first<br/>
12345678901234567890123456789012345678900123456789001234567890<br/>
<script type="text/javascript">//<![CDATA[
for(i=0;i<50;i++)document.write('test:'+i+'<br/>');//]]>
</script>
</div>
</div>
<div id="container-footer">
#container-footer
</div>
</body>
</html>
2010年03月05日
短いURL
このサイトのブログテンプレートは小粋空間様のものを利用しているのだけれど、ブログエントリー表示も少しお遊びで学てみた。
別に意味はないけど、なんか新鮮でいいかんじ。
ところで、
TinyURL によるとこのサイトのURLは http://tinyurl.com/yb7c8f7 というかんじになるそうだ。
Onion network みたいな感じで内部的に独自解釈してるのかな。
別に意味はないけど、なんか新鮮でいいかんじ。
ところで、
TinyURL によるとこのサイトのURLは http://tinyurl.com/yb7c8f7 というかんじになるそうだ。
Onion network みたいな感じで内部的に独自解釈してるのかな。
2010年03月05日
ソース表示方法について模索中
SyntaxHighlighter？そうだ、カスタマイズしてみよう
まずはクッキープラグインを投下。・jQuery plugins : jquery.cookie.js
Test:現在のテストコード,CSSはお好みで。
前提として jquery.cookie, SyntaxHighlighter2.1 を利用jQuery.noConflict();
var jQ$ = jQuery;
としています。
やってみようと思ったこと。
・SyntaxHighlighterでソースを表示
・クッキーを使ってロード時にSyntaxHighlighter適用のON/OFF。
・ソース長いんだけど、閉じたい。
・行番号のせいで横幅が・・・もっと広く見たい。
・生ソースとの表示切替がしたい。
最初に定義しておくもの。
//クッキー
var cs = jQ$.cookie('syntaxhighlight');
//オリジナルソース格納用連想配列
var source = {}
//デフォルトでSyntaxHighlighter使用
if (!cs) {
jQ$.cookie('syntaxhighlight','yes',{expires: 7});
cs = jQ$.cookie('syntaxhighlight');
}
//自動実行切り替え用関数
function toggleSH(){
var txt = jQ$('#tsh:checked').length==1 ? 'yes' : 'no';
var color = txt== 'yes' ? '#446699' : '#8FABBE';
jQ$('#tshl').css('background-color',color);
jQ$.cookie('syntaxhighlight',txt,{expires:7});
cs = jQ$.cookie('syntaxhighlight');
}
/*------------------------------------------------------
* SyntaxHighlighterの設定
SyntaxHighlighter.config.clipboardSwf = null;
SyntaxHighlighter.config.tagName="pre";
SyntaxHighlighter.defaults['collapse'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.defaults['auto-links'] = false;
*------------------------------------------------------*/
ロード後に実行するもの。
jQ$(function(){//ロード後処理開始
var des = jQ$('#banner-description');
var tsh = jQ$('<input type="checkbox" id="tsh" />');
var tshl = jQ$('<label id="tshl">Syntax</label>');
des.append(tshl).append(tsh);
jQ$('#tsh').click(function(){toggleSH();});
if(cs=='yes'){
jQ$('#tsh').attr('checked',true);
toggleSH();
}
//PREタグの前にツール挿入
jQ$('pre').before(jQ$(
'<div></div>' +
'<div class="shbar">'+
'<button class="hideline" title="ちょっとそこの行番号" alt="ちょっとそこの行番号">消</button>'+
'<button class="shsrc">SRC</button>'+
'<button class="togglesource" title="ソース開閉" alt="ソース開閉">−</button>'+
'</div>'+
'<div class="clearfix"></div>'));
//ソース開閉ボタン
jQ$('.togglesource')
.click(function(){
jQ$(this).parent().next().next().toggle();
var svb=jQ$(this).text()=='−'?'＋':'−';
jQ$(this).text(svb);
});
//行番号削除ボタン
jQ$('.hideline')
.css('display','none')
.click(function(){
jQ$(this).fadeOut('slow').parent().next().next().find('td.number').remove();
});
//ソース切り替えボタン
jQ$('.shsrc')
.click(function(){
var my = jQ$(this);
var sc = my.parent().next().next();
var sid;
if(/pre/i.test(sc.get(0).tagName)){
var copy;
if(!my.attr('id')){
copy = sc.clone();
}
SyntaxHighlighter.highlight({},sc.get(0));
if(!my.attr('id')){
sid = 's'+my.parent().next().next().attr('id');
source[sid] = copy;
my.attr('id',sid);
}else{}
my.prev().show();
}else if(/div/i.test(sc.get(0).tagName)){
if(!source[my.attr('id')]){return;}
sc.before(source[my.attr('id')]);
sc.remove();
my.prev().hide();
}
});
//最後にぽちっとクッキーがyesならクリックイベントですべてのpreにSyntaxHighlighter.highlight.
if(cs=='yes'){
jQ$('.shsrc').click();
}
});//ロード後処理終わり
//CSSは #tsh, #tshl, .hideline, .shsrc, .togglesource, などを設定。
テストコードなので殴り書きです。もう少しスマートに改良すればLunachatに投入してもいいかもしれない。
直観で思ったことを書くときとかって普段やってる手順とか体裁とか、関係ないですね。
思いつき順で処理が進んで行くからいわゆるみみずコードになってしまうわけで・・。
以上。
2010年03月05日
作業中。
OK:肯定的な話題、成功事例、前向きなお題用。
例：先生、ヤシマ作戦大成功です。
NG:否定的な話題、失敗事例、後ろめたいお題用。
例：先生、最近彼女とのシンクロ率が低下する一方です・・。
Test:テストコード、お作法。
例：先生、このダミープラグを引っこ抜くとどうなるかテストしてみていいですか？
TODO:閃き、インスパイア。
例：そういえば先生、最近フィギュア、やってます？(どっちのフィギュアもあり得る展開）
