タグ

ブックマーク / www.koikikukan.com (44)

  • YouTube の Embed タグを一発で XHTML valid にする「YouTube -> Valid」

    以前、「YouTube の Embed タグを XHTML valid にする」のエントリーで、「YouTube で提供されている Embed タグを修正することで XHTML valid になります」といった内容を書きましたが、タグを毎回手で書き直すのは結構面倒です。 ということで、YouTube の Embed を一発で valid なタグに書き直してくれるサービスをエントリーで紹介致します(作成者の方からトラックバックを頂きました)。シンプルな画面で結構気に入ってます。 YouTube → Valid つぼろぐプラス:YouTubeの動画埋め込みタグをValidに 使い方は、YouTube で見たい動画のページのURL(Embed タグではない)を「YouTube → Valid」の入力フィールドに設定。あとは「Generate!」をクリックすれば valid なタグが下に表示され

    YouTube の Embed タグを一発で XHTML valid にする「YouTube -> Valid」
    kelokelo
    kelokelo 2007/03/16
    メモ。
  • JavaScript で文字をトリミングする(改善版)

    JavaScript を用いてエントリータイトル等の文字をトリミング(指定した文字数だけ表示する)するカスタマイズです。前回の「JavaScript で文字をトリミングする」は文字数だけでトリミングしたものですが、今回の改善版はバイト数で計算します。全角はそのまま1文字として数え、半角英数は2文字(2バイト)を1文字としてカウントします。 左のスクリーンショットが5文字でトリミングしたサンプルです。上は全角のみなので5文字でトリミングし、下は半角を含むので計7文字でトリミングしています。 さらにスクリプトを修正すれば、特定の半角文字("M"とか"W"のような幅の広い文字)を全角として数えることも可能と思われます。完璧に横幅を揃えることはできませんが、かなり精度の良いトリミングができると思います。 今回も「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列を

    JavaScript で文字をトリミングする(改善版)
  • JavaScript で文字をトリミングする

    JavaScript を用いてエントリータイトル等の文字をトリミング(指定した文字数だけ表示する)するカスタマイズです。 以前、「Movable Type のようなトリミングを、他のブログで実現できないでしょうか」というご質問の回答です。大変遅くなりましたが、このエントリーで回答に替えさせて頂きます。 ここでは文字数でトリミングする方法を紹介していますが、半角・全角が混在している場合のサイズを調整したい場合は、下記のエントリーを参照ください。 JavaScript で文字をトリミングする(改善版) とりあえず「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列をトリミングする、簡単な JavaScript を書いてみました。 Windows + IE6/Firefox 2 で実験した限りでは、全角・半角いずれも1文字で計算してトリミングしてくれるようですが

    JavaScript で文字をトリミングする
  • 小粋空間: CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

    CSSでブログに影をつける(ドロップシャドウ)」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩んでいる(かもしれない)方のために、Photoshop 6(CSは持ってません)を利用した作成方法を紹介します。 [ファイル]-[新規]で(固定レイアウトの場合は)ブログ幅のウィンドウを作成。実際の横幅はもっと広いと思いますが、説明上、ここでは 250px に設定しています。 新規作成のウィンドウはこんな感じになります。 [レイヤー]パレットに表示されている[背景]をダブルクリック。 開いたウィンドウのレイヤー名は「レイヤー0」になっていると思いますので、そのまま[OK]をクリック。これは、[背景]から任意の名前に変更することで、レイヤーのロックを外してドロップシャドウ等の効果を設定できるようにするための操作です。 これで[レイヤー]パレットに表示され

    kelokelo
    kelokelo 2006/11/30
    影付き画像の作り方。
  • Movable Type のエントリー削除でHTMLファイルも自動的に削除する

    Movable Type で一旦公開したエントリーを削除した場合、対象のエントリー・アーカイブはデータベースから削除され、メインページやカテゴリー・アーカイブ/月別アーカイブに表示された記事、さらに各ページに貼られた対象エントリーへのリンクもすべて消滅しますが、Movable Type を普通にインストールしたままの状態では、エントリーを公開した時点で生成されるHTMLファイルは残ってしまいます。 したがって、対象となるエントリーの公開→削除のタイミングによっては検索ロボットにクロールされてしまい、削除したはずのエントリーが検索エンジン経由で他の方に閲覧されてしまう可能性があります。*1 これは公開したエントリーを「非公開」に変更した場合や出力ファイル名を変更した場合も同様です。 このような事態を回避したい場合、これまではFTPツール等を利用して手動で残ってしまったHTMLファイルを削除す

    Movable Type のエントリー削除でHTMLファイルも自動的に削除する
    kelokelo
    kelokelo 2006/10/30
    エントリー削除でHTMLファイルも削除。これはいい。
  • Ajax 月送りカレンダー

    Ajax を利用した Movable Type 月送りカレンダーのカスタマイズです。リアルタイムカレンダー(日の日付の装飾)および土・日・休日表示も盛り込まれています。 MT4をご利用の方は「Ajax 月送りカレンダー(MT4版)」を参照してください。 このカレンダーは、従来の月送りカレンダー(iframe 利用)と比較して、下記のアドバンテージがあります。 週数の変化によって高さが可変、つまりカレンダー下に表示されるアイテムとの間隔が常に一定 月送りのリンクの履歴がブラウザの履歴に残らない すでにお気づきの方もいらっしゃると思いますが、当サイトでは数ヶ月前から月送りカレンダーを Ajax 化して試験運用してiいます。月送りのリンクをクリックして Ajax 化されたカレンダーを体感してみてください。 注:カスタマイズでつまづいた場合、「8.トラブルシューティング」をご覧ください。 仕様

    Ajax 月送りカレンダー
  • Movable Type 3.32日本語版リリース

    出遅れましたが Movable Type 3.32日語版がリリースされました。 Movable Type 3.32日語版の提供を開始 日より、Movable Type 3.32日語版 (以下、3.32-jaと称します。) の提供を開始いたします。 Ogawa::memoranda さんご指摘の、 MT 3.31のMTEntryTagsの性能バグ MT 3.31 + SQLiteがベラボーに遅い件について。 の改善をはじめ、計13項目について修正されています。 改修前のMTEntryTagsのパフォーマンスについては小川さんのブログで次のように書かれています。 MT 3.31のMTEntryTagsの性能バグ Apache 2.2.2 + mod_fcgidの組み合わせですべての個別エントリーアーカイブを再構築したとき、3.2では要する時間は40秒程度。ところが3.3では3分強かかる

    kelokelo
    kelokelo 2006/09/08
    出たんだ・・・。
  • ホルスト 組曲「惑星」 作品32(冥王星付き)

    国際天文学連合の総会開催中、冥王星降格に反対するかのように、8月23日に発売されたCDです。 ホルスト:惑星(冥王星付き) ラトル(サイモン) ベルリン・フィルハーモニー管弦楽団 ホルスト 東芝EMI 2006-08-23 売り上げランキング : 1 おすすめ平均 Amazonで詳しく見る by G-Tools このCDにはボーナストラック(CD-EXTRA)がついており、指揮者サイモンとCDに収録されている5人の作曲家のメイキング映像を見ることができます。 さて、ホルスト作曲の組曲「惑星」(1914?1916作曲)、その中でも特に「木星(ジュピター)」は誰しも一度は耳にしたことがあるほどの著名な作品です。→木星(抜粋)を聴いてみる この組曲の楽章は「火星・金星・水星・木星・土星・海王星・天王星」で構成され、作曲当時は「冥王星」が未発見だったため作品には含まれませんでした(厳密にはホルスト

    ホルスト 組曲「惑星」 作品32(冥王星付き)
    kelokelo
    kelokelo 2006/08/26
    記念ブクマ
  • 破損した Word 文書を修復する方法

    Word 2000 でテキストの他に図や表をごちゃごちゃ挿入した文書を作成していたところ、ある時点から「保存」を実行するとエラーが発生するという事態に陥りました。具体的には、テキストを1文字追加しただけでも保存でエラーになるという悲惨な状況です。 こういう場合、新規 Word 文書を作成し、エラーになったファイルのテキストや表・図形等からちょっとずつコピーしたりしていたのですが、もっとエレガントな方法はないかと検索したら、Microsoft のサポートページに修復方法がありました。 [WD2000] 破損した文書を修復する方法 今回の場合、このページの「ファイルの修復方法」に掲載されている「方法1」の手順で修復することができました。以下、修復方法および関連ページをご紹介します。 1.ファイルは開くが、おかしな動作をする場合 1.1 方法1. 他のファイル形式に変換した後、 Word 形式に

    破損した Word 文書を修復する方法
    kelokelo
    kelokelo 2006/08/14
    破損Word文書の復活。メモ。
  • スタイルシート生成ページ

    サイドメニューの折りたたみ(v4.0) └ test1 07/03 └ test2 08/11 └ test3 09/25 Firefox・Netscapeで連続した半角文字を折り返す └ test1 09/27 └ test2 09/27 └ test3 09/27 このページで公開テンプレートのスタイルシート(styles-site.css)の配色を変更することができます。 下記のフォームのそれぞれの項目について配色(RGB値または色の名前)を設定し、「配色を確認する」をクリックと、このページの配色が指定したスタイルに変わります。 配色が決まったら「CSSを生成する」をクリックしてください。設定が反映されたスタイルシートが下のテキストエリアに生成されます。 「設定を全て戻す」をクリックするとデフォルトの設定状態に戻ります。 カラム横の背景 *固定カラム/1カラムのみ有効 背景 *エント

  • Widget の CSS を修正する

    Movable Type 3.3x より Widget Manager が標準装備されて Widget を利用される方も少なくないと思います。このエントリーでは Widget の中から見栄えに不満の残る、カレンダーおよび Technorati Search のCSSを若干修正してみました。 表示は Windows2000/XP+IE6.0/Firefox1.5/Opera9.0 で確認しています。 1.Widget カレンダー デフォルトCSSでは左のスクリーンショットのように左寄りに表示されてしまっています。ということで、スタイルシート styles-site.css から 下記のセレクタを検索し、width プロパティ値を 14% から 20px に修正します。 .module-calendar .module-content th, .module-calendar .module-

    Widget の CSS を修正する
  • Movable Type 3.31日本語版の提供を開始

    出遅れましたが、Six Apart が Movable Type 3.31日語版の提供を開始しました。 Movable Type 3.31日語版の提供を開始 大変お待たせいたしました。日より、Movable Type 3.31日語版 (以下、3.31-jaと称します。) の提供を開始いたします。 3.31-jaは、7月3日にご案内しました下記の不具合などを修正したものです。 また上記記事からリンクされている技術情報提供ブログの先には StyleCatcher 用のスタイルライブラリ作成方法が掲載されています。 StyleCatcher 用のスタイルライブラリを作成する これにより、ご自身のサイトで Movable Type 用のデザインを公開することができます。 以前、当サイトで以前スタイルライブラリ作成方法を hack した記事も下記にありますのでご参考まで。 StyleCatc

    Movable Type 3.31日本語版の提供を開始
    kelokelo
    kelokelo 2006/07/14
    出たー。時間があったら絶対アップデートする。
  • Widget Manager プラグインの使い方(デフォルトテンプレートを3カラムにして利用する)

    Movable 3.3 で新たに追加された Widget Manager プラグイン。このサイトで以前「Sidebar Manager plugin でサイドバーのレイアウトを変更する」で紹介したものがバンドルされたようです。 これで何ができるかと申しますと、サイドバーにある「最近のエントリー」や「カテゴリーリスト」等の Widget(ウィジェット)の表示位置を、プラグインの管理画面(左のスクリーンショット)を使って、ドラッグ&ドロップで配置や表示・非表示を自由に変更できるようになります。 これを一旦設定してしまえば、Widget の位置を変更するためにテンプレートの編集画面を開く必要がなくなります。 サイドバーに表示するための Widget は、「テンプレートモジュール」としてひとつずつ登録し、Widget を表示するテンプレートには、これまで Widget を表示していた部分を下記のタ

  • 小粋空間: Litebox 1.0 をブログに適用する

    Lightbox JS v2.0 の後継版、Litebox が出ていました。ということで v2.0 はエントリーし損ないましたが、今回は Litebox をブログに適用するカスタマイズを紹介します。 Lightbox の時代からそうなのですが、このツールは画像を表示するページのパスが変化した場合のケースまで考慮されていません。つまりブログではインデックスページや各アーカイブページのパスがそれぞれ異なることため、提供されているファイルに対し、各ページから同様の振る舞いをさせるための修正が必要になります。 下記に修正を施したサンプルを作りました。トップページと、そこからリンクされている記事ページでも動作するようになっています。 Litebox のブログ適用サンプル サンプルでは Movable Type を利用していますが、他のブログでもカスタマイズのタグ部分を適宜読み替えて頂ければ適用可能と

    kelokelo
    kelokelo 2006/07/07
    ブログの画像表示。
  • 画像のポップアップウィンドウをカスタマイズする

    Movable Type の管理画面から画像をアップロードした後、次の画面のラジオボタンで「HTMLを表示」を選択し、「ポップアップ」をクリックすると、アップロードした画像をポップアップウィンドウで表示するためのHTMLコードが表示されます(スクリーンショット)。あとはこのコードをエントリーに貼り付ければOKです。 このHTMLコードによるポップアップウィンドウ、アップロードした画像のサイズにあわせてポップアップするのですが、ウィンドウのリサイズやスクロールが無効な状態で表示されるため、画像サイズがディスプレイサイズを超えている場合、(ポップアップウィンドウはディスプレイサイズより大きくならないため)画像を全て参照することができません。 このエントリーでは、ディスプレイより大きなサイズの画像を全部閲覧できるようにするためのカスタマイズを2つ紹介します。いずれかお好きな方をお選びください。こ

  • 小粋空間: Authen: : Captcha をインストールして Captcha Plugin を利用する(CPAN による perl モジュールのインストール)

    レンタルサーバに perl モジュールをインストールする方法を紹介します。 レンタルサーバでは Ogawa::memoranda さんの Captcha プラグインの動作に必要な Authen::Captcha モジュールがインストールされていないケースが少なくないようです(GD はインストールされているという前提)。またネットを検索してみても、一般的な perl モジュールのインストール方法は記されているのですが、そこに Authen::Captcha のインストールについて記されている訳ではないのでお互いの情報が結びつかず、perl に精通していない方が検索エンジンから方法を探し出すのは困難なようです。 ということで、Windows マシンからレンタルサーバにログインして、perl モジュール Authen::Captcha をインストールする方法、およびプラグインの修正について記しま

    小粋空間: Authen: : Captcha をインストールして Captcha Plugin を利用する(CPAN による perl モジュールのインストール)
    kelokelo
    kelokelo 2006/06/15
    今後の参考に
  • 小粋空間: MySQL phpMyAdmin によるバックアップ(間違いあり:インポートは1.2を使うとうまく行く)

    Movable Type 等のブログツールを MySQL で運用している場合、管理画面の「書き出し」とは別に、データベース(以下DB)からバックアップを取得することができます。 Movable Type を例に挙げると両者の違いは次の通りです。 書き出しDBバックアップ バックアップ対象エントリー・コメント・トラックバック・カテゴリーブログ情報やテンプレート等、DBに保存されている全てのデータ バックアップサイズ無制限無制限(ただしサーバ環境によってアップロードサイズの制限あり) ということで、DBバックアップについてはバックアップサイズに制限があり、例えばさくらインターネットのスタンダードプランでは約8MBになっています(一番最後の画面参照)。DBのバックアップを利用する際はこの点を考慮する必要があります。 ちなみに私のサイトのDBバックアップデータはすでに12MBを超えており、運用デー

    小粋空間: MySQL phpMyAdmin によるバックアップ(間違いあり:インポートは1.2を使うとうまく行く)
    kelokelo
    kelokelo 2006/06/13
    MySQLのバックアップ。今度、自分のもバックアップしておこう。
  • BigTemplateWindow プラグインでテンプレートを編集する

    Movable Type 3.3 のリリースが近づいてまいりましたので、以前からエントリーしようと思っていたプラグインを紹介します。 タイトルにある BigTemplateWindow プラグインは、テンプレート編集画面を拡張するためのBigPAPI対応プラグインです。 1.プラグインの主な機能 テンプレート編集画面(別ウィンドウ)で下記のことができます。 HTMLタグ埋め込みボタンと同じような操作でMTタグの埋め込みができます MTタグを左の折りたたみメニューから選ぶことができます メニューのMTタグをフォーカスするとツールチップが表示され、タグの解説が表示されます 他のプラグインをインストールしている場合、それらのMTタグも表示されます(ツールチップはなし) 編集画面でTABキーの入力や半角スペースの一括入力ができます テキストの拡大・縮小ができます。 ウィンドウサイズは可変なのでテキ

    BigTemplateWindow プラグインでテンプレートを編集する
  • CSSでエントリータイトルに画像を表示する

    エントリータイトルの先頭に画像に表示する方法を紹介します。ここでは公開テンプレート(Movable Type)を用いた説明になりますが、HTMLCSSの設定による一般的なテクニックですので、どのようなテンプレート(あるいはHTML)でも利用可能です。 カスタマイズを行うことで、スクリーンショットのようにタイトル左に画像が表示されます。 以下カスタマイズ方法です。なお、リスト形式(ul - li)で画像を表示する場合はリストマークの画像のずれを修正するを参照ください。 1.テンプレートの修正 Movable Type の公開テンプレートではエントリータイトルを下記のように設定しています(分かりやすくするために一部省略しています)。 <h3 class="entry-header">●<$MTEntryTitle$></h3> <$MTEntryTitle$> が実際にはエントリータイトル

    CSSでエントリータイトルに画像を表示する
    kelokelo
    kelokelo 2006/05/26
    メモ。
  • CSS+JavaScript によるカラムレイアウト切り替え

    公開テンプレート(Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ)でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。 とりあえず、どのような動作になるかをサンプルでお試しください(中央上部のプルダウンメニューで操作できます)。 以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。 今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。 その理由は、現在公開しているテンプレートでは1つのスタイルシートに 3カラ