タグ

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

  • Movable TypeやWordPressにFacebookのコメント欄を表示する

    Movable TypeやWordPressなどのブログにFacebookのコメント欄を表示するカスタマイズを紹介します。コメント欄の表示にはFacebookのソーシャルプラグイン「Comments」を利用します。 1.概要 イメージを下図に示します。 ブログ記事ページに表示したコメント欄からコメントを投稿すれば、即座にブログ記事ページに投稿コメントが反映されます(①)。投稿コメントはFacebookのウォールにも反映されます(②)。Facebookに表示されたブログ記事のコメントに返信すれば、返信がFacebookとブログ記事の両方に反映されます(③)。 2.動作例 実際の動作例を示します。 ブログ記事に次のようなコメント欄を表示することができます。 投稿コメントは次のように表示されます。「返信」をクリックして投稿すればコメントがインデント表示されます。 ブログ記事ページのコメントはFa

    Movable TypeやWordPressにFacebookのコメント欄を表示する
  • 小粋空間: Movable Type でメールマガジンを作る

    昨日の「Movable Type 4.2 でアドレス帳機能を利用する」の続きで、ブログ管理者が手動でアドレス帳にメールアドレスを登録するのではなく、ブログにアドレス登録用のフォームを掲載し、外部のユーザーが登録したメールアドレスをアドレス帳に登録する方法を紹介します。 この機能と「Movable Type 4.2 でアドレス帳機能を利用する」を組み合わせれば、Movable Typeを利用してメールマガジンのようなものを構築できそうです(タイトルはちょっと言い過ぎです)。 エントリーではメールアドレス登録までの流れを紹介します。この機能を利用するには、事前に次の作業を行ってください。 システムメニュー「全般」のメールアドレスを設定する アドレス帳機能を有効にする 1.メールアドレス登録フォームの作成 次のようなメールアドレス登録フォーム用のテンプレートモジュール(またはウィジェット)を作

    小粋空間: Movable Type でメールマガジンを作る
    julia28df
    julia28df 2008/06/24
  • 本文と追記を切り替える Web2.0

    文と追記の表示を切り替えるカスタマイズです。 ご要望を頂きましたので、まずは Movable Type の「追記文章の折りたたみ Web2.0」をアレンジしたものをご紹介します。 1.特徴 JavaScript エフェクトライブラリ script.aculo.us(スクリプタキュラス)を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示し、文を非表示にします。 JavaScript が無効の場合はブログ記事アーカイブジャンプします。 ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。 2.サンプル 文と追記を切り替えるサンプル 3.script.aculo.us のインストール script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。 次のページで「current

  • Movable Type に関する情報(MT4LP5 雑感)

    4月5日に開催された CSS nite MP4LP5 の雑感です。 また、Web屋さんに Movable Type の情報がなかなか行き渡っていない感じも同時に受けたので、ネットから Movable Type に関する情報の一覧も記しておきます。 1.MT4LP5 雑感 私は、A会場のセミナーを最後尾からずっと聴いてまして、満席の会場で受講されている方皆さんが真剣に講義を聴かれていたのがよく分かりました。 B面もそうだったらしいのですが、講義が終わった方から「(ウケを狙っても)反応がない」という感想があり、たしかにA面も講義中は静かでした。私はでだしでネタをひとつ考えていて、それは予想通りウケてもらえたので、後は比較的なごやかな雰囲気で進められたように思います。 それにしても、ほとんどの方がこのサイトを閲覧して下さっているようで、当にありがとうございます。 私自身、どの講義も大変有意義な

    Movable Type に関する情報(MT4LP5 雑感)
  • 小粋空間: Movable Type が WordPress に負けた本当の理由

    Movable Type と比較して WordPress が人気なのは、「再構築が不要」とか「インストールが簡単」とか「デザインが豊富」とか、国内ブロガーの評価を頼りにしていましたが、下記の記事の一文を読んで、米国で Moovable Type の人気が急激に落ち、WordPress にシェアを明け渡した当の理由を知りました。 Movable Type 4.0 ベータ、ローンチ―第3四半期にもオープンソース化へ MTユーザーとSixApartの間には波乱の歴史がある。Movable Typeは決してオープンソースプラットフォームではなかったのだが、MT 3.0のリリース以前は多くのユーザーがMTをオープンソースであるかのように扱っていた。2004年のMT 3.0のリリースと同時にライセンス契約が強制されるようになったことでユーザーコミュニティーからは激しい非難の声(私の声もかなり声高に混

    小粋空間: Movable Type が WordPress に負けた本当の理由
  • XHTML タグ一覧表示ツール

    下に表示されている XHTML タグをクリックすると、その下にある枠内に、 正しいマークアップ 使用可能な子要素(または親要素) 使用可能な属性 が表示されます。XHTML タグを記述する際、「このタグの書き方は?」「このタグの子要素(または親要素)には何が書けるの?」と思ったら使ってください。元データは Another HTML-lint のタグ一覧を利用しています。 クリック表示 マウスオーバー表示 属性表示 XHTML 1.0 Transitional [ 閉じる ] <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgr

  • 小粋空間: RSS フィードにスタイルシート(CSS)を適用する

    ブログで配信する RSS/Atom フィード(index.xml や atom.xml)にスタイルシートを適用する方法です。 ブログを始めてちょっと経った頃、このテクニックについての記事を見たことはあったのですが、特にエントリーしていませんでした。今回ご質問を頂きましたので、このエントリーで紹介致します。 1.概要 RSSリーダーが普及した現在、RSS/Atom フィードのリンクをクリックして驚く人は少なくなったのかもしれませんが、ブログ(Movable Type)を始めた頃、ページ右下に表示されている「Syndicate this site」の index.rdf のリンクをクリックすると XML フォーマットの文書が表示され(あるいはダウンロードのダイアログが表示され)、「これは一体何だろう?」と不思議に思ったものです(下)。 このリンクは RSSリーダ/アグリゲータ等が認識するための

    小粋空間: RSS フィードにスタイルシート(CSS)を適用する
  • 小粋空間: Highslide JS でサムネイル画像を拡大表示する

    サムネイル画像をクールに拡大表示する Highslide JS を利用する方法を紹介します。内容は Movable Type をサンプルにしていますが、他のブログ等でも応用できると思います。 WordPress ではプラグイン WPJ-Highslide 0.2 が利用できるみたいです。 とりあえず下記のサンプル画像をクリックしてください。拡大表示された画像の上でクリックすると元に戻ります。 拡大ツールでは、当サイトでも紹介している Lightbox JS が有名ですが、この Highslide JS は下記の特徴があります。 拡大画像の下にキャプション(タイトル)の挿入が可能 ウィンドウサイズに収まるように拡大(右下のアイコンをクリックすると 100% 表示) 拡大画像のドラッグが可能 以下、カスタマイズ方法です。ここではダウンロード時のバージョン 2.2.74.0.6 で話を進めます。

  • 小粋空間: 標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する

    以前エントリーした「CSSで画像に影をつける(ドロップシャドウ)」で、IEで画像枠が表示されない不具合についての対処方法です。 対処することで、スクリーンショットのようにIEでも画像枠が表示されるようになります。*1 元エントリーで記しているとおり、実験サイトではIEで画像枠(= padding プロパティ)がついていたのですが、エントリー時には画像枠がつかない状態になっていました。そのことについてあまり気にしていなかったのですが、先日この件に関するご質問を頂いて調べたところ、原因が判明しました。 おおざっぱな結論から申し上げますと、テンプレート1行目にあるXML宣言 <?xml version="1.0" encoding="utf-8"?> が画像枠の表示に影響しています。当サイトでは1行目にXML宣言を記述しているため、実験サイト(XML宣言なし)と異なる結果になっていました。 表示

  • 1