かたつむりくんのWWW

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」と似た機能を提供してくれるプラグインです。

続きを読む

MTのエントリーが便利になるプラグイン - tagAssist

いつも参考にさせていただいている僕の大好きなブログの一つ「CSS HappyLife」さんが公開している「tagAssistプラグイン」をインストールしました。つい先日、MT4.1専用版も公開されています。

続きを読む

Dreamweaver用拡張機能でCSSプロパティを並べ替える

昨日、Adobe Dreamweaver CS3 10 周年記念 イベント - 夢を紡ぐ者たちへ -に参加してきました(レポートのエントリーを後日掲載します)。

そこで紹介されたTipsやCS4に関する最新情報は、どれも興味深く、自分にとっては役立つ情報ばかりでしたが、その中ですぐに試せて、かつ大変便利そうで、さらに自分が今までずっと欲しかった機能があったので紹介します。

それは、Dreamweaverの拡張機能を使って、CSSプロパティの記述順序を自動的に並べ替えることができる、というものです。

続きを読む

Entry Guideline

まだ若いのに物忘れの激しい自分のためのエントリーです。

CSSレイアウトを意識してブログを続けていると、どの場合にどのclass属性をつけるか混乱してしまうことがあります。「image」というclass名だったか「images」だったかという単純なものですが。

そこで、このブログのための「Entry Guideline」(エントリー・ガイドライン)を作ることにしました。(このエントリーは逐次更新)

続きを読む

MacBook Air - ビデオガイド

MacBook Airのビデオガイドが公開されました。

これを見るとより一層欲しくなっちゃいます。

でも次買うとしたらiMacかなー。PC本体がモニターに内蔵されていることをつい最近知った。。。

CSSプロパティの記述順序

CSSの記述順序をまとめてみました。

おおまかなところはMozillaの順序をベースにし、それにW3Cの仕様書(CSS2 Specification)と僕のバイブルである『Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト』での出現順序をミックスさせて、少し自分好みに並べ替えました。

使用頻度の低いプロパティは隠してありますので「**」のついている項目をクリックすれば表示されるようになっています。

ちなみにこのアコーディオンは、タブ形式で切り換えることにも対応できるように「よくある質問っぽいののjQueryを使ったサンプル」で紹介されているライブラリを使用させていただきました。

なお、qaTab.js の以下の部分の2行目と8行目に「.accord」を加えて、dt.accordだけがアコーディオンするように変えています。そうすれば、<dt>要素の次に<dd>がない場合でも大丈夫なので。

$(document).ready(function() {
	$("div.tabContainer dt.accord").hover(function(){
		$(this).css("cursor","pointer"); 
	},function(){
		$(this).css("cursor","default"); 
		});
	$("div.tabContainer dd").css("display","none");
	$("div.tabContainer dt.accord").click(function(){
		$(this).next().slideToggle("normal");
		});
});
【2008-08-27 追記】

現在、このライブラリは使用していません。したがって、「**」のついている項目も最初から表示してあります。

続きを読む