メイン

「bookmarklet」のアーカイブ

2008年8月22日

ページへのリンクとはてなブックマーク数のHTMLを取得するbookmarklet

ブックマーク数を表示するhttp記法を拡張し、タイトルを併記できるようになりました - はてなダイアリー日記

上記はてなダイアリーの機能追加のように、言及先のはてなブックマーク数が一緒に出せると便利かなーと思い、bookmarklet作りました。

ページリンク&はてブ数取得

↓中身はこんな感じです

javascript:(function(){var s = '<a href="'+window.location.href+'" target="_blank">'+document.title+'</a> <a href="http://b.hatena.ne.jp/entry/'+window.location.href+'" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/'+window.location.href+'"></a>';prompt('',s);})();

2008年5月 9日

Twitterのページを自動更新するGreasemonkey

Twitterクライアントに今ひとつなじめない僕は、未だにwebからTwitterをやってるんですが、そこで欲しくなったのが標題のスクリプト

たぶんだれか作ってるんだろうけど、ちょっと探してなかったから作っちゃいました。

Auto-reload Twitter

2008年5月 3日

Twitter翻訳Greasemonkey & bookmarkletをupdate

Twitterのデザイン変更に伴い、Twitter翻訳Greasemonkeyとbookmarkletをアップデートしました。

Greasemonkey:Translate Twitter

bookmarklet:Translate Twitter

Twitterのデザインは結構頻繁に更新されてるんですが、今回は、発言部分のspanタグのクラス名が変わってしまい、クラス名でspanタグを特定していた部分が動作しなくなってしまってました。

そのクラス名の変更ですが、"entry-content"から"entry_content"に変わるという修正で、始めどこが変わったのかまったく気づきませんでした。まいったね。

で、このスクリプトですが、日本よりも海外の人の方が反応してくれていて、いくつかのブログで紹介していただきました。

紹介していただいたブログは、はてぶでまとめています。

はてなブックマーク - Chrisのブックマーク/ feedback/ TranslateTwitter

こちらのページの、

Considering how big Twitter is in Japan, we just might need these!

という部分が、面白いですね。僕は「他言語」→「日本語」を想定していたんですが、海外の人から見たら「日本語」→「自国語」という方が需要があるのかも。

2008年4月27日

はてなブックマークのページではてなスター順にソートするbookmarklet

はてブのページで、コメントに付けられたはてなスターの数順にソートするブックマークレットを書いてみました。

sort by hatena star

ソースはこちらで確認できます。

for文がまわりまくっているので、ちょっと遅い感じかなぁ。

もっとこうしたら早くできるよってのがあったら教えてください。

2008年3月28日

twitterのページにGoogle AJAX Language APIを使った翻訳機能を付け加えるGreasemonkey & bookmarklet

先日リリースされたGoogle AJAX Language API が仕事で使えるんじゃないかと思い、仕様を見ているときにふと思いつきました。

日本人ばっかりをFollow(だっけか)しているとあまり気になりませんが、twitterのpublic_timelineを見ると、世界規模のサービスだけあって色んな言語が飛び交っています。で、その人がどんな発言してるんだろうかと気になるわけですが(僕だけ?)、いちいち翻訳ページにコピペするのも面倒だし、そもそも何語か分からない言語もたまに見かけます。

で、今回作ったGreasemonkeyとbookmarklet。

Greasemonkey:Translate Twitter

bookmarklet:Translate Twitter

これは何?

このGreasemonkeyを登録してtwitterのページに行くと(或いはtwitterのページでbookmarkletを実行すると)、↓こんな感じで、タイムライン上に「Translate!」リンクが表示され、

 

20080328_01.png↓右上には、翻訳先の言語プルダウンが表示されます。

 

20080328_02.png翻訳先の言語を「English」にしている状態で「Translate!」をクリックすると、↓こんな風に下に翻訳結果が表示されます。

 

20080328_03.pngGoogleのAPIがサポートしていない言語間の翻訳は、一旦英語に翻訳して、それを更に翻訳するという風にしています。

 

20080328_04.pngなので、正確さがさらに欠けてしまいます。

ちょっとした思いつきで作った割には面白いツールになったかなと。これで他国語に恐れず色んな人をFollowしまくりましょう(って言うてる僕がまずやれって話ですが)!

Greasemonkeyおよびbookmarkletへの機能追加・改善・不具合報告は本コメント欄へお願いします。 

2008年1月23日

iGoogleテーマエディタのコード解説 --- その2

今日は「Gmailの使い方」メールマガジンでもiGoogle Theme Editor を紹介していただきました。ありがとうございます。

というわけで昨日のコード解説の続きです。

 

150~202行目:エディタ自身のHTMLです。

多言語対応させるメッセージ部分はmessage(key,lang)で返ってきたメッセージを結合させています。なんか眺めれば眺めるほどリファクタリングできそうだなぁと思ってきましたよ。

 

203~245行目:スタイルオブジェクトの定義とスタイル指定。

エディタのCSSをJSONで定義しています。jQueryは、$.css(key,value)や$.css(styleObj)で簡単にスタイルを指定できるので、外部にCSSファイルを持たないようにしています。

また、226~230行目では、各ブロックの開け閉めを$.toggle(fn,fn)で設定しています。これまた簡単ですわ。

var deco = {"cursor":"pointer","text-decoration":"underline"};
$('#str_1').css(deco).toggle(function(){$(this).text('[-]'+message('m1',lang));$('#tbl_1').show();},function(){$(this).text('[+]'+message('m1',lang));$('#tbl_1').hide();});

 

246~284行目:テキストエリアやセレクトボックスで値を入力/選択したときに、即座にiGoogleの画面に繁栄させるようにしているところです。

Class名とかはFireFoxのfirebugでちまちま調べながら作りました。

$('#header_bgcolor').keyup(function(){try{$('#nhdrwrap').css('backgroundColor',$('#header_bgcolor').val())}catch(e){}}).val('#FFFFFF').keyup();

あと、上記のように、テキストエリアにkeyupイベントで実行される関数を割り当て、それをkeyup()で実行できることを知りました。超便利。上記部分は、jQueryオブジェクト取得→keyupイベントに関数割り当て→初期値設定→keyupイベントに割り当てた関数を実行という流れになっています。これがつらつらとメソッドチェーンで書けちゃうのが気持ちよいです。さすがjQuery。

 

こうやって解説を書きながら、かなり無駄に書いている部分が多いなぁと思ったので、リファクタリングしていこうと思います。

なんか2日に分けて書くと言いつつさらっと終わっちゃいました。

2008年1月22日

iGoogleテーマエディタのコード解説 --- その1

先日公開した「iGoogleテーマエディタbookmarklet」をWebOS Goodiesさんで取り上げていただきました。ありがとうございます。

で、今日はbookmarkletのコード解説をしたいと思います。といっても、たいしたソースじゃないですが。

(※行数はversion 0.1.0 でカウントしているので、後から見るとずれるかもしれませんが雰囲気で追ってください)

1~11行目:コメントです。

12~18行目:

var jq=document.createElement('script');
jq.id="jqery";
jq.type="text/javascript";
jq.src="http://igoogle-theme-editor.googlecode.com/svn/trunk/iGoogleThemeEditor/dist/jquery-1.2.2.min.js?"+new Date().getTime();
document.getElementsByTagName('head')[0].appendChild(jq);

いきなりjQueryのjsファイルをheadにappendしています。今回はデザインを色々といじるってことで、ライブラリを読み込んだ方が都合が良かったのでそうしました。jQueryを選んだ理由は、ファイルサイズが小さく、グローバルなオブジェクトを汚染せず、かつスタイルの操作がやりやすいからです。

19~22行目:

var jqueryStartTimer;
if(!jqueryStartTimer) jqueryStartTimer = setInterval(themeEditorload,500);

続いて、iGoogleテーマエディタを表示するために、setIntervalで定期的にthemeEditorload()を実行します。即実行できないのは、scriptタグで後からappendしたjsファイルが、ロードが終了し、ページ上でコンパイルされるまでタイムラグがあるからです。

23~31行目:

function themeEditorload(){
try{
if($){
 clearInterval(jqueryStartTimer);
}else{
 throw new Exception();
}

メインメソッドです。$をチェックし、定義されていれば(if($)でtrueが返れば)、setIntervalで定義したタイマーをclearIntervalでクリアしています。もしこの関数が実行されたとき、まだjQueryがロードされていなければ、Exceptionをthrowしてスルーします。

32~46行目:URLを操作する現在開発中のjQueryプラグインです。まだアルファ版にもならない完成度ですが、試しに使ってみることにしました。

47~61行目:iGoogle Theme 用のXMLの元データです。文字列の最後に\を付ければ改行できることを知ったので、そういう風に書いています。

62~65行目:

function createAttr(id,attr){
 if($('#'+id).val()) return '<Attribute name="'+attr+'">'+$('#'+id).val()+'</Attribute>\r\n';
 return '';
}

この後のcreateXML()の中で使っている関数です。iGoogle Theme 用のXMLを作る際、ユーザが値をテキストフィールドに入力していれば、引数のデータを利用してXMLデータの一部を返します。

66~102行目:XMLを生成している部分です。思いっきりベタ書きです。

103~104行目:

var lang = $.urlParams('lang',$('#igteid')[0]);

ここで、先ほど紹介したURLを操作するプラグインを利用しています。このブックマークレットをappendしているscriptタグのsrc属性のURLから、GETパラメータに指定されているlang属性を取得しています。

105~141行目:ここで多言語のメッセージオブジェクトを保持しています。そう、このbookmarkletは無駄に多言語対応させているのです。

142~149行目:

function message(key,lang){
 try{
  var t = words[key];
  return (t[lang])?t[lang]:t['en'];
 }catch(e){
  return '';
 }
}

メッセージオブジェクトから、言語名とキー値を元に、メッセージを取得します。デフォルトは"en"の値です。

 

長くなったので、今日はここまで。続きはまた明日。

2008年1月20日

iGoogleのテーマXMLを作成するbookmarklet

先日公開されたiGoogle Theme API を便利に使うためのbookmarkletを作ってみました。

iGoogle のページで実行すると、テーマ変更用のエディタが表示されます。

iGoogle Theme Editor (←右クリックからお気に入りに追加できます)

javascript:var s = document.createElement('script');s.id="igteid";s.type="text/javascript";s.src="http://igoogle-theme-editor.googlecode.com/svn/trunk/iGoogleThemeEditor/dist/ige.js?lang=ja&"+new Date().getTime();document.body.appendChild(s);void(0);

例えば、↓こういうデザインにしているiGoogleの画面でbookmarkletを実行します。

igte_0001.png

すると、適用されているデザインがクリアされて(そう言う風に見せかけているだけですが)、↓こんな画面になります。

 

igte_0002.pngガジェットのエリアの左側に、iGoogleのテーマを編集するエリアが表示されます。それぞれのリンクをクリックすると、編集エリアが表示されます。

 

igte_0003.png「ヘッダ部分」をクリックすると、ヘッダエリアのデザインを変更することができます。画像のURLを指定するところには、サーバにアップロード済みの画像のアドレスを入力してください。画像を使用しない場合は空欄でかまいません。

 

igte_0004.png

以下、同様に「タブ部分」「ガジェット部分」「フッタ部分」を変更できます。

 

igte_0005.png

 

igte_0006.png

 

igte_0007.png入力した後、「XML生成 >>」をクリックすると、テキストエリアに現在適用されているテーマのためのXMLが表示されます。

 

igte_0008.pngこの内容を、テキストファイルにコピペして、適当な名前を付けてxmlとして保存してください。

保存したxmlをサーバにUP(サーバを持っていない人は、Google Codeにホスティングすることができます)して、↓以下のようにURLを指定すると、xmlのデザインを確認することができます。

ちなみに、超簡単ですが、↓僕が試しに作った白黒のデザインのxmlです。

http://www.google.com/ig?skin=http://www.chrisryu.com/data/igoogle_theme/blackandwhite.xml

作ったXMLを公開したり、コンテンツディレクトリに登録する際は、XMLの以下の部分を編集してください。

<ConfigMap type="Skin">
<Meta name="title">theme title</Meta>
<Meta name="description">theme description</Meta>
<Meta name="author">author</Meta>
<Meta name="author_email">email</Meta>
<Meta name="thumbnail">thumbnail url</Meta>
<Meta name="screenshot">screenshot url+</Meta>
</ConfigMap>

こんなツールは、もっと使い勝手が良くて便利なものをGoogleが提供してくれそうですが、jQueryの練習のために(jQuery読み込んでます)作ってみました。

内容の解説は、また別のエントリで。

2008.1.21 12:15追記 動作確認しているブラウザは、IE7 & FF2です。IE6だとデザイン崩れちゃいます。ごめんなさい。

2007年11月25日

続・Gmail ショートカットの Cheat Sheet を表示する bookmarklet を作ったよ

Google 検索とGmail ショートカットの Cheat Sheet を表示する bookmarklet を作ったよ (でぃべろっぱーず・さいど) にてGmailのショートカットキーを表示する bookmarklet を作ってみたのですが、アメリカで先行リリースされている version2では動作しませんでした。

大きな理由は、ページの構造が変わっていたためです。
旧版では、frame を使っていましたが、新版ではiframe を用いています。

ということで、新しい方で動くGmail Bookmarklet を作ってみました。

↓Gmail1.0 ショートカット cheat sheet (日本語) ※Gmailのページでしか動作しません。
Gmail1.0 cheat sheat (ja)

↓Gmail1.0 ショートカット cheat sheet (英語) ※Gmailのページでしか動作しません。
Gmail1.0 cheat sheat (en)


↓Gmail2.0 ショートカット cheat sheet (日本語) ※GmailのページではFirefox限定です。
Gmail2.0 cheat sheat (ja)

↓Gmail2.0 ショートカット cheat sheet (英語) ※GmailのページではFirefox限定です。
Gmail2.0 cheat sheat (en)

※Gmail の方は、画面上部の「設定」から、ショートカットキーを「有効」にしておかないと、ショートカットが使えませんのでご注意を。
※(2007.11.27追記)Gmailの方は、version1.0とversion2.0でbookmarkletを分けました。version2.0の方はFirefox 限定です。

ただしこれも条件があって、Firefoxでしか動作を確認できていません。

IE7の画面で実行すると、チートシートが表示されるのですが、他の要素が消えてしまいます。

試しに、アドレスバーに javascript:alert('hoge');void(0); と打って実行してみたら、同じようにページの内容が消えてしまいました。

アドレスバーからのJavaScript 実行が制限されているようです。どうやってるんだろ。

とりあえず、上記ブックマークレットは新版のGmailでFirefox 限定ということになります。

2007年11月23日

Google 検索とGmail ショートカットの Cheat Sheet を表示する bookmarklet を作ったよ

Google の検索オプションや、Gmail のショートカットは便利なんだけど、最初はなかなか覚えられないモノ。

たまにど忘れして、思い出したいとき、新しいウィンドウを開いたり、ページ遷移するのがなんとなくスマートじゃないと思ったので、cheatsheet を表示する bookmarklet を作ってみました。

以下のリンクを「右クリック」→「お気に入りに追加」でどうぞ。

↓Google 検索 cheat sheet (日本語)
Google search cheat sheat (ja)

↓Google 検索 cheat sheet (英語)
Google search cheat sheat (en)


↓Gmail1.0 ショートカット cheat sheet (日本語) ※Gmailのページでしか動作しません。
Gmail1.0 cheat sheat (ja)

↓Gmail1.0 ショートカット cheat sheet (英語) ※Gmailのページでしか動作しません。
Gmail1.0 cheat sheat (en)


↓Gmail2.0 ショートカット cheat sheet (日本語) ※GmailのページではFirefox限定です。
Gmail2.0 cheat sheat (ja)

↓Gmail2.0 ショートカット cheat sheet (英語) ※GmailのページではFirefox限定です。
Gmail2.0 cheat sheat (en)

※Gmail の方は、画面上部の「設定」から、ショートカットキーを「有効」にしておかないと、ショートカットが使えませんのでご注意を。
※(2007.11.25追記)Gmailの方は、ソースコードが修正されたversion2では動作しません。詳細は別エントリに書きました(こちら)。
※(2007.11.27追記)Gmailの方は、version1.0とversion2.0でbookmarkletを分けました。version2.0の方はFirefox 限定です。

bookmarklet 的にちょっとやっかいだったのは、Gmailの方。

Gmailのページってフレームで作られてるんですね。で、フレームを表示しているページのアドレス欄に子フレームのbody にscript タグを append しようとしたら「引数が違います」って怒られちゃいました。同じコードでFirefox は動いているのに。

で、試行錯誤の結果、親ウィンドウのアドレス欄から、子ウィンドウのアドレス欄にjavascriptのコードを流し込むという荒技を使ってようやく解決。

なお、cheat sheet 作成にあたり、以下のページの情報を利用させていただきました。

Google Cheat Sheets (Version 1.05)
Gmailのキーボードショートカット一覧(Gmail2.0隠れキー含む)


ソースコードはGoogle code で管理してます。

cheatsheet - Google Code

2007年3月11日

"I'm Feeling Lucky"のブックマークレット

GoogleのTopページにある "I'm Feeling Lucky" というボタン。みなさん使ってますか?

あのボタンって、Googleが検索ワードに一番マッチしていると判断したページにいきなり遷移してくるというボタンなんです。

当然みんな知っているものだと思っていたんですが、自分の周りにはこのことを知っている人が結構少なかったので、ちょっと知識をひけらかす風に書いてみました。

で、こちらのページで、検索関連のbookmarkletを配布しているのですが、その中に、"I'm feeling Luckyのブックマークレットが無かったので作ってみました。

↓ブックマークレットはこちら。(「右クリック」→「お気に入りに追加」で追加してください)

ずば検!

「ずばり」目的のページが「検索できる」ってことで、「ずば検!」という名前にしてますが、気に入らなかったらお気に入りに登録後、変更してください。

Webページ中で、検索したい言葉を選択して、お気に入りから該当のショートカットを起動すると、「ずばり」目的のページが表示されるはずです。

Googleに出会って早6年。あまり使ってこなかった"I'm Feeling Lucky"ですが、使い始めてみると意外と気持ちが良かったりします。

2006年10月 8日

ブックマークレットでページのタイトルとリンクを取得

あるページのタイトルとページのURLをリンクにして、プロンプトで表示します。

あちこちに同じようなものがありそうですが、簡単そうだったので作ってみました。

ブログを投稿するときに、いちいちソースを表示してタイトル取得して、アドレス欄のURLコピーしてリンクを作って、とやっていたら面倒だったので作りました。

・通常リンクバージョン get page link ←これを「右クリック」→「お気に入りに追加」でOK

javascript:window.prompt('','<a href=\''+ location.href +'\'>'+ document.title + '</a>');void(0);


・新しいウィンドウで開くバージョン get page link ←これを「右クリック」→「お気に入りに追加」でOK

javascript:window.prompt('','<a href=\''+ location.href +'\' target=\'_blank\'>'+ document.title + '</a>');void(0);


これでブログの更新がちょっと楽になるかな。

でぃべろっぱーず・さいど http://dev.chrisryu.com/ 鹿児島出身子持ちSEのディベロッパーとしての一面 ja Copyright 2013 Fri, 22 Aug 2008 12:20:24 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss ページへのリンクとはてなブックマーク数のHTMLを取得するbookmarklet ブックマーク数を表示するhttp記法を拡張し、タイトルを併記できるようになりました - はてなダイアリー日記

上記はてなダイアリーの機能追加のように、言及先のはてなブックマーク数が一緒に出せると便利かなーと思い、bookmarklet作りました。

ページリンク&はてブ数取得

↓中身はこんな感じです

javascript:(function(){var s = '<a href="'+window.location.href+'" target="_blank">'+document.title+'</a> <a href="http://b.hatena.ne.jp/entry/'+window.location.href+'" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/'+window.location.href+'"></a>';prompt('',s);})();
]]>
http://dev.chrisryu.com/2008/08/page_and_bookmark_link_bookmarklet.html http://dev.chrisryu.com/2008/08/page_and_bookmark_link_bookmarklet.html bookmarklet Fri, 22 Aug 2008 12:20:24 +0900
Twitterのページを自動更新するGreasemonkey Twitterクライアントに今ひとつなじめない僕は、未だにwebからTwitterをやってるんですが、そこで欲しくなったのが標題のスクリプト

たぶんだれか作ってるんだろうけど、ちょっと探してなかったから作っちゃいました。

Auto-reload Twitter

]]>
http://dev.chrisryu.com/2008/05/auto_reload_twitter_greasemonkey.html http://dev.chrisryu.com/2008/05/auto_reload_twitter_greasemonkey.html bookmarklet Fri, 09 May 2008 19:47:49 +0900
Twitter翻訳Greasemonkey & bookmarkletをupdate Twitterのデザイン変更に伴い、Twitter翻訳Greasemonkeyとbookmarkletをアップデートしました。

Greasemonkey:Translate Twitter

bookmarklet:Translate Twitter

Twitterのデザインは結構頻繁に更新されてるんですが、今回は、発言部分のspanタグのクラス名が変わってしまい、クラス名でspanタグを特定していた部分が動作しなくなってしまってました。

そのクラス名の変更ですが、"entry-content"から"entry_content"に変わるという修正で、始めどこが変わったのかまったく気づきませんでした。まいったね。

で、このスクリプトですが、日本よりも海外の人の方が反応してくれていて、いくつかのブログで紹介していただきました。

紹介していただいたブログは、はてぶでまとめています。

はてなブックマーク - Chrisのブックマーク/ feedback/ TranslateTwitter

こちらのページの、

Considering how big Twitter is in Japan, we just might need these!

という部分が、面白いですね。僕は「他言語」→「日本語」を想定していたんですが、海外の人から見たら「日本語」→「自国語」という方が需要があるのかも。

]]>
http://dev.chrisryu.com/2008/05/twitter_translate_greasemonkey_and_bookmarkle.html http://dev.chrisryu.com/2008/05/twitter_translate_greasemonkey_and_bookmarkle.html bookmarklet Sat, 03 May 2008 23:04:32 +0900
はてなブックマークのページではてなスター順にソートするbookmarklet はてブのページで、コメントに付けられたはてなスターの数順にソートするブックマークレットを書いてみました。

sort by hatena star

ソースはこちらで確認できます。

for文がまわりまくっているので、ちょっと遅い感じかなぁ。

もっとこうしたら早くできるよってのがあったら教えてください。

]]>
http://dev.chrisryu.com/2008/04/sort_by_hatena_star_bookmarklet.html http://dev.chrisryu.com/2008/04/sort_by_hatena_star_bookmarklet.html bookmarklet Sun, 27 Apr 2008 16:18:22 +0900
twitterのページにGoogle AJAX Language APIを使った翻訳機能を付け加えるGreasemonkey & bookmarklet 先日リリースされたGoogle AJAX Language API が仕事で使えるんじゃないかと思い、仕様を見ているときにふと思いつきました。

日本人ばっかりをFollow(だっけか)しているとあまり気になりませんが、twitterのpublic_timelineを見ると、世界規模のサービスだけあって色んな言語が飛び交っています。で、その人がどんな発言してるんだろうかと気になるわけですが(僕だけ?)、いちいち翻訳ページにコピペするのも面倒だし、そもそも何語か分からない言語もたまに見かけます。

で、今回作ったGreasemonkeyとbookmarklet。

Greasemonkey:Translate Twitter

bookmarklet:Translate Twitter

これは何?

このGreasemonkeyを登録してtwitterのページに行くと(或いはtwitterのページでbookmarkletを実行すると)、↓こんな感じで、タイムライン上に「Translate!」リンクが表示され、

 

20080328_01.png↓右上には、翻訳先の言語プルダウンが表示されます。

 

20080328_02.png翻訳先の言語を「English」にしている状態で「Translate!」をクリックすると、↓こんな風に下に翻訳結果が表示されます。

 

20080328_03.pngGoogleのAPIがサポートしていない言語間の翻訳は、一旦英語に翻訳して、それを更に翻訳するという風にしています。

 

20080328_04.pngなので、正確さがさらに欠けてしまいます。

ちょっとした思いつきで作った割には面白いツールになったかなと。これで他国語に恐れず色んな人をFollowしまくりましょう(って言うてる僕がまずやれって話ですが)!

Greasemonkeyおよびbookmarkletへの機能追加・改善・不具合報告は本コメント欄へお願いします。 

]]>
http://dev.chrisryu.com/2008/03/translate_twitter_greasemonkey.html http://dev.chrisryu.com/2008/03/translate_twitter_greasemonkey.html bookmarklet Fri, 28 Mar 2008 22:30:03 +0900
iGoogleテーマエディタのコード解説 --- その2 今日は「Gmailの使い方」メールマガジンでもiGoogle Theme Editor を紹介していただきました。ありがとうございます。

というわけで昨日のコード解説の続きです。

 

150~202行目:エディタ自身のHTMLです。

多言語対応させるメッセージ部分はmessage(key,lang)で返ってきたメッセージを結合させています。なんか眺めれば眺めるほどリファクタリングできそうだなぁと思ってきましたよ。

 

203~245行目:スタイルオブジェクトの定義とスタイル指定。

エディタのCSSをJSONで定義しています。jQueryは、$.css(key,value)や$.css(styleObj)で簡単にスタイルを指定できるので、外部にCSSファイルを持たないようにしています。

また、226~230行目では、各ブロックの開け閉めを$.toggle(fn,fn)で設定しています。これまた簡単ですわ。

var deco = {"cursor":"pointer","text-decoration":"underline"};
$('#str_1').css(deco).toggle(function(){$(this).text('[-]'+message('m1',lang));$('#tbl_1').show();},function(){$(this).text('[+]'+message('m1',lang));$('#tbl_1').hide();});

 

246~284行目:テキストエリアやセレクトボックスで値を入力/選択したときに、即座にiGoogleの画面に繁栄させるようにしているところです。

Class名とかはFireFoxのfirebugでちまちま調べながら作りました。

$('#header_bgcolor').keyup(function(){try{$('#nhdrwrap').css('backgroundColor',$('#header_bgcolor').val())}catch(e){}}).val('#FFFFFF').keyup();

あと、上記のように、テキストエリアにkeyupイベントで実行される関数を割り当て、それをkeyup()で実行できることを知りました。超便利。上記部分は、jQueryオブジェクト取得→keyupイベントに関数割り当て→初期値設定→keyupイベントに割り当てた関数を実行という流れになっています。これがつらつらとメソッドチェーンで書けちゃうのが気持ちよいです。さすがjQuery。

 

こうやって解説を書きながら、かなり無駄に書いている部分が多いなぁと思ったので、リファクタリングしていこうと思います。

なんか2日に分けて書くと言いつつさらっと終わっちゃいました。

]]>
http://dev.chrisryu.com/2008/01/igoogle_theme_editor_code_review_part2.html http://dev.chrisryu.com/2008/01/igoogle_theme_editor_code_review_part2.html bookmarklet Wed, 23 Jan 2008 23:54:41 +0900
iGoogleテーマエディタのコード解説 --- その1 先日公開した「iGoogleテーマエディタbookmarklet」をWebOS Goodiesさんで取り上げていただきました。ありがとうございます。

で、今日はbookmarkletのコード解説をしたいと思います。といっても、たいしたソースじゃないですが。

(※行数はversion 0.1.0 でカウントしているので、後から見るとずれるかもしれませんが雰囲気で追ってください)

1~11行目:コメントです。

12~18行目:

var jq=document.createElement('script');
jq.id="jqery";
jq.type="text/javascript";
jq.src="http://igoogle-theme-editor.googlecode.com/svn/trunk/iGoogleThemeEditor/dist/jquery-1.2.2.min.js?"+new Date().getTime();
document.getElementsByTagName('head')[0].appendChild(jq);

いきなりjQueryのjsファイルをheadにappendしています。今回はデザインを色々といじるってことで、ライブラリを読み込んだ方が都合が良かったのでそうしました。jQueryを選んだ理由は、ファイルサイズが小さく、グローバルなオブジェクトを汚染せず、かつスタイルの操作がやりやすいからです。

19~22行目:

var jqueryStartTimer;
if(!jqueryStartTimer) jqueryStartTimer = setInterval(themeEditorload,500);

続いて、iGoogleテーマエディタを表示するために、setIntervalで定期的にthemeEditorload()を実行します。即実行できないのは、scriptタグで後からappendしたjsファイルが、ロードが終了し、ページ上でコンパイルされるまでタイムラグがあるからです。

23~31行目:

function themeEditorload(){
try{
if($){
 clearInterval(jqueryStartTimer);
}else{
 throw new Exception();
}

メインメソッドです。$をチェックし、定義されていれば(if($)でtrueが返れば)、setIntervalで定義したタイマーをclearIntervalでクリアしています。もしこの関数が実行されたとき、まだjQueryがロードされていなければ、Exceptionをthrowしてスルーします。

32~46行目:URLを操作する現在開発中のjQueryプラグインです。まだアルファ版にもならない完成度ですが、試しに使ってみることにしました。

47~61行目:iGoogle Theme 用のXMLの元データです。文字列の最後に\を付ければ改行できることを知ったので、そういう風に書いています。

62~65行目:

function createAttr(id,attr){
 if($('#'+id).val()) return '<Attribute name="'+attr+'">'+$('#'+id).val()+'</Attribute>\r\n';
 return '';
}

この後のcreateXML()の中で使っている関数です。iGoogle Theme 用のXMLを作る際、ユーザが値をテキストフィールドに入力していれば、引数のデータを利用してXMLデータの一部を返します。

66~102行目:XMLを生成している部分です。思いっきりベタ書きです。

103~104行目:

var lang = $.urlParams('lang',$('#igteid')[0]);

ここで、先ほど紹介したURLを操作するプラグインを利用しています。このブックマークレットをappendしているscriptタグのsrc属性のURLから、GETパラメータに指定されているlang属性を取得しています。

105~141行目:ここで多言語のメッセージオブジェクトを保持しています。そう、このbookmarkletは無駄に多言語対応させているのです。

142~149行目:

function message(key,lang){
 try{
  var t = words[key];
  return (t[lang])?t[lang]:t['en'];
 }catch(e){
  return '';
 }
}

メッセージオブジェクトから、言語名とキー値を元に、メッセージを取得します。デフォルトは"en"の値です。

 

長くなったので、今日はここまで。続きはまた明日。

]]>
http://dev.chrisryu.com/2008/01/igoogle_theme_editor_code_review_part1.html http://dev.chrisryu.com/2008/01/igoogle_theme_editor_code_review_part1.html bookmarklet Tue, 22 Jan 2008 23:57:06 +0900
iGoogleのテーマXMLを作成するbookmarklet 先日公開されたiGoogle Theme API を便利に使うためのbookmarkletを作ってみました。

iGoogle のページで実行すると、テーマ変更用のエディタが表示されます。

iGoogle Theme Editor (←右クリックからお気に入りに追加できます)

javascript:var s = document.createElement('script');s.id="igteid";s.type="text/javascript";s.src="http://igoogle-theme-editor.googlecode.com/svn/trunk/iGoogleThemeEditor/dist/ige.js?lang=ja&"+new Date().getTime();document.body.appendChild(s);void(0);

例えば、↓こういうデザインにしているiGoogleの画面でbookmarkletを実行します。

igte_0001.png

すると、適用されているデザインがクリアされて(そう言う風に見せかけているだけですが)、↓こんな画面になります。

 

igte_0002.pngガジェットのエリアの左側に、iGoogleのテーマを編集するエリアが表示されます。それぞれのリンクをクリックすると、編集エリアが表示されます。

 

igte_0003.png「ヘッダ部分」をクリックすると、ヘッダエリアのデザインを変更することができます。画像のURLを指定するところには、サーバにアップロード済みの画像のアドレスを入力してください。画像を使用しない場合は空欄でかまいません。

 

igte_0004.png

以下、同様に「タブ部分」「ガジェット部分」「フッタ部分」を変更できます。

 

igte_0005.png

 

igte_0006.png

 

igte_0007.png入力した後、「XML生成 >>」をクリックすると、テキストエリアに現在適用されているテーマのためのXMLが表示されます。

 

igte_0008.pngこの内容を、テキストファイルにコピペして、適当な名前を付けてxmlとして保存してください。

保存したxmlをサーバにUP(サーバを持っていない人は、Google Codeにホスティングすることができます)して、↓以下のようにURLを指定すると、xmlのデザインを確認することができます。

ちなみに、超簡単ですが、↓僕が試しに作った白黒のデザインのxmlです。

http://www.google.com/ig?skin=http://www.chrisryu.com/data/igoogle_theme/blackandwhite.xml

作ったXMLを公開したり、コンテンツディレクトリに登録する際は、XMLの以下の部分を編集してください。

<ConfigMap type="Skin">
<Meta name="title">theme title</Meta>
<Meta name="description">theme description</Meta>
<Meta name="author">author</Meta>
<Meta name="author_email">email</Meta>
<Meta name="thumbnail">thumbnail url</Meta>
<Meta name="screenshot">screenshot url+</Meta>
</ConfigMap>

こんなツールは、もっと使い勝手が良くて便利なものをGoogleが提供してくれそうですが、jQueryの練習のために(jQuery読み込んでます)作ってみました。

内容の解説は、また別のエントリで。

2008.1.21 12:15追記 動作確認しているブラウザは、IE7 & FF2です。IE6だとデザイン崩れちゃいます。ごめんなさい。

]]>
http://dev.chrisryu.com/2008/01/igoogle_theme_editor_bookmarklet.html http://dev.chrisryu.com/2008/01/igoogle_theme_editor_bookmarklet.html bookmarklet Sun, 20 Jan 2008 23:03:24 +0900
続・Gmail ショートカットの Cheat Sheet を表示する bookmarklet を作ったよ Google 検索とGmail ショートカットの Cheat Sheet を表示する bookmarklet を作ったよ (でぃべろっぱーず・さいど) にてGmailのショートカットキーを表示する bookmarklet を作ってみたのですが、アメリカで先行リリースされている version2では動作しませんでした。

大きな理由は、ページの構造が変わっていたためです。
旧版では、frame を使っていましたが、新版ではiframe を用いています。

ということで、新しい方で動くGmail Bookmarklet を作ってみました。

↓Gmail1.0 ショートカット cheat sheet (日本語) ※Gmailのページでしか動作しません。
Gmail1.0 cheat sheat (ja)

↓Gmail1.0 ショートカット cheat sheet (英語) ※Gmailのページでしか動作しません。
Gmail1.0 cheat sheat (en)


↓Gmail2.0 ショートカット cheat sheet (日本語) ※GmailのページではFirefox限定です。
Gmail2.0 cheat sheat (ja)

↓Gmail2.0 ショートカット cheat sheet (英語) ※GmailのページではFirefox限定です。
Gmail2.0 cheat sheat (en)

※Gmail の方は、画面上部の「設定」から、ショートカットキーを「有効」にしておかないと、ショートカットが使えませんのでご注意を。
※(2007.11.27追記)Gmailの方は、version1.0とversion2.0でbookmarkletを分けました。version2.0の方はFirefox 限定です。

ただしこれも条件があって、Firefoxでしか動作を確認できていません。

IE7の画面で実行すると、チートシートが表示されるのですが、他の要素が消えてしまいます。

試しに、アドレスバーに javascript:alert('hoge');void(0); と打って実行してみたら、同じようにページの内容が消えてしまいました。

アドレスバーからのJavaScript 実行が制限されているようです。どうやってるんだろ。

とりあえず、上記ブックマークレットは新版のGmailでFirefox 限定ということになります。

]]>
http://dev.chrisryu.com/2007/11/google_gmail_cheat_sheet_2.html http://dev.chrisryu.com/2007/11/google_gmail_cheat_sheet_2.html bookmarklet Sun, 25 Nov 2007 22:28:54 +0900
Google 検索とGmail ショートカットの Cheat Sheet を表示する bookmarklet を作ったよ Google の検索オプションや、Gmail のショートカットは便利なんだけど、最初はなかなか覚えられないモノ。

たまにど忘れして、思い出したいとき、新しいウィンドウを開いたり、ページ遷移するのがなんとなくスマートじゃないと思ったので、cheatsheet を表示する bookmarklet を作ってみました。

以下のリンクを「右クリック」→「お気に入りに追加」でどうぞ。

↓Google 検索 cheat sheet (日本語)
Google search cheat sheat (ja)

↓Google 検索 cheat sheet (英語)
Google search cheat sheat (en)


↓Gmail1.0 ショートカット cheat sheet (日本語) ※Gmailのページでしか動作しません。
Gmail1.0 cheat sheat (ja)

↓Gmail1.0 ショートカット cheat sheet (英語) ※Gmailのページでしか動作しません。
Gmail1.0 cheat sheat (en)


↓Gmail2.0 ショートカット cheat sheet (日本語) ※GmailのページではFirefox限定です。
Gmail2.0 cheat sheat (ja)

↓Gmail2.0 ショートカット cheat sheet (英語) ※GmailのページではFirefox限定です。
Gmail2.0 cheat sheat (en)

※Gmail の方は、画面上部の「設定」から、ショートカットキーを「有効」にしておかないと、ショートカットが使えませんのでご注意を。
※(2007.11.25追記)Gmailの方は、ソースコードが修正されたversion2では動作しません。詳細は別エントリに書きました(こちら)。
※(2007.11.27追記)Gmailの方は、version1.0とversion2.0でbookmarkletを分けました。version2.0の方はFirefox 限定です。

bookmarklet 的にちょっとやっかいだったのは、Gmailの方。

Gmailのページってフレームで作られてるんですね。で、フレームを表示しているページのアドレス欄に子フレームのbody にscript タグを append しようとしたら「引数が違います」って怒られちゃいました。同じコードでFirefox は動いているのに。

で、試行錯誤の結果、親ウィンドウのアドレス欄から、子ウィンドウのアドレス欄にjavascriptのコードを流し込むという荒技を使ってようやく解決。

なお、cheat sheet 作成にあたり、以下のページの情報を利用させていただきました。

Google Cheat Sheets (Version 1.05)
Gmailのキーボードショートカット一覧(Gmail2.0隠れキー含む)


ソースコードはGoogle code で管理してます。

cheatsheet - Google Code

]]>
http://dev.chrisryu.com/2007/11/google_gmail_cheat_sheet_bookm.html http://dev.chrisryu.com/2007/11/google_gmail_cheat_sheet_bookm.html bookmarklet Fri, 23 Nov 2007 23:45:38 +0900
"I'm Feeling Lucky"のブックマークレット GoogleのTopページにある "I'm Feeling Lucky" というボタン。みなさん使ってますか?

あのボタンって、Googleが検索ワードに一番マッチしていると判断したページにいきなり遷移してくるというボタンなんです。

当然みんな知っているものだと思っていたんですが、自分の周りにはこのことを知っている人が結構少なかったので、ちょっと知識をひけらかす風に書いてみました。

で、こちらのページで、検索関連のbookmarkletを配布しているのですが、その中に、"I'm feeling Luckyのブックマークレットが無かったので作ってみました。

↓ブックマークレットはこちら。(「右クリック」→「お気に入りに追加」で追加してください)

ずば検!

「ずばり」目的のページが「検索できる」ってことで、「ずば検!」という名前にしてますが、気に入らなかったらお気に入りに登録後、変更してください。

Webページ中で、検索したい言葉を選択して、お気に入りから該当のショートカットを起動すると、「ずばり」目的のページが表示されるはずです。

Googleに出会って早6年。あまり使ってこなかった"I'm Feeling Lucky"ですが、使い始めてみると意外と気持ちが良かったりします。

]]>
http://dev.chrisryu.com/2007/03/im_feeling_lucky.html http://dev.chrisryu.com/2007/03/im_feeling_lucky.html bookmarklet Sun, 11 Mar 2007 20:35:42 +0900
ブックマークレットでページのタイトルとリンクを取得 あるページのタイトルとページのURLをリンクにして、プロンプトで表示します。

あちこちに同じようなものがありそうですが、簡単そうだったので作ってみました。

ブログを投稿するときに、いちいちソースを表示してタイトル取得して、アドレス欄のURLコピーしてリンクを作って、とやっていたら面倒だったので作りました。

・通常リンクバージョン get page link ←これを「右クリック」→「お気に入りに追加」でOK

javascript:window.prompt('','<a href=\''+ location.href +'\'>'+ document.title + '</a>');void(0);


・新しいウィンドウで開くバージョン get page link ←これを「右クリック」→「お気に入りに追加」でOK

javascript:window.prompt('','<a href=\''+ location.href +'\' target=\'_blank\'>'+ document.title + '</a>');void(0);


これでブログの更新がちょっと楽になるかな。

]]>
http://dev.chrisryu.com/2006/10/post_39.html http://dev.chrisryu.com/2006/10/post_39.html bookmarklet Sun, 08 Oct 2006 21:13:00 +0900
でぃべろっぱーず・さいど: アーカイブ

アーカイブ

/* Base Weblog (base-weblog.css) */ /* basic elements */ html { margin: 0; /* setting border: 0 hoses ie6 win window inner well border */ padding: 0; } body { margin: 0; /* setting border: 0 hoses ie5 win window inner well border */ padding: 0; font-family: verdana, 'trebuchet ms', sans-serif; font-size: 12px; } form { margin: 0; padding: 0; } a { text-decoration: underline; } a img { border: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote { margin-top: 10px; margin-bottom: 10px; } /* standard helper classes */ .clr { clear: both; overflow: hidden; width: 1px; height: 1px; margin: 0 -1px -1px 0; border: 0; padding: 0; font-size: 0; line-height: 0; } /* .pkg class wraps enclosing block element around inner floated elements */ .pkg:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .pkg { display: inline-block; } /* no ie mac \*/ * html .pkg { height: 1%; } .pkg { display: block; } /* */ /* page layout */ body { text-align: center; } /* center on ie */ #container { position: relative; margin: 0 auto; /* center on everything else */ width: 720px; text-align: left; } #container-inner { position: static; width: auto; } #banner { position: relative; } #banner-inner { position: static; } #pagebody { position: relative; width: 100%; } #pagebody-inner { position: static; width: 100%; } #alpha, #beta, #gamma, #delta { display: inline; /* ie win bugfix */ position: relative; float: left; min-height: 1px; } #delta { float: right; } #alpha-inner, #beta-inner, #gamma-inner, #delta-inner { position: static; } /* banner user/photo */ .banner-user { float: left; overflow: hidden; width: 64px; margin: 0 15px 0 0; border: 0; padding: 0; text-align: center; } .banner-user-photo { display: block; margin: 0 0 2px 0; border: 0; padding: 0; background-position: center center; background-repeat: no-repeat; text-decoration: none !important; } .banner-user-photo img { width: 64px; height: auto; margin: 0; border: 0; padding: 0; } /* content */ .content-nav { margin: 10px; text-align: center; } .date-header, .entry-content { position: static; clear: both; } .entry, .trackbacks, .comments, .archive { position: static; overflow: hidden; clear: both; width: 100%; margin-bottom: 20px; } .entry-content, .trackbacks-info, .trackback-content, .comment-content, .comments-open-content, .comments-closed { clear: both; } .entry-excerpt, .entry-body, .entry-more-link, .entry-more { clear: both; } .entry-footer, .trackback-footer, .comment-footer, .comments-open-footer, .archive-content { clear: both; margin: 5px 10px 20px 10px; } .comments-open label { display: block; } #comment-author, #comment-email, #comment-url, #comment-text { width: 240px; } #comment-bake-cookie { margin-left: 0; vertical-align: middle; } .comments-open-header { clear: both; } #comment-post { font-weight: bold; } img.image-full { width: 100%; } .image-thumbnail { float: left; width: 115px; margin: 0 10px 10px 0; } .image-thumbnail img { width: 115px; height: 115px; margin: 0 0 2px 0; } /* modules */ .module { position: relative; overflow: hidden; width: 100%; } .module-content { position: relative; margin: 5px 10px 20px 10px; } .module-list, .archive-list { margin: 0; padding: 0; list-style: none; } .module-list-item { margin-top: 5px; margin-bottom: 5px; } .module-presence img { vertical-align: middle; } .module-powered .module-content { margin-bottom: 10px; } .module-photo .module-content { text-align: center; } .module-wishlist .module-content { text-align: center; } .module-calendar .module-content table { border-collapse: collapse; } .module-calendar .module-content th, .module-calendar .module-content td { width: 14%; text-align: center; } .typelist-thumbnailed { margin: 0 0 20px 0; } .typelist-thumbnailed .module-list-item { display: block; clear: both; margin: 0; } /* positioniseverything.net/easyclearing.html */ .typelist-thumbnailed .module-list-item:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .typelist-thumbnailed .module-list-item { display: inline-block; } /* no ie mac \*/ * html .typelist-thumbnailed .module-list-item { height: 1%; } .typelist-thumbnailed .module-list-item { display: block; } /* */ .typelist-thumbnail { float: left; min-width: 60px; width: 60px; /* no ie mac \*/width: auto;/* */ margin: 0 5px 0 0; text-align: center; vertical-align: middle; } .typelist-thumbnail img { margin: 5px; } .module-galleries .typelist-thumbnail img { width: 50px; } .typelist-description { margin: 0; padding: 5px; } .module-featured-photo .module-content, .module-photo .module-content { margin: 0; } .module-featured-photo img { width: 100%; } .module-recent-photos { margin: 0 0 15px 0; } .module-recent-photos .module-content { margin: 0; } .module-recent-photos .module-list { display: block; height: 1%; margin: 0; border: 0; padding: 0; list-style: none; } /* positioniseverything.net/easyclearing.html */ .module-recent-photos .module-list:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .module-recent-photos .module-list { display: inline-block; } /* no ie mac \*/ * html .module-recent-photos .module-list { height: 1%; } .module-recent-photos .module-list { display: block; } /* */ .module-recent-photos .module-list-item { display: block; float: left; /* ie win fix \*/ height: 1%; /**/ margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item a { display: block; margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item img { width: 60px; height: 60px; margin: 0; padding: 0; } /* mmt calendar */ .module-mmt-calendar { margin-bottom: 15px; } .module-mmt-calendar .module-content { margin: 0; } .module-mmt-calendar .module-header { margin: 0; } .module-mmt-calendar .module-header a { text-decoration: none; } .module-mmt-calendar table { width: 100%; } .module-mmt-calendar th { text-align: left; } .module-mmt-calendar td { width: 14%; height: 75px; text-align: left; vertical-align: top; } .day-photo { width: 54px; height: 54px; } .day-photo a { display: block; } .day-photo a img { width: 50px; height: 50px; } /* Vicksburg II (theme-vicksburg.css) */ /* basic page elements */ body { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; font-size: 12px; } a { color: #666666; text-decoration: underline; } a:hover { color: #66cc33; } #banner a { color: #fff; text-decoration: none; } #banner a:hover { color: #fff; } .module-content a { color: #666666; } .module-content a:hover { color: #66cc33; } h1, h2, h3, h4, h5, h6 { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; } .module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { color: #000000; font-family: 'Trebuchet MS', Verdana, sans-serif; font-size: x-small; border-bottom: 1px dashed #999999; text-align: left; font-weight: bold; text-transform: uppercase; padding: 3px; letter-spacing: .3em; } .module-header a, .module-header a:hover, .trackbacks-header a, .trackbacks-header a:hover, .comments-header a, .comments-header a:hover, .comments-open-header a, .comments-open-header a:hover .archive-header a, .archive-header a:hover { color: #fff; } .entry-more-link, .entry-footer, .comment-footer, .trackback-footer, .typelist-thumbnailed { font-size: 11px; } .commenter-profile img { vertical-align: middle; } /* page layout */ body { min-width: 720px; color: #333; background: #FFFFFF; } #container { width: 720px; margin-bottom: 20px; background: #fff; } #container-inner { border-width: 0 5px 5px 5px; border-style: solid; border-color: #FFFFFF; } #banner { width: 710px; /* necessary for ie win */ background: #66cc33; } #banner-inner { padding: 15px 13px; border-width: 0px 0px 0 0px; border-style: solid; border-color: #fff; } .banner-user { width: 70px; margin-top: 5px; font-size: 10px; } .banner-user-photo { border: 1px solid #fff; } #banner-header { margin: 0; color: #fff; font-size: 30px; font-weight: bold; line-height: 1; text-shadow: #666666 0 2px 3px; } #banner-description { margin-top: 5px; margin-bottom: 0; color: #fff; background: none; font-size: 12px; line-height: 1.125; text-shadow: #666666 0 1px 2px; } #alpha { margin: 15px 15px 0 15px; width: 480px; } #beta { width: 200px; background: #e6ecf2; } #gamma, #delta { width: 180px; background: #dddddd; } #beta-inner, #gamma-inner, #delta-inner { padding: 10px 10px 0 10px; border-width: 0px 0px 0px 0; border-style: solid; border-color: #fff; } .date-header { margin-top: 0; font-size: 11px; font-weight: bold; text-transform: uppercase; } .entry-header { margin-top: 0; border-left: 5px solid #66CC33; padding: 0 0 0 10px; color: #000000; font-size: 18px; font-weight: bold; } .entry-content, .comment-content, .trackback-content { margin: 0; line-height: 1.5; } .entry-tags { margin: 0 0 10px 10px; } .entry-tags-header, .entry-tags-list, .entry-tag { display: inline; } .entry-tags-list { list-style:none; padding: 0px; } .entry-footer, .comment-footer, .trackback-footer { margin: 0 0 20px 0; border-top: 1px solid #DDDDDD; padding-top: 3px; color: #666; font-size: 10px; text-align: right; } .comment-content, .trackback-content, .comment-footer, .trackback-footer { margin-left: 10px; } .content-nav { margin-top: 0; } #trackbacks-info { margin: 10px 0; border: 1px dashed #66cc33; padding: 0 10px; color: #292e33; font-size: 11px; text-align: center; background: #dddddd; } .comments-open-footer { margin: 10px 0; } /* modules */ .module { margin: 0 0 10px 0; border-bottom: 1px solid #f3f6f9; background: #DDDDDD; } .module-content { margin: 0 0 10px 0; padding: 10px 10px 0 10px; font-size: 10px; line-height: 1.2; } .module-search input { font-size: 10px; } .module-search #search { width: 100px; } .module-mmt-calendar .module-content table, .module-calendar .module-content table { font-size: 10px; } .module-powered { border-width: 0; } .module-powered .module-content { margin-bottom: 0; border: 1px dashed #66cc33; padding-bottom: 10px; color: #292e33; background: #fff; } .module-photo { background: none; } .module-photo img { border: solid 1px #fff; } .module-list { margin: 0 15px 10px 15px; list-style: disc; } .module-list .module-list { margin: 5px 0 0 0; padding-left: 15px; list-style: circle; } .module-list-item { margin-top: 0; color: #666; line-height: 1.2; } .typelist-thumbnailed .module-list { margin: 0 0 10px 0; list-style: none; } .typelist-thumbnailed .module-list-item { margin: 1px 0; padding: 0; background: #f3f6f9; } .typelist-thumbnail { background: #fff; } .module-photo img { border: 1px solid #fff; } .module-featured-photo { width: 398px; } .module-featured-photo .module-content { margin: 0; border-width: 0; padding: 0; } .module-featured-photo img { width: 398px; } .module-recent-photos .module-content { padding: 10px 0 0 19px; } .module-recent-photos .module-list { margin: 0; } .module-recent-photos .module-list-item { width: 64px; /* mac ie fix */ margin: 0 10px 10px 0; padding: 0; background: none; } .module-recent-photos .module-list-item a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .module-recent-photos .module-list-item a:hover { border-color: #666666; background: #fff; } .module-tagcloud .module-list {text-align: center; } .module-tagcloud .module-list { list-style: none; } .module-tagcloud .module-list-item { display: inline; } .module-tagcloud li.taglevel1 { font-size: 19px; } .module-tagcloud li.taglevel2 { font-size: 17px; } .module-tagcloud li.taglevel3 { font-size: 15px; } .module-tagcloud li.taglevel4 { font-size: 13px; } .module-tagcloud li.taglevel5 { font-size: 11px; } .module-tagcloud li.taglevel6 { font-size: 9px; } /* calendar tweaks */ .layout-calendar #alpha { width: 260px; } .layout-calendar #beta { width: 420px; } .layout-calendar #gamma, .layout-calendar #delta { width: 190px; } .layout-calendar #gamma-inner, .layout-calendar #delta-inner { border: 0; padding: 0; } .module-mmt-calendar { width: 398px; } .module-mmt-calendar .module-content { margin: 0; border-width: 0; padding: 10px; } .module-mmt-calendar table { width: 378px; background: #66cc33; } .module-mmt-calendar th { color: #fff; border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: bold; } .module-mmt-calendar td { border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: normal; background: #dddddd; } th.weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42 { border-right: none; } .module-mmt-calendar td { height: 70px; } .day-photo { width: 49px; height: 49px; } .day-photo a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .day-photo a:hover { border-color: #666666; background: #fff; } .day-photo a img { width: 45px; height: 45px; } /* artistic tweaks */ .layout-artistic #alpha { width: 260px; } .layout-artistic #beta { width: 420px; } .layout-artistic #gamma, .layout-artistic #delta { width: 190px; } .layout-artistic #gamma-inner, .layout-artistic #delta-inner { border: 0; padding: 0; } /* moblog1 tweaks */ .layout-moblog1 #alpha { margin: 0; width: 180px; background: #dddddd; } .layout-moblog1 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog1 #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-moblog1 #beta-inner { padding: 0; border-width: 0; } .layout-moblog1 .module-recent-photos .module-content { padding: 10px 0 0 10px; } /* moblog2 tweaks */ .layout-moblog2 #alpha { margin: 0; width: 86px; background: #dddddd; } .layout-moblog2 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog2 #beta { margin: 15px 15px 0 15px; width: 260px; background: none; } .layout-moblog2 #beta-inner { padding: 0; border-width: 0; } .layout-moblog2 #delta { width: 154px; } .layout-moblog2 .module-recent-photos { border: 0; background: none; } .layout-moblog2 .module-recent-photos .module-content { padding: 0; border: 0; } .layout-moblog2 .module-recent-photos .module-list-item { margin: 0 0 10px 0; } /* timeline tweaks */ .layout-timeline #alpha { width: 260px; } .layout-timeline #beta { width: 420px; } .layout-timeline #gamma, .layout-timeline #delta { width: 190px; } .layout-timeline #gamma-inner, .layout-timeline #delta-inner { border: 0; padding: 0; } /* one-column tweaks */ .layout-one-column body { min-width: 520px; } .layout-one-column #container { width: 520px; } .layout-one-column #banner { width: 510px; } /* necessary for ie win */ /* two-column-left tweaks */ .layout-two-column-left #alpha { margin: 0; width: 200px; background: #dddddd; } .layout-two-column-left #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-two-column-left #beta { margin: 15px 15px 0 15px; width: 480px; background: none; } .layout-two-column-left #beta-inner { padding: 0; border-width: 0; } /* three-column tweaks */ .layout-three-column #alpha { margin: 0; width: 180px; background: #DDDDDD; } .layout-three-column #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-three-column #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-three-column #beta-inner { padding: 0; border-width: 0; } /* * Preliminary styles added by Jay for Vicksburg II * for review by Luke/Walt and rest of team */ /* All or multiple templates Suppress underlines on linked entry titles */ .entry-header a { text-decoration: none; } /* Suppress the prev/next nav */ .content-nav { margin: 0px; display: none; } /* Search results templates */ .mt-search-results .search-results-header { border: 2px solid #669; background-color: #666666; color: #eee; padding: 5px; } .mt-search-results .search-results-container { margin-left:10px; } .mt-search-results form#search-form { width: 400px; margin: 0px auto 20px auto; } .mt-search-results form#search-form input#search { width: 80%; } .mt-search-results form#search-form p#search-options { text-align:center; } /* Entry tag display */ div.entry-tags { margin:0 0 10px 10px; } ul.entry-tags-list { list-style:none; padding: 0px; } h4.entry-tags-header, ul.entry-tags-list, li.entry-tag { display: inline; } /* Main index styles Suppress date header on main index */ .main-index .date-header { display: none; } /* Comment preview and individual entry Widen the comment form */ form textarea#comment-text { width:400px; } /* All archive templates Informational "where am I?" module at top of sidebar */ .module-welcome p { font-size: 12px; } .module-content p.first { margin-top:0px; } /* Date-based and category archives Archive title banner at top of page, below blog banner */ .master-archive-index #archive-title, .individual-entry-archive #archive-title, .date-based-archive #archive-title, .category-archive #archive-title { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; border-left: 10px solid #66cc33; padding: 5px; color: #fff; background: #666666; } /* Experimental comment styles Not currently in use anywhere in default templates For testing only... */ #comments-experimental .comment, #comments-experimental .comment .comment-inner { width:36em; } #comments-experimental .comment { padding: 0px; margin: 10px 15px; background-color:#eef; border:2px solid #bbb; } #comments-experimental .comment .comment-inner { position:relative; margin:-5px 0 0 -3px; background:#f3f3ff; border:1px solid #003; } #comments-experimental .comment:hover .comment-inner { border:1px solid #000; background-color: #fff; } #comments-experimental .comment a { text-decoration: none; border-bottom: 1px dotted #666666; } #comments-experimental .comment:hover a { color: #333; border-bottom: 1px solid #666; } #comments-experimental .comment .comment-footer, #comments-experimental .comment .comment-content { margin-right: 25px; margin-left: 25px; margin-bottom: 15px; } #comments-experimental .comment .comment-header { font-size: 16px; margin: 5px auto 5px 10px; text-shadow: #99A 2px 2px 1px #66F; color: #666; } #comments .comment-header { display: none; } #comments .comment-footer-experimental { display: none; } #comments-experimental .comment-footer { display: none; } でぃべろっぱーず・さいど: コメントの保留

コメントを受け付けました。

コメントを受け付けました。受け付けたコメントは、ブログの管理者の承認のため保留されています。

エントリーのページに戻る