Luc プログラム＆デザイン » ツール http://hello.lumiere-couleur.com 今までにないプログラムとWebデザインを作る Fri, 27 Jan 2012 01:11:41 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 chromeTouch ：Google Chromeアドオン http://hello.lumiere-couleur.com/chrometouch/ http://hello.lumiere-couleur.com/chrometouch/#comments Wed, 23 Sep 2009 14:44:26 +0000 smilkobuta http://hello.lumiere-couleur.com/?p=362 chromeTouch（クロムタッチ）はGoogle Chrome用のタッチスクロール機能です。
ブラウザのスクロールバーを使わずに、ページをぐいっとつかんで、ツルツルとスクロールすることが出来ます。
タッチスクリーンPCには必須の機能ですが、マウスでもご利用可能です。

FirefoxにもGrab And Dragという同様のツールがありますが、これと同じような感じでお使いいただければと思います。

Grab And Dragのように高機能ではありませんが、改善点や機能追加などありましたらぜひコメントをお寄せください。

で、実はこのページはアドオン体験ページになっておりまして、アドオンをインストールしなくてもツルツル動かすことが出来ますので、ぜひお試しください。
Firefoxでも動いているようですが、一応Chrome用です。

インストールはこちら

その他の情報

  • スクロールしたくないときには、CtrlキーもしくはShiftキーを押しながらドラッグすると、スクロール機能がオフになります。
  • テキストフォームや文字列の上ではスクロール機能が自動的にオフになります。

]]> http://hello.lumiere-couleur.com/chrometouch/feed/ 34 Light Formatter -WordPressプラグイン http://hello.lumiere-couleur.com/light_formatter/ http://hello.lumiere-couleur.com/light_formatter/#comments Sat, 16 Feb 2008 03:00:29 +0000 smilkobuta http://hello.lumiere-couleur.com/?p=3 PukiWikiっぽいタグを導入できるWordPressプラグイン。
テーブルを簡単に記述したり、記事の目次を自動生成します。 Light Formatter ]]>

Light Formatterは、PukiWikiっぽいタグを導入できるWordPress用のプラグインです。

とはいってもまだ目次出力／テーブルタグ／改行／行頭インデントしか実装されていません :-)

WordPressデフォルトのTinyMCEでテーブルを作ろうとするとプラグインをインストールしないといけないし、プラグインを入れてもテーブルを書くのが面倒だ！とか、Wikiスタイルを実現するプラグインを使いたいのにWiki本体をインストールするの面倒なんですけど・・・という方におすすめです。

 

＜ダウンロード＞ ↑

Light Formatter 0.2をダウンロードする（ver0.2）

 

＜インストール＞ ↑

  1. アーカイブをダウンロードして解凍し、Wordpressインストールディレクトリ内のwp-content/plugins以下へアップロードしてください。
  2. 管理画面にてプラグインを有効化してください。

 

＜使い方＞ ↑

（1）テーブルタグ ↑

  • 先頭と末尾、項目の間に「|」をつけると、テーブルタグに変換します。
  • 「|~」のようにチルダをつけると、そのセルはthタグとして出力されます。
  • テーブル記述の先頭に「|##{オプション[, オプション...]}|」を書くことで、出力されるテーブルにスタイルを設定することができます。複数オプションを指定したい場合にはカンマ区切りで記述してください。オプションの書き方は次の通りです。
    • table_style={tableタグ用のCSS記述}
    • tr_style={trタグ用のCSS記述}
    • th_style={thタグ用のCSS記述}
    • td_style={tdタグ用のCSS記述}
  • セルごとにスタイルを指定したい場合には、「|##{オプション}##」のように指定します。
    • style={指定セル用のCSS記述}
    • id={指定セル用のid指定}
    • class={指定セル用のclass指定}

 

[テーブル記述例（1）]
 
    |~ラベル1|~ラベル2|~ラベル3|
    |カラム1|カラム2|カラム3|
    |カラム1|カラム2|カラム3|
    |カラム1|カラム2|カラム3|


↓ 実際の表示内容はこちら
 

ラベル1 ラベル2 ラベル3
カラム1 カラム2 カラム3
カラム1 カラム2 カラム3
カラム1 カラム2 カラム3

 

[テーブル記述例（2） スタイルを色々指定]
 
    |##id=table_id1,class=table_class1,table_style=border-collapse:collapse;, th_style=border:3px solid #9f9;, td_style=border:3px solid #9f9;padding:5px;|
     |~##style=color:#99f;,id=th_id1##ラベル1|~ラベル2|~ラベル3|
    |##id=td_id1##カラム1|カラム2|カラム3|
    |カラム1|カラム2|カラム3|
    |カラム1|カラム2|カラム3|


↓ 実際の表示内容はこちら
 

ラベル1 ラベル2 ラベル3
カラム1 カラム2 カラム3
カラム1 カラム2 カラム3
カラム1 カラム2 カラム3

 

 

[テーブル記述例（3） tablesorterを使用]
 
    |##class=tablesorter|
    |~商品名|~産地|~値段|
    |こんぶ|北海道|580円|
    |わかめ|岩手|298円|
    |大根|埼玉|230円|
 
headタグ（header.php）の中に↓を書いておく。
<link rel="stylesheet" href="/script/jquery/plugins/tablesorter/themes/blue/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="/script/jquery/plugins/tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript">
jQuery(function(){
    var $sorttables = jQuery("table.tablesorter");
    var $sorttables_tr = $sorttables.find("tr");
    jQuery($sorttables_tr).parent("tbody").replaceWith($sorttables_tr);
    $sorttables.find("tr:gt(0)").wrapAll("<tbody></tbody>");
    $sorttables.find("tr:eq(0)").wrap("<thead></thead>");
    $sorttables.tablesorter();
});
</script>


↓ 実際の表示内容はこちら
 

商品名 産地 値段
こんぶ 北海道 580円
わかめ 岩手 298円
大根 埼玉 230円



 

（2）改行 ↑

  • 行末に「~」をつけると改行を行います。WordPressに勝手に改行を削除されるときなどにお使いください。
  • 「~~~」などと複数並べるとその数分改行します。

（3）行頭インデント ↑

  • 行頭に「^」をつけると半角スペース2個分のインデントを行います。WordPressに勝手にスペースを削除されるときなどにお使いください。
  • 「^^^」などと複数並べるとその数分インデントを行います。

（4）目次出力 ↑

  • 投稿内容やページ内容の最初のほうに、「#contents」とだけ書いてみてください（#の前にスペースなどがあるとうまく動きません）。ページ内の<h1>～<h6>を探して、目次を作ってくれます。

＜更新履歴＞ ↑

  • 2008/2/16：Ver 0.1を公開。
  • 2008/5/25：Ver 0.2を公開。目次出力（#contents）機能の追加と、テーブル出力機能の機能拡張。

＜コメント＞ ↑

]]> http://hello.lumiere-couleur.com/light_formatter/feed/ 28