Web Designの最近のブログ記事

写真をポラロイド風に簡単に装飾してくれるinstant.js 2.2を当ブログに設置しました。

参照

• instant.js (javascript instant image effect)

設置方法

ファイルのダウンロード

instant.jsから下記ファイルをダウンロードして解凍。

• instant.zip

ディレクトリ構成を決定

thickboxやSyntaxHighlighter設置時の構成に習い、下記構成に決定。

Movable Type インストールディレクトリ/
    +-- js/
    |    +-- instant/
    |    |    +-- instant.js
    |    |    +-- cvi_text_lib.js

ファイルのアップロード

ディレクトリ構成に従い、各ファイルをアップロード

テンプレートの編集

Movable Typeの管理画面より[ヘッダー・テンプレート]のhtml要素内に下記項目を追加して保存。

投稿記事での使い方

img要素のclass属性に下記のinstant.js独自の値を指定します。複数指定の場合はスペースで区切ります。

サンプル

よれよれフレーム・右傾斜・キャプション付

参考

このinstant.jsはMovable Typeのホーム(fukuchang.net)、カテゴリ別ページ(JavaScriptの最近のブログ記事)、月別ページ(September 2008アーカイブ)では問題なく表示されるのですが、個別ページ(Movable Type 4.21にinstant.js 2.2を設置)では、機能しません。

おそらく、個別ページでbody要素に追加されるonload属性(mt.jsのfunction呼び出し)とinstant.jsがバッティングしているようです。

htmlやcssなどのコードを色付きで表示してくれる、Google謹製のJavaScript、syntaxhighlighterを当ブログに設置しました。

参照

• syntaxhighlighter - Google Code

設置方法

ファイルのダウンロード

syntaxhighlighter Downloadsから下記ファイルをダウンロード

• SyntaxHighlighter_1.5.1.rar

ディレクトリ構成を決定

thickbox設置時の構成に習い、下記構成に決定。

Movable Type インストールディレクトリ/
    +-- js/
    |    +-- syntaxHighlighter/
    |    |    +-- shBrushCpp.js
    |    |    +-- shBrushCSharp.js
    |    |    +-- shBrushCss.js
    |    |    +-- shBrushDelphi.js
    |    |    +-- shBrushJava.js
    |    |    +-- shBrushJScript.js
    |    |    +-- shBrushPhp.js
    |    |    +-- shBrushPython.js
    |    |    +-- shBrushRuby.js
    |    |    +-- shBrushSql.js
    |    |    +-- shBrushVb.js
    |    |    +-- shBrushXml.js
    |    |    +-- shCore.js
    |    |    +-- css/
    |    |    |    +-- SyntaxHighlighter.css
    |    |    +-- flash/
    |    |    |    +-- clipboard.swf

ファイルのアップロード

ディレクトリ構成に従い、各ファイルをアップロード

テンプレートの編集

Movable Typeの管理画面より[ヘッダー・テンプレート]のhtml要素内に下記項目(SyntaxHighlighterを利用して表示しています。以下同様。)を追加して保存。

Movable Typeの管理画面より[フッター・テンプレート]のbody要素の終了タグ直前に下記項目を追加して保存。

投稿記事での使い方

pre要素若しくはtextarea要素に必要なコードを貼り付けます。コードを囲んだ何れかの要素のname属性の値に"code"を指定し、class属性に貼り付けたコードに該当する値(参照:Supported languages)を指定します。

textarea要素を使用した場合

textarea要素ではcols属性とrows属性は必須属性な為、必ず指定することになりますが、実際の表示領域はSyntaxHighlighterが調整しているので、この値を調整しても反映されないようです。

pre要素を使用した場合

<pre name="code" class="xhtml">
... some code here ...
</pre>

pre要素内のテキストで[<][>]を使用する場合、それぞれ代替の[&lt;][&gt;]に置換しておく必要があります。

参考

THE HAM MEDIAのValidに対応させたコードを綺麗に見せる『SyntaxHighlighter』導入記事に『preタグではname要素(属性: Fuku-chang註)を使うことが本来できない』とあります。実際、The W3C Markup Validation Serviceでチェックをすると「there is no attribute "name".」と叱られます。

サイト管理人のハム氏はスクリプトの修正で対処されていますが、私はtextarea要素を使うことにしました(^^ゞ

Coda Popup BubblesはjQueryを利用した、ふわっとした吹き出しを表示するJava Scriptです。

試しに、自分のサイトのトップページに設置してみました。

• 設置サイト: fuku-chang.com
• 参照サイト: Coda Bubble Example

Java Scriptは当然ながらそのまま拝借し、吹き出しのimageファイルも頂いてみたのですが、少々問題があったため、imageファイルは作成し直しております。

オリジナルのimageファイルはアルファチャネルを含むPING形式で作成されており、ドロップシャドウ部分が透過されています。まず、FF3では問題ありません(図1)。ところが、この透過部分の表示がIE7で上手くいかず、真っ黒に表示されてしまいます(図2)。

IE7はアルファチャネルを含む透過PING形式をサポートするようになっており、そのまま表示する分には当然問題ありません。擬似的にポップアップのレイヤー表示ではなく、そのままimageファイルを配置したら、正常に表示されます(図3)。そこで試しに、透過されたブラックシャドウ部分を消去して、吹き出しのラウンドやとんがり部分のみ透過させたimageファイルに作り替えると、吹き出しのラウンド部分等が綺麗に表示されます(図4)。
どうも、レイヤー表示した場合、アルファチャネルのうち、何のデータもない箇所は問題ないが、「うっすらと透かしたデータ」は上手く表示できないのかもしれません。

結局、IE7でも綺麗に表示するため、吹き出しのラウンドやとんがり部分は透過させて、透過させないベタなドロップシャドウを付けたimageファイルを作成して、吹き出しを表示することにしました(図5)。

画像の拡大表示JavaScriptであるThickBox 3.1を当ブログに設置しました。

参照

• ThickBox 3.1
• Movable Type備忘録 > jQueryでLightbox風な表示やってみる(ThickBox)

設置方法

ファイルのダウンロード

ThickBox 3.1から下記ファイルをダウンロード

• thickbox.js(お好みでthickbox-compressd.jsをダウンロード・リネーム)
• thickbox.css
• loadingAnimation.gif
• jquery.js(jquery-latest.jsをリネーム.お好みでjquery-latest.pack.jsをダウンロード・リネーム)

ディレクトリ構成を決定

Movable Type備忘録のbizbell氏に習い、下図の構成に決定。

thickbox.jsの編集

ディレクトリ構成を元に、[tb_pathToImage]のパス指定を編集(絶対参照で指定してしまいました)。

ファイルのアップロード

ディレクトリ構成に従い、4ファイルをアップロード

テンプレートの編集

Movable Typeの管理画面より[ヘッダー・テンプレート]のhtml要素内に下記項目を追加して保存。

<link rel="stylesheet" href="<$MTBlogURL$>js/jquery/plugins/css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/jquery/plugins/thickbox.js">

投稿記事での使い方

画像が1ファイルの場合

<a href="filePath/fileName.png" class="thickbox" title="sample01"><img src="filePath/thumbnailfileName.png" alt="" /></a>

class属性の指定で、thickboxが機能します。title属性の値が画像のキャプションになります。

画像が複数ファイルの場合

<a href="filePath/fileName.png" rel="sample" class="thickbox" title="sample01"><img src="filePath/thumbnailFileName.png" alt="" /></a>

class属性の指定に加え、rel属性を追加します。同じrel属性が指定されているa要素は同じグループ扱いになります。

サンプル

2008/06/18にFirefox 3の日本語版がリリースされました。

• Firefoxの灯火

私は普段はIE利用で、Firefoxのへビィユーザーでも何でもないのですけど...根がミーハーなので、早速インストールしてみました。Firefox 2インストール環境ではそのまま上書きインストールされます。

Firefox 2のへビィユーザーの方はFirefox 3非対応アドオン対策などからFirefox 3との共存を試されているようですね。

• 小粋空間 > Firefox2 と Firefox3（ベータ版）の共存

かなりの高速表示になったらしいのですが、そうですね、たぶんそうなのでしょう、すみません、よくわかりません(^^ゞ

そんな私ですが、実はFirefoxのシェア拡大をひそかに期待しております。

主な理由はCSS3サポートへの貪欲な姿勢です。例えば、擬似要素のサポートも現在開発中のIE8でも未対応のものがまだまだ多いようですね。そんなIEもFIrefoxのシェア拡大が進めば、CSS3サポートも追随せざるをえなくなってくれると思うのですが。どうでしょう。

• builder > 「Firefox 3」をウェブ制作者の視点で見る
• Webtech-walker > IE8 Beta1を早速使ってみた

highslideは写真を拡大表示するJavaScriptです。

Microsoft提供の小規模事業者向けのインターネットサービスに[Microsoft Office Live Small Business]というサービスがあり、その一機能にWEBサイト構築が含まれています。

実はこのサイトで写真を拡大する著名なJavaScript Lightbox2を設置してみたのですが、スクリプトエラーとなってしまいました。そこで、ThickBox 3.1も試してみたのですが、こちらもスクリプトエラー。

他のレンタルサーバーに試しにアップしてみると問題なく動作するので、サーバーの仕様によるトラブルと判断したのですが、なんとかしてレイヤー表示による写真拡大をしたかったため、他のJavaScriptを探していたところ、このhighslideを見つけました。

[Microsoft Office Live Small Business]で問題なく動作しています。

設置サイト: fuku-chang.org > Webデザイン ツールの使用を停止する

画像を拡大表示するJavaScriptライブラリ。

1. ライブラリの入手
• Site: ThickBox 2.1.1
• Download:
• ThickBox.js
• jQuery.js
• ThickBox.css
• loadingAnimation.gif
2. インストール
1. file:
• ./js/ThickBox.js
• ./js/jQuery.js
• ./css/ThickBox.css
• ./images/loadingAnimation.gif
2. html header
   <link rel="stylesheet" href="./css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/thickbox.js"></script>
3. (X)HTML
   <ul> <li><a href="./images/sample01.png" rel="sample" class="thickbox" title="sample01"><img src="./images/sample01_thumb.png" alt="" /></a></li> </ul>
   Note: 複数の画像をリストアップして、同じrel="xxx"を設定するとグループ化される。

親ウィンドウ

子ウィンドウ