かたつむりくんのWWW

Facebox 1.2 - LightBox風に角丸で画像をポップアップ

Facebox 1.2 - LightBox風に角丸で画像をポップアップ

Facebox 1.2を導入してみました。

これまで、画像のポップアップ表示には yuga.js で使われていた「ThickBox 3.1」を使用していました。ThickBox 3.1 は非常に軽い動作で良いのですが、ブラウザの表示領域より大きい画像を表示させると、自動的に縮小されてしまいます。この自動縮小は基本的には便利なんだけど、画像に書かれている文字も読ませたいときなどはちょっと不便になってしまう諸刃の剣でした。

この自動縮小機能を無効化する方法もあるようですが(fixture.jp/blog - thickbox.jsの画像リサイズ機能をオフにする)、それだとブラウザをスクロールしても、オーバーレイされた画像はスクロールできず、結局表示領域からはみ出した部分は見られないという、こちらも諸刃の剣でした。

そこで、今回、動作の軽さという点や、使用できるリンクの種類が ThickBox とあまり変わらなそうな「Facebox」に変更しました。

続きを読む

yuga.js 0.5.3 にアップデート

yuga.js を、0.5.1 から 0.5.3 にアップデートしました。

0.5.1 のファイルを少しだけ自分で変更していた部分があったので、一度「WinMerge 日本語版」で2つのファイルを比較して最新版を修正するという手間がかかってしまいました(物忘れが激しいので)。

続きを読む

Designer meets Designers 03 の感想

MdN主催の「Designer meets Designers 03」(D2 03)に参加してきました。D2に参加するのは01に続いて2回目です。

今回のテーマは「現場で生かせるWeb標準の知識とテクニック」で、「今さらWeb標準がテーマ?」という感じはしていましたが、自分の「Web標準」に関する知識(実践できているか否かは置いといて)をおさらい・確認するいい機会となりました。

今回のD2は次のような4つのセッションが行われました。

  • SESSION 1:Web標準に準拠したサイト制作のための基本と実践(80分) / 加藤善規(デジパ(株))
  • SESSION 2:Web標準準拠に求められるバランス感覚(40分) / 木達一仁((株)ミツエーリンクス)
  • SESSION 3:さよなら Web標準(60分) / 長谷川恭久
  • SESSION 4:Web標準への移行――押さえておきたいポイント(60分) / 山本聰((株)アイ・エム・ジェイ)

4つのセッションの中で自分が一番楽しみにしていたのは、デジパ(株)加藤善規さんが登壇したSESSION 1です。日ごろWWW WATCHで勉強さしてもらっているし、ちょっと仕事でお世話になったことがあり、それ以来、僕の目標というか尊敬の念を抱いているので。

さて、復讐がてら4つのセッションについての感想を以下に。

続きを読む

CustomEditorButton2に便利なボタンを追加するプラグイン - CEB2_plusUtility

以前このブログでも、「CustomEditorButton2」というMovable Typeの記事投稿画面に任意の機能のボタンを追加できるプラグインを紹介しました。

続きを読む

WordPress 2.5 のファイルアップロード時にIEで起こる不具合

WordPress 2.5 で新しくなったファイルのアップローダー。Ajaxで軽快に動作してかなりいい感じです。

しかし、IEだとアップロード時に次のエラーメッセージが表示されてしまう不具合があります。

WordPress 2.5 のファイルアップロード時にIEで出るエラー

続きを読む

WordPressで記事を複製できるプラグイン - Duplicate Post

WordPressで記事を簡単に複製できるプラグインを見つけました。

個人のブログだと、記事の複製が必要なシーンはそれほどないかもしれませんが、WordPressをCMSとして使っている場合は、結構重宝される機能だと思います。ただ、複製できるのは「記事」だけで「ページ」が複製できないのがちょっと残念。

続きを読む

CSSで外部リンク用アイコンを設定するときの悩み

このブログでも、サイト内リンクと外部リンクを区別するために、外部リンクにだけアイコンを表示させています。

つい最近までは、外部リンクのa要素に自分で「class="outside"」をつけて、次のようなCSSを設定していました。

a.outside {
	margin-right: 1px;
	padding-right: 13px;
	background-image: url(http://www.tinybeans.net/blog/images/link_outside.gif);
	background-position: center right;
	background-repeat: no-repeat;
}

続きを読む

yuga.js 0.5.1 を導入してみた

yuga.js 0.5.1 - 優雅なWeb制作のためのJavaScriptをこのブログで使ってみました。

これがどういった機能があるのか、また導入方法はyuga.js 0.4.2 - 優雅なWeb制作のためのJSとデモCSS HappyLife)で説明されています。ただし、こちらはyuga.js 0.4.2の説明なので、最新版の0.5.1はちょっとだけ変わっています。変更点と最新版のダウンロードは次の作者のサイトから。

続きを読む

WebクリエイティブのためのDOM Scripting - 感想

WebクリエイティブのためのDOM Scripting

WebクリエイティブのためのDOM Scriptingを読みました。

これまでJavaScriptライブラリを手探りで使ってきましたが、jQueryやPrototypeなどのライブラリを、もっと理解して使えるようになりたいなと思い、JavaScriptの本を探していました。

探して見ると当然ですがJavaScriptの本はたくさんあるので、どの本がいいか非常に悩みましたが、次のような理由からこの本を選びました。

続きを読む

wordPress 2.5 をインストールしてみた感想

WordPress 2.5 日本語をインストールしてみました。

今回は、このブログで使っているレンタルサーバーの大容量・高機能レンタルサーバー heteml(ヘテムル)にインストールしてみましたが、インストール手順はバージョン2.3までと変更ないようでした。ヘテムルのサポート内のWordPress 日本語版のインストールどおりにインストールすれば完璧です。WordPressのインストールは相変わらず簡単です。

さて、ざっと見た感じで変わった点をいくつか挙げておきましょう。

続きを読む

MT4LP5へ参加してきた

2008年4月5日開催、MT4LP5

4月5日(土)、CSS Nite主催の「MT4LP5」へ参加してきました。初めて参加するCSS Niteということもあり、かなり前からワクワクしていたのですが、期待を全く裏切らないイベントでした。

まず雰囲気がいいですね。これまでいくつかのセミナーに参加してきましたが、それらとは違って、鷹野さんを中心としたアットホームな感じがしました。益子さんも、まるでごく普通のスタッフのように運営をサポートしていました。

参加されている方々も、おそらく大半がWeb制作の現場で活躍されているのでしょうから、自分はかなり「下っ端」的な気もしましたので、逆に余計やる気がわいてきます。でも、当日は前夜からの発熱で体調も最悪でしたが。

続きを読む

自社サイトのリニューアルが一段落

年末からバタバタを動き出した僕の会社のリニューアルがようやく一段落しました。

2年前に「リニューアルしよう!」と動き出しプロジェクトチームまで結成されたものの、みんなどうしていいか分からずに自然消滅。そして昨年秋になって再び動き出し、またまたプロジェクトチームが結成され、ようやく今回のリニューアルに至ったわけです。

続きを読む

Safari 3.1 が速い!

Safari 3.1を会社のPCにもインストールしました。

今、会社のオフィシャルサイトをリニューアルしている最中であり、4月の頭からリニューアルサイトをオープンさせる予定です。

今回のリニューアルでは、CMSを導入することが目玉の一つです。いくつかのCMSを検討した結果、Moveble Typeを導入することになりました。

で、まさに今、200近いエントリーを投稿しまくってる真っ最中です。

続きを読む

Windows版も日本語インターフェース - Safari 3.1

本日リリースされたSafari 3.1をインストールしてみました。

Safari 3.1

Safari 3 ベータは英語のインターフェースでしたが、今回のSafari 3.1はWindows用も日本語のインターフェース対応になりました。世界最速のウェブブラウザというだけあって確かに速いです。ただ、Windowsユーザーは最初はフォントがちょっと違和感あるかもしれませんね。

シンプルかつ柔軟なコンタクトフォームを作るプラグイン - Contact Form 7

WordPressにコンタクトフォームを設置するプラグインはいくつかありますが、最近とても便利そうなプラグインを見つけたので紹介します。

このプラグインの特徴は以下のとおりです。

Contact Form 7 はシンプルかつ柔軟なコンタクトフォームを提供する WordPress プラグインです。

  • 複数のコンタクトフォームを管理できます。
  • フォームとメールの内容を簡単なマークアップでカスタマイズできます。
  • jQuery Form Plugin による AJAX の動的送信が可能。
  • Akismet によるスパムフィルタリングをサポート。
  • CAPTCHA によるボット防止をサポート。

WordPress 2.2 以降に対応。

インストール方法や使い方は上記の作者のサイトで丁寧に説明されています。

「ホップ本」買いました

『ホップ本』といわれている(らしい)『実践 Web Standards Design』を買いました。

この本も、『Web標準の教科書』と同様、評価の高い本なので楽しみです。

Movable Type WEBデザインの新しいルール - 感想

Movable Type WEBデザインの新しいルール

Movable Type WEBデザインの新しいルールを読みました。

この本の著者の一人は、MT4LP5(CSS Nite LP, Disk 5)のセッションA4「MTタグ、JavaScript を用いたサイトのカスタマイズ」を担当される小粋空間の荒木勇次郎さんということもあり、また、MT4LP5のFAQでも初心者に勧めていたので、Amazonのレビューはイマイチでしたが購入してみました。

続きを読む

キャプチャした画像にコメントを書き込めるFirefoxアドオン - FireShot

自分のブログ記事一覧を眺めていたら、書き途中だったこの記事があったので、完成させて公開します。

この記事を途中まで書いたのが1か月以上前になりますが、それから今までの間に、実際に仕事でこのアドオンが何度も活躍してますので、自信をもってお勧めできます。

Webページをキャプチャし、その場でコメントや矢印、線などを書き込めるという、なかなか便利な画面キャプチャ用アドオンを見つけました。保存形式は、PNG、 JPEG、 BMPが可能です。

情報源:キャプチャしたWebページに注釈を自由に書き込むことができるFirefoxアドオン「FireShot」

さて、使い方を紹介します。

続きを読む

WordPressのカスタムフィールドを便利に使うプラグイン - Custom Field GUI

【2009-02-05 追記】

Custom Field GUI Utility 1.1.0 - WordPress 2.7 でカスタムフィールドを便利に使うプラグインを公開しました。WordPress 2.7 をお使いの方はこちらをお勧めします。

【2008-10-18 追記】

このブログ記事のプラグインのカスタマイズ版の『 Custom Field GUI Utility 』をバージョン 1.0.0 にバージョンアップしました。

WordPress 2.6.x をお使いの方はこちらをお勧めします。インターフェースが他のフィールドと同じになったり、画像のアップロード、サムネイル表示がスムーズにできます。

【2008-06-13 追記】

管理画面に反映されたフィールドの下にサンプルが表示できるようにしたり、「投稿の編集画面だけに表示」「ページの編集画面だけに表示」「両方の編集画面に共通して表示」という3パターンを使い分けられるようにした Custom Field GUI Utility というプラグインを公開しました。

【2008-06-05 追記】

Custom Field GUI をカスタマイズしてカスタムフィールドをもっと便利に使う方法という記事をアップしたので、あとでそちらもご覧ください。

【2008-04-10 追記】

試してみましたが、WordPress 2.5 でも問題なく動くみたいです。

WordPressのカスタムフィールド機能をグッと便利にするプラグインを紹介します。

柔軟なサイト運営を可能にするカスタムフィールド機能。Movable Typeでは4.1から追加されましたが、この機能はWordPressにもあります。

しかし、WordPressのカスタムフィールドの入力の仕方は、毎回「キー」をプルダウンメニューから選択するか入力して、それに対する「値」を入力後、「カスタムフィールドを追加」、それを繰り返して最後に記事を「公開」するという、ちょっと面倒な作業でした。

Wordpress ME 2.2.3 のカスタムフィールド入力画面

それをグッと楽にしてくれるプラグインが「Custom Field GUI」です。

このプラグインを利用すると、エントリー投稿画面に次のようなカスタムフィールドを入力するためのエリアが表示されます。なお、これはデフォルトの設定のままの画像です。

Custom Field GUIを利用した画面

エントリー投稿画面のデフォルトのカスタムフィールド欄を使わずに、この欄にまとめて入力して「公開」すれば完了してしまいます。変更する場合も、ここを変更して「保存」するだけになります。

続きを読む

記事投稿画面に任意の機能のボタンを追加できるプラグイン - CustomEditorButton2

CustomEditorButton2(MT4.1 以降専用)という素敵なプラグインを見つけてしまいました。

これは、ブログ記事の投稿画面に、任意の機能を持たせたボタンを追加できるプラグインで、つい先日見つけた「MTのエントリーが便利になるプラグイン - tagAssist」と似た機能を提供してくれるプラグインです。

続きを読む