モカモカ工房

　今までこのブログでは画像の拡大表示に「Lightbox」を使っていたのですが、小粋空間様のJavascript（menufolder.js、ajaxCalendar.js、dayChecker.js）とぶつかってしまうようなので、「Highslide」に変更しました。

1. Highslideの公式サイトからファイルセットをダウンロードします。（非商用サイトでは無料です）
2. ブログのディレクトリの中に「highslide」というディレクトリを作り、その中に「highslide.js」をアップロードします。
3. ダウンロードしたファイルセットの中のindex.htmlをブラウザで表示させると、いくつかの画像の表示パターン（白枠あり／なしなど）があるので、好きなのを選びます。
   　私は「Drop shadow and no border, semi transparent close button」というのを選択しました。
4. そのサンプルファイルである「example-no-border.html」のソースコードからCSS部分を別ファイルにし、「highslidenoborder2.css」という名前をつけて「highslide」ディレクトリにアップします。

続きを読む "Movable Type4の画像表示用に「highlight.js」の導入"

パスワードなどの入力に便利な、ソフトキーボードを実現するJavascriptがWebCreators7月号で紹介されていました。

1. こちらよりJavascript、CSS、Keyboardのアイコンをダウンロードします
2. ヘッダーにJavascriptとCSSへのリンクを入れます
   
   

   <script language="JavaScript" type="text/javascript" src="http://mocamoca.biz/sample/keyboard/keyboard.js"></script>
   <link href="http://mocamoca.biz/sample/keyboard/keyboard.css" rel="stylesheet" type="text/css" media="all" />
   

3. フォームを下記のように作ります
   
   

    <input type="text" name="password" class="keyboardInput" value="" />
    <input type="hidden" name="hiddenField" />

4. デモ
   

　ウエブページに掲載したプログラミングのソースコードのコマンドなどを自動的に色分けして見やすくしてくれるJavaScriptです。
　インストールすると、こんな感じになります。とても見やすいですね。

続きを読む "ソースコードを自動的に色分けして掲載"Highlight.js""