かたつむりくんのWWW

CSS Nite ビギナーズに参加した感想とか要望とか

CSS Niteビギナーズ

11月 1日、晴天に恵まれた三連休の初っ端、CSS Niteビギナーズに行ってきました。6 時間みっちりと CSS に関する基礎を復習することができました。

続きを読む

記事投稿時間の横に Twitter みたいな「約~前」を表示する

記事投稿時間の横に Twitter みたいな「約~前」を表示する

Movable Type や WordPress の記事投稿時間の横に、Twitter のように、その記事を投稿したのが現在時刻から「約時間~前」というのを表示する JavaScript ( jQuery )です。

経過時間を解析する仕組みは、「一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版」のカスタマイズのときとほぼ同様で、小粋空間さんのところで紹介されている「新着エントリーのあるカテゴリーに New マークをつける」を参考にさせていただきました。

続きを読む

Movable Type で CAPTCHA 認証を使わないでスパム対策をしてみる

CAPTCHA 認証

CAPTCHA 認証は、ブログに限らず多くの Web サービスで取り入れられている代表的なスパム防止策です。もちろん Movable Type でも利用できます。しかし、 Web サービスによっては結構見づらかったり、そもそも規則性のない文字列を入力するのは面倒だったりします。

そこで、効果があるかは分かりませんが、もう少しユーザーに手間をかけないスパム対策を考えてみました。

続きを読む

Movable Type のブログ記事の公開日時を年号(元号)で表示する

Movable Type のブログ記事の公開日時( entryData )などを「平成」などの年号(元号)にする方法を考えてみました。

例えば、このブログ記事の公開日時を次のようなタグで出力してみます。

<$mt:EntryDate format="%x (%a)"$>

これを再構築すると次のように出力されます。

2008年10月27日 (月)

こういった出力形式であれば、「日付に関するテンプレートタグのモディファイアリファレンス | Movable Type 4 ドキュメント」にあるとおり、format モディファイアで対応可能です。しかし、「平成」などの元号表示には、format モディファイアでは対応できません。

そこで変数を使って「年号表示」をする方法を考えてみました。

続きを読む

Movable Type の記事投稿画面の UI をカテゴリごとに変えるカスタマイズ ( jQuery 版)

Movable Type の記事投稿画面で、各入力フォームのラベルや位置などのインターフェースを、カテゴリごとに変えられるように管理画面をカスタマイズしてみました。

uichanger01.gif

カスタマイズといっても、管理画面のテンプレートはほとんどいじらずに、jQuery で書いた JavaScript テンプレートを読み込むだけです。もう少し正確に言えば、本体のテンプレートは一切いじらず、コピーをカスタマイズして、別のディレクトリに置くだけです。

カスタムフィールドのない MTOS や、マルチブログにするほどでもないけどちょっとインターフェースを変えたいんだよなーってときに役立つと思います。

続きを読む

Custom Field GUI Utility 1.0.0 にバージョンアップ

Custom Field GUI Utility をバージョン 1.0.0 にバージョンアップしました。WordPressのカスタムフィールドが、より使いやすくなると思います。

主な変更点は以下のとおりです。WordPress 2.6.x をご利用の方は、最新版がお勧めです。

  • 「投稿」及び「ページ」の作成・編集画面に生成されるフォームのインターフェースを、WordPress 2.6.x の他のフィールドと同じにしました。カスタムフィールドを増やしても管理画面上の違和感がなくなります。
  • イメージフィールドに、WordPress オリジナルのアップローダーを使用して URL を挿入できるようになりました。
  • 画像のサムネイル表示が Facebox 1.2を使ったオーバーレイ表示になりました。

WordPress でカスタムフィールドを使おうと思っている方は、是非チェックしてみてください。

CSS Nite in Ginza, Vol.27 に参加した感想と実践

続きを読む

Make Link を使って Amazon アソシエイトの個別商品リンクを作る

僕が愛用している Firefox のアドオンの中に、Make Link というアドオンがあります。

これは、リンク用のソースコード等を右クリックから色々な形式でコピーすることができるようになるアドオンで、その形式も自由にカスタマイズ可能ということもあり、ブログを書くときに重宝しています。

今回は、この Make Link を使って、Amazon.co.jp アソシエイト(アフィリエイト)の「個別商品テキストリンク」を簡単に作成できるようにしてみました。

ちなみに、今回作成するのは、「本」についての以下のような形式の個別商品リンクです。

<a href="http://www.amazon.co.jp/o/ASIN/10桁のISBN/トラッキングID/">書名</a>

続きを読む

WordPress の記事編集画面で各フィールドへジャンプするリンクを生成するプラグイン

WordPressの記事作成・編集画面で、各入力フィールドへジャンプするリンクをサイドバーに生成するプラグインを作ってみました。「投稿」「ページ」どちらにも対応しています。

field_navi01.gif

Custom Field GUI Utility でフィールドを追加していたり、管理画面をカスタマイズして不要なフィールドを display:none; にしていたりしても、それらに合わせてリンクが生成されます。

使い方やダウンロードは以下のページからお願いします。

ブログのタイトル画像をアイテムで管理する

sitename_asset01.png

ブログのタイトルを画像にする方法としては、テキストを画面外へ飛ばして背景画像を表示させたり、単純に img 要素を使ったりと、いくつかの方法があります。

このブログでは、シンプルに img 要素を使って表示させています。ブログのタイトル(サイトタイトル)を img 要素にするのって、アクセシビリティ上敬遠されがちかもしれませんが(最近はどうなんだろう?)、ちゃんと alt 属性に適切な言葉を入れればいいじゃん、という考えです。

さて、今回は、知っている人には今更何をっていう感じかもしれませんが、ブログのタイトル画像を Movable Type のアイテムで管理してみます。

続きを読む

「出力ファイル名」と「公開日」を同時に変更する管理画面のカスタマイズ

basename2_01.gif

今回のカスタマイズは少し前の「Movable Type のブログ記事の出力ファイル名を変更する管理画面のカスタマイズ」の続きです。

前回のカスタマイズでは以下のような機能を持つ「出力ファイル名を設定して保存」ボタンを追加しました。

  • 出力ファイル名のロックを解除する。
  • 出力ファイル名を「日-時分秒」のフォーマットで書き換える。
    (例) 9月22日 6 時50分30 秒の場合:22-065030
  • 書換え後にブログ記事を保存する。
  • ただし、既に出力ファイル名がこのフォーマットになっている場合は、確認メッセージを表示し、書き換えて保存するか、書き換えずにそのまま保存するか分岐する。

今回は、この機能に次の機能を追加してみたいと思います。自分で使っていてかゆかったところに手を届かせた感じです。

  • 出力ファイル名を書き換えるときに、同時に「公開日」も書き換える。
  • 出力ファイル名を既に書き換えているか否かに関わらず、書き換えて保存するか確認する。
  • その確認画面で「公開状態」のステータスを明示する。

続きを読む

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。 - 感想

9784844326090.jpg

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。』を読みました。

Movable Type 4 に関する書籍はすでに多数出版されていて、この本はどちらかというと後発本ですが( 4.2 対応としては早いです)、他の本とかぶっている内容があまりないので、すでに MT 本を何冊か持っている人でも役立つと思います。実際に僕も MT に関する書籍はこれで 8 冊目になりますが、それでもこの本はけっこう勉強になりました。

一言でこの本の印象を言うなら「MT 初中級者に役立つ 100 のTips 集」といった感じです。

続きを読む

Movable Type でアップロードするファイルサイズの上限を変更するとバックアップ時にエラーがでるっぽい

特に必要に迫られたわけではないのですが、『Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。』の法則90を読んで、なんとなく自分もアップロードするファイルサイズの上限を変更してみました。

それはそれで問題がなかったのですが、その後の法則92 を読んで思い出したように Movable Type のバックアップをやったわけですが、その時以下のようなエラーが発生しました。

backerror.jpg

何度か試しましたが、僕の環境では mt-config.cgi に CGIMaxUpload 環境変数を追加するとダメみたいでした。

一応、ご参考までに。

一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版

小粋空間さんのところで紹介されている「新着エントリーのあるカテゴリーに New マークをつける」の jQuery 版を作ってみました。

このブログの「 Recent Entries 」(最近のブログ記事)のところにある星マーク(New マークのこと)がそれで(下図参照)、3日以内に作成されたブログ記事に表示されるようにしています。

newmark01.jpg

このテクニックは、荒木さんご自身の著書『 Movable Type 4.2 パーフェクトガイド』の中でも紹介されていますし(573ページの「6.39 新着表示」)、WWW WATCHさんらの共著本『 Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。』でも紹介されていました(146ページの「法則65 一定時間で自動的に消える New マークを付ける」)。

この JavaScript で New マークを表示するロジックは以下のようになっています。

続きを読む

Movable Type のブログ記事の出力ファイル名を変更する管理画面のカスタマイズ

Movable Type のブログ記事の出力ファイル名を変更する管理画面のカスタマイズ

Movable Type のブログ記事の出力ファイル名は、デフォルトのままだと、タイトルから判断してシステムが自動的に作成します。

基本的には、タイトルに含まれる英数字を拾い出し、スペースはアンダースコア「 _ 」、すべてが日本語だったら「 post-1 」のようになります。

このシステムが自動的に作成するファイル名が結構イケてなくて、異様に長かったりアンダースコアやらハイフンやらがバンバン入っていたりすることがあります。また、異様に長いファイル名があったと思ったら「 post-1 」というファイル名があったりして、サイト内での統一が全く取れていないことに気付き、悲しくなったりもします。

Movable Type の知識がある程度あれば、最初からアーカイブマッピングを設定し、ブログ記事の ID をファイル名にしたり、投稿日時をファイル名にしたりして、統一することができますが、僕のように「とりあえず始めてみた」的な人は、こういった状態に陥ることは少なくないのではないでしょうか。

だからと言って、途中でアーカイブマッピングを変更するわけにもいかないし、毎回手動で変更するのも面倒なので、目をつむってしまうことも少なくないかもしれません。

そこで、ブログ記事の編集画面に、「出力ファイル名を設定して保存」というボタンを作るカスタマイズをしてみました。

ブログ記事の編集画面に追加した「出力ファイル名を設定して保存」ボタンのイメージ

続きを読む

CEB2_plusUtility 0.3 アップデート - CustomEditorButton2に便利なボタンを追加するプラグイン

CEBplusUtility - Movable Type プラグインを 0.3 にバージョンアップしました。

今回の修正点は以下のとおりです。

  • li 要素のみを追加するボタンli要素のみを追加するボタンを追加しました。デフォルトのリストボタンデフォルトの管理画面のリストボタンの痒かった部分に手が届きますw
  • 特殊文字を実体参照に変換するボタン実体参照に変換するボタンを追加しました。エムロジック放課後プロジェクトさんの EntryRefButtonとほぼ同様です。
  • pre,code ボタンpre、code要素を追加するボタンの動作を少し変更しました。
  • 追記するときに便利なボタン追記用ボタンを追加しました。

プラグインの詳細とダウンロードは以下のページからお願いします。各ボタンの説明にスキップできるインデックスや各バージョンで変更したボタンに「するするナビゲーション」で移動できるようにしてあります。

Easy Start Pack - jQuery プラグインを簡単に導入する WordPress プラグイン

jQuery を使った色々な機能を WordPressに簡単に導入できるようにプラグインにしてみました。名付けて「 Easy Start Pack 」プラグインです。

このプラグインで導入できる主な機能は次のとおりです。

  • 階層型のドロップダウンメニュー(Superfish)
  • 画像のオーバーレイ表示 (Facebox 1.2)
  • 外部リンクは別ウィンドウ (yuga.js)
  • ページ内リンクはするするナビゲーション (yuga.js)
  • 便利な class 名の付与 (yuga.js)
  • アコーディオン

続きを読む

IE で Custom Field GUI Utility のチェックが外れてしまう件を修正

先日、「WordPressのカスタムフィールドを便利に使うプラグイン - Custom Field GUI」という記事に以下のようなコメントをいただきました。

IE7で使用しているところ、一度投稿した記事を投稿の管理から再編集するときに、カスタムフィールドに追加してあるチェックボックスが最初の投稿時にチェックしていても、チェックが外れて表示されてしまいます。

Firefoxでは、チェックボックスのチェックが維持されてまま表示されます。

IE7でもチェックが維持できる方法があるでしょうか?

よろしくお願い致します。

この件については自分も少し気になっていたのですが、この不具合については、オリジナルの Custom Field GUI からある不具合だったのでなんとなく放置していましたが、いただいたコメントを機に原因を調べました。

コメントいただいた まさ さん、ありがとうございます。

続きを読む

Google Chrome 速報 - Web デザイナーにうれしい「要素を検証」機能

今日リリースされた Google Chrome を試してみています。今このエントリーも Google Chrome で書いています。

Google が「Google Chrome が実現する高速、快適、安全なウェブブラウジング。無駄を削ぎ、シンプルな機能美を追求したブラウザです」というだけあって、確かに高速で快適です。

続きを読む

ブログ記事とウェブページがプレビューできない場合

このブログを自作のテンプレートに変えてからというもの、ブログ記事とウェブページを投稿するときに、再構築すれば何の問題もなく表示されるのにもかかわらず、編集画面で「確認」をクリックしても、記事本文の部分だけ真白で表示されないという悲惨な状況が続いていました。

今朝解決したのでメモしておきます。

続きを読む