YouTubeの動画をブログに貼り付けるときに次のようなiframeタグを利用するのはご存知かと思います。 <iframe width="470" height="269" src="http://www.youtube.com/embed/YDxYmhze5Do" frameborder="0" allowfullscreen> </iframe> このiframeタグに隠しパラメータ（隠されている訳ではありませんが）をつけることで見栄えや動作を変更することができます。 以下の動画はパラメータを付与してみたものです。テーマおよびプログレスバーの色の変更して、セピアカラーの動画にマッチしたデザインにしています。再生後の関連動画の非表示や再生開始位置の変更なども行っています。 ということで以下、隠しパラメータの紹介です。すべてのパラメータは、次の設定例のように、src属性に設定したURLの末

すべてのFacebookページが2012年3月30日までに新しいデザインに切り替わります。 １．新しいデザインはどうなるか 基本的にはユーザーのタイムラインと同じデザインになるようです。下のスクリーンショットは当Facebookページ「小粋空間」の新旧デザインを比較したものです。 旧デザイン 新デザイン ２．新デザインのプレビュー 2012年3月1日現在の情報としては、Facebookページの管理者が閲覧している場合のみ、ページ上部に新デザインに切り替わるメッセージが表示されます。その右側にある「プレビュー」をクリックすれば新デザインのプレビューが可能です（旧デザインの戻し方は後述）。 プレビューを実行すると、管理しているFacebookページの新しいデザインを確認できます。 プレビュー画面の上部には、次のようなメッセージが表示されます。赤枠で括った「旧デザイン」のリンクをクリックすれば元

WordPressのカスタムメニューのカスタマイズ方法について解説します。 カスタムメニューを利用すれば、サイドメニューだけでなく、ナビゲーションを任意の場所に設置することもできるようになります。本エントリーでは、フッタに次のようなナビゲーションを追加してみます。 WordPressのバージョンは3.3.1を使っています。カスタマイズにはTwentyElevenテーマを使います。また、フッタナビゲーションはヘッダナビゲーションのスタイルをそのまま流用しているので、id属性値が重複しています。予めご了承ください。 管理画面上でカスタムメニューを利用する方法は割愛していますので、「WordPress カスタムメニューの使い方（その1：基本）」を参照してください。 １．wp_nav_menuを使ってカスタムメニューを表示する フッタにナビゲーションを表示するための準備として、footer.php

WordPressのカスタムメニューの使い方について解説します。 カスタムメニュー機能で作ったメニュー 今回はTwentyElevenテーマを使った、管理画面でのカスタムメニューの作成方法について解説します。functions.phpの設定が必要なカスタマイズなどについては別エントリーで紹介したいと思います。 WordPressのバージョンは3.3.1を使っています。 １．カスタムメニューとは カスタムメニューとは文字通り、独自のメニューをカスタマイズする機能です。 カスタムメニューを利用すれば、固定ページ・カテゴリー・投稿・タグのリンクやカスタムリンク（管理画面上で作ったリンク）などを表示させることができます。またそれぞれのリンクを1つのメニューに混在表示させることも可能です。メニューの順序や階層表示も自由にカスタマイズ可能です。 ２．メニューの作成 まず、ページに表示するカスタムメニュ

TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue

jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ

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

Facebookアプリを利用して、FacebookページにMovable TypeやWordPressのCMSを使って最近のブログ記事を表示する方法を紹介します。 以下はサンプルページです。最近のブログ記事5件の概要とブログ記事1o件のタイトルを表示しています。 サンプル 「FacebookページにブログのRSSフィードを表示する」ではRSSフィードを表示する方法を紹介しましたが、本エントリーの方法であればより自由なデザインでページをカスタマイズすることができます。 １．Facebookにブログ記事を表示する仕組み イメージを図に示します。 Facebookにブログ記事を表示するには、まず利用しているCMSでFacebookに表示したいページをテンプレート等を使ってhoge.htmlなどのファイル名で出力します（①）。 次に、Facebook側で出力したページを表示するためのFaceboo

Facebookページ（旧ファンページ）にブログのRSSフィードを表示する方法を紹介します。ここではRSS Graffitiというアプリケーションを利用します。Facebookページの作り方は「Facebookのファンページ作成～FBMLを使えるようにするまでの流れ」をご覧ください。 RSS Graffiti 余談ですが、小粋空間のFacebookページを作りました。まだ何もありませんが25人以上の方からの「いいね」をお待ちしています（画像下の「いいね」ボタンそれです）。 2011.02.28追記：25人超えました。ありがとうございました。 小粋空間のFacebookページ http://www.facebook.com/koikikukan １．Facebookページへのアプリケーション登録 「RSS Graffiti」のページ左にある「マイページへ追加」をクリック。 候補の一覧がでるの

Facebook（フェイスブック）でファンページを作成し、作成したファンページでFBML（FaceBook Markup Language）を使えるようにするまでの手順を紹介します。 FBMLはMTML（Movable Type Markup Language）、つまりMTのテンプレートタグと同じようなものです。ネットで検索して手順を調べたところ、一番最初のページがリニューアルされているようでした。ということで、紹介するのは2011年1月30日現在の情報です。 注：Facebookで「スタティックFBML」は利用できなくなりました。新しくページを追加する場合はiframeタブなどを利用してください。iframeタブの概要や設定方法は「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」をご覧ください。 蒲生さん率いる「Facebookファンペー

WordPress への記事投稿日の日付および時間の表示方法と、日付／時刻フォーマットを変更するカスタマイズをご紹介します。 このエントリーのきっかけは、当サイトで配布しているテーマに表示される記事投稿時間を24時間表記に変更する方法についてのご質問だったのですが、それだけでは何なので一通り調べてみました。 １．概要 テンプレートの記事投稿時間を表示したい位置に <p><?php the_time() ?></p> を設定すると、下のように時刻情報に変換されてページに表示されます。 <p>21:07:51<p> ２．テンプレートタグ 日付表示用テンプレートタグには次の2つがあります。 ２．１ the_time 記事の投稿時間を表示します。書式は次の通りです。 <?php the_time('format') ?> format には２項以降に示す「表示フォーマット」を設定します。 カッコ内

「WordPress における日付／時間の表示とフォーマット変更方法」でフォーマット文字の一覧を示しましたが、日本語版 WordPress では、月および曜日は日本語で表示されます。これを英語表記に変更する方法を紹介します。 １．変更対象のフォーマット文字 英語表記に変更するフォーマット文字は下記の4種類です。 出力される日付文字列の書式（抜粋） 単位フォーマット文字意味日本語表記英語表記 月Fフルスペル1月 - 12月January - December M3文字の省略形式1月 - 12月Jan - Dec 曜日D3文字の省略形式月 - 日Mon - Sun lフルスペル月曜日 - 日曜日Sunday - Saturday ２．変更方法 wp-includes/locale.php をダウンロードし、任意のエディタで開き、下記リストのように修正します（青色は修正した箇所）。修正が面倒な方

WordPress のコメントを分割表示する Paged Comments Plugin をご紹介します。このプラグインを用いることでスクリーンショットのようにコメントを分割表示することができます。 このプラグインはコメント以外に Guestbook のコメント分割も可能です（Guestbook での利用方法については別エントリーで紹介します）。 以下、カスタマイズ方法です。 １．プラグインのダウンロード Paged Comments Plugin の Download ? Latest Version の Version x.x (200x-xx-xx) のリンクをクリックします。 ２．プラグインのアップロード アーカイブを解凍し、paged-comments-config-sample.php を paged-comments-config.php にリネームします。 また、解凍したプ