日本語が使えるwebfontサービス

デコもじ

fonts.com

FONT+(フォントプラス)

サービス内容比較表

その他参考サイト

• WebFonts として利用できるフリーの和文フォント
• フォントブログ
• 商用サイトでも無料で利用できる日本語のフリーフォント集

日本でも、大手のフォント会社がwebfontのサービスしてくれたら一気に普及すること間違いなし！だと思う。なのでタイプバンクがデコもじ、fonts.com両方で提供してるのはちょっと感動しました。

実際「デコもじ」のトライアルアカウントでテストサイトに日本語を適用してみた所、覚悟していたほど遅延は感じられず。

さすがに１サイトで数書体を同時使用するとやっぱり重くなるので現実的ではないにしろ、１書体ぐらいなら何とかなるんじゃないかという感触。

【2011/8/2追記】

新しいサービスが増えた模様。今度はフォントワークスです。でも少し高い・・・・

• フォントワークス/イワタ/モトヤが使えるWebフォントサービス「フォントプラス」 – GIGAZINE.

【2011/9/29追記】

遂にモリサワも参入！2011年内にサービス開始予定だそうです。typesquare.jpのドメインをモリサワが既に取得済みでした〜。
月額1000円ぐらいで、フォントプラスみたいに年間縛りとかないといいのだが。。。きっとお高いのだろうなぁ。。。（涙）

• モリサワ　クラウドフォントサービス「TypeSquare（仮称）」を発表

今回は「Custom Field Template」「Custom Post type UI」という二つのプラグインを組み合わせていろいろやってみた。

Movable typeだと、確かバージョン４以降でカスタムフィールドを使った投稿画面が割と簡単にできるようだが、Wordpressでもそれをやってくれるプラグインを発見。

• Custom Field Template (WordPressのプラグインディレクトリ)
• プラグイン制作者のサイト

ただ、上記のプラグインだけだと、一般ページや投稿画面にカスタマイズしたフィールドが出てきてしまうため、できれば「アルバム」とかポストタイプを使って、専用の入力ページにしたいなぁ・・・と思ってちょっと検索したら出てきた。ポストタイプを簡単に設定できるプラグイン。ついでに同じプラグインでタクソノミーも簡単に設定できるので、アーティストをタクソノミーを使って管理してみることに。

• Custom Post type UI (WordPressのプラグインディレクトリ)
• プラグイン制作者のサイト

この二つを使って、連携させるのも簡単。

手順は以下の通り。

１）Custom Post type UIを使って「Catalog」というpost typeを作成。（「アルバム」でも良かったのだが、指定されたコンテンツ名に合わせた）
ここでの設定は

• 投稿タイプ名：catalog
• ラベル：Catalog
• Advanced Optionsのメニューの位置：7（環境によって番号変わるかも。デフォルトは空欄で、「コメント」の下に表示されるようになる。今回は「投稿」の次ぎに来るように設定）
• Advanced Optionsのサポート：Title, Editor, Featured Imageにチェック
• Advanced Label Optionsはお好みで設定。今回は新規追加のラベルを「新規アルバム」にしてみた。

２）同じくCustom Post type UIを使って「Artist」というタクソノミーを作成。

ここまでの設定で、メニューバーに「Catalog」が追加される。

３）Custom Field Templateを使って、以下を設定。

• カスタムポストタイプに「catalog（（１）で設定した値）」を入力
• 価格＞priceとしてテキストフィールド追加
• 品番＞product-numberとしてテキストフィールド追加
• 在庫＞soldoutとしてチェックボックス追加

４）これでまずは設定を保存。これでアルバム登録専用の投稿ページが出来てるはず。さっき作った「Catalog」カスタムポストタイプのメニューから「新規アルバム」をクリックすると下記のようになってます。

これでアルバム入力ページが出来た。

• タイトル：アルバム名
• 本文：アルバムの紹介文
• Artistタクソノミー：アーティスト名（既に登録したことのあるアーティストのアルバムを追加するにはここから選択すれば良い）
• price：価格を入れる
• product-number：品番を入れる
• soldout：チェックボックスにチェックが入ってる場合には「soldout」アイコンを表示する
• アイキャッチ画像：アルバムのジャケット写真を登録

という入力方法にして、保存する。

Catalog投稿一覧ページには、登録したアルバムがずらっと並ぶ。管理が楽〜♡

ただし、ここまでやってもテーマの方をいじってないので、どこにも表示されません。っつーことで、表示されるようにテーマファイルを修正する。

Custom Field Templateの設定で「Auto Hook of ‘the_content()’」というオプションがあり、ちょうど良いのでここで設定してしまうことにする。

• 位置：コンテンツの後
• 投稿タイプ：デフォルトのまま
• カスタムポストタイプ：catalog
• 「PHPを使用する」にチェックを入れる

以下のソースを入れる。

<?php
global $wp_query;
$thePostID = $wp_query->post->ID;
echo '<p>価格: ¥' . get_post_meta($thePostID , 'price', true) . '<br />';
echo '品番: ' . get_post_meta($thePostID , 'product-number', true) . '</p>';
if (get_post_meta($thePostID , 'soldout')) {
echo '<p>SOLD OUT</p>';
} ?> 

これで「価格」「品番」「SOLDOUT」アイコンが本文（テーマファイル上のthe_content()がおかれている部分）の後ろに挿入されるようになる。

後はアーカイブページや投稿ページを好きにカスタマイズすればOK。今回はアーカイブページだけが必要なので、デフォルトの「archive.php」を複製して「archive-catalog.php」として、好きなようにカスタマイズした。

テーマ開発用フレームワークいろいろ
http://www.smashingmagazine.com/2009/05/27/wordpress-theme-development-frameworks/

ループの使い方いろいろ
http://www.smashingmagazine.com/2009/06/10/10-useful-wordpress-loop-hacks/

フックの使い方いろいろ
http://www.smashingmagazine.com/2009/08/18/10-useful-wordpress-hook-hacks/

コーディングテクニックいろいろ
http://www.smashingmagazine.com/2009/10/20/10-useful-wordpress-hacks-for-advanced-themes/

上級テクニックいろいろ（管理画面、投稿画面のカスタマイズ等）
http://www.smashingmagazine.com/2009/12/14/advanced-power-tips-for-wordpress-template-developers-reloaded/

デベロッパーツールいろいろ
http://www.smashingmagazine.com/2008/09/15/wordpress-developers-toolbox/

便利なRSSトリック＆ハックいろいろ
http://www.smashingmagazine.com/2008/12/02/10-useful-rss-hacks-for-wordpress/

カスタムフィールドの拡張あれこれ
http://www.smashingmagazine.com/2010/04/29/extend-wordpress-with-custom-fields/

Widget便利な使い方
http://www.smashingmagazine.com/2009/07/14/5-useful-and-creative-ways-to-use-wordpress-widgets/

コメント＆ピンバック（トラックバック）カスタマイズいろいろ
http://www.smashingmagazine.com/2009/07/23/10-wordpress-comments-hacks/

Sight 1.0.1

Webマガジンやブログに最適とあるが、トップページに記事表示の切り替え機能がついていたり（スタンダードビュー、グリッドビュー）するので、展覧会やイベントが多いギャラリーなどでの使い勝手が良さそう。

特徴：

1. XHTML 1.1 検証済
2. jQueryの特集記事（トップページ）スライドショー
3. カスタムウィジェット
4. カスタムメニュー設置場所２種類
5. Google Analytics対応
6. カスタムロゴアップロード可能
7. Gravatar対応
8. 検索エンジン最適化
9. 対応ブラウザ：IE 7 , IE 8 , Firefox, Opera, Safari, Chrome
10. テーマオプションページで設定可能（カスタムロゴの設定、背景色の変更、トップページスライドショーのオン／オフ、ページネーションの設定、Google Analytics codeの設定）
11. ページ送り２種類（デフォルト＋WP Page-Naviと、「Load more」ボタンで読み込んでいくAJAX-fetching posts）
12. WordPress 3.0.1対応
13. 投稿記事のソーシャルブックマークボタン組込済（短縮URL対応）
14. jQueryドロップダウンメニュー
15. 入れ子コメント

• ライブデモ
• ダウンロード＆使い方（ページ下の方にダウンロードリンク有り）

Gallery – upThemes

WordPressのテーマ作成のフレームワークの一つThematicの子テーマ。（使用するにはThematicもインストールする必要有り）ショーケースや作品ギャラリーを作るのに良いという説明がついてる。

特徴：

1. ワイドスクリーン動画埋め込み（Simple Video Embedder）
2. WordPress2.7以降対応

• ライブデモ
• ダウンロード＆使い方（ページ左側にダウンロードボタン有り）

Portfolium 1.1

デザイナー、アーティスト、フォトグラファーなど、プロフェッショナルのポートフォリオサイトに良い、となってる。過去の展覧会情報が並ぶと、結構壮観かもしれない。

特徴：

1. XHTML Strict / CSS検証済
2. クリーン、見にマリスと、グリッドベースのレイアウト
3. WordPress 3.0以降に実装されたメニューシステム対応済
4. Portfolio用カスタムポストタイプ実装済み
5. 簡単に使える
6. 投稿記事にソーシャルブックマークボタン実装済み
7. jQuery イメージスライダー使用
8. 検索エンジン最適化
9. WordPressの投稿アイキャッチ画像対応済
10. サムネイル自動生成
11. きれいなタイポグラフィー
12. 対応ブラウザ：Internet Explorer 7+, Firefox, Opera, Safari, Chrome
13. Favicon対応

• ライブデモ
• ダウンロード＆使い方（ページ下の方にダウンロードリンク有り）

The Columnist

グリッドベースのWordPressテーマ。写真ポートフォリオ、旅行記、ニュースやブログなどに使うと良いとなっている。

特徴：

1. WordPressの投稿アイキャッチ画像対応済
2. ウィジェット対応
3. CSS3コラム構造
4. jQueryのアニメーションなど使用
5. ヘルベチカ使用
6. 画像用カスタムフィールド対応
7. カスタムmetaフィールド対応
8. 最新記事をフィーチャー
9. 各カテゴリの最新記事を自動でトップページに表示

• ライブデモ
• ダウンロード＆使い方

参照サイト

• 22 Free/Premium WordPress Gallery Themes
• A Collection of Photoblog and Gallery WordPress Themes
• Modern and Minimal Premium WP Themes. Clean, Simple, Beautiful Themes.

jQueryプラグイン（スライドショー）

Background-Image Transition Plugin

jQueryのプラグイン。フェードはきれいだが、フルスクリーンではない。

• デモページ
• 使い方参考ページ

Supersized!

フルスクリーンの背景スライドショー。

• デモページ（フェード有り：動作が少し重い）
• デモページ（フェードなし：軽い）

Smooth fullscreen background slideshow in jQuery

こちらもフルスクリーンの背景スライドショー。
ドットが背景の上に重なってるけど取れる。
クロスフェードじゃないが、上記「Supersized!」より動きがスムースできれい。

• デモページ

Advanced jQuery background image slideshow

フェードアウトして次が出るまでの間、bgcolorが表示されてる。
フルスクリーンではない。

• デモページ

Full Screen Background/Slideshow jQuery Plugin

クロスフェードだが、動きが少しグギグギする。

• デモページ

フルスクリーン背景

bgStretcher jquery plugin

フルスクリーンの背景。

• デモページ

Perfect Full Page Background Image

背景フルスクリーン＆（テキストなどの）コンテンツのみスクロールする。
スライドショーではない。CSS3で作る方法、CSSだけで作る方法（２種類）、jQueryを使った方法、などが紹介されている。

• デモページ

jQuery Backstretch

• デモページ（このページの背景に使われている）

Flashを使用したもの

Flash background with html content

Flashを使用して、指定したもの（画像、又はswfファイル）を読み込んで表示。（HTML内に記述するJavascriptにて指定できる）

テキストなどのコンテンツはHTMLで記述するため、Flashじゃないと何も表示されないとか、そういうことが回避できそうです。

• デモページ

Thumbnails Navigation Gallery with jQuery

Yet Another Photoblog

写真ブログを作るのに便利

• WPバージョン：2.5~2.9.2
• ファイルアップロード（WPのポスト機能すべて利用可能）
• 複数サイズサムネイル自動生成（テーマ上でサムネイル生成をコントロール）
• EXIFフィルター
• mo/poファイル対応

などなど

PhotoQ Photoblog Plugin

これもフォトブログを簡単に作る

• ファイルのアップロードのバッチ処理可能
• EXIFサポート
• ウォーターマーク
• カスタムのメタデータ設定
• サムネイル、他サイズの自動生成
• 多言語対応

など。ライブデモはこちら

NextGEN Gallery

超ポピュラープラグイン。イメージギャラリー／Flashのスライドショーオプションが使える

• カスタムテンプレートの追加
• Media RSS Feed
• アカウント毎のパーミッション設定
• Ajaxベースのサムネイルジェネレーター
• ギャラリー間の写真移動／コピー
• ソート可能なアルバム
• ZIPファイルでのファイルアップロード
• ウォーターマーク
• Ajaxイメージエフェクト（Shutter, Thickbox, Lightbox, Highslide）
• 複数のCSS：サムネイルに影がつく
• Flashスライドショー
• TinyMCE：入力フィールドの上に専用ボタン
• ウィジェット対応
• 多言語対応
• 翻訳ファイルダウンロード
• アップロードタブ連携
• EXIF, IPTC, XMPサポート
• 画像ソート
• Flashのアドオン使用可能

など。ライブデモはこちら

Photo Galleria

jQueryのイメージギャラリー「Galleria」のWPプラグイン。

ライブデモはこちら

その他、Galleriaを使った他のプラグインも数種類出ている。

コーディングに関して

• HTML 4.01 Transitional
• 文字コードはiso-2022-jp
• 基本はtableレイアウト
• inline CSS
• 画像などはフルパス（http://~）で記述
• センター寄せする場合にはtableの入れ子（<table align=”center”>）
• 横幅550~600px、ファーストビューに入る縦幅は300~500px以内にする

CSS対応状況

「Email Standards Project」を見ると、同じソースで各メーラーでどのように表示されるかのデモが見れる。

また、各メーラーのCSS対応状況については「Guide to CSS support in email clients」に、わかりやすい対応表が載っている。同じページで、さらに詳しいチャートのダウンロードができる。（PDF、エクセル形式）

メーラーのシェアについて

2009年の調査では以下の通り。4位以下は参照元サイト（リストの下）に載っているので、詳しく知りたい方はそちらをどうぞ。

1. Outlook 2000, 2003, Express – 27.77%
2. Hotmal – 16.23%
3. Yahoo! Mail – 14.14%

参照元：Email client popularity – Email Status & Reports: Campaign Monitor

その他、参考になりそうな記事

• Creating inspiring HTML email templates that work in the inbox
• 30 Free HTML email templates : Campaign Monitor
• Starter HTML email templates for your email marketing campaigns

差分データを表示してくれるアプリとか、いろいろ必要なものを一気にインストールしてくれるので入れます。
おそらく、本体のOSが入ってるDVDの中にインストーラが入っているか、見つからなければアップルのデベロッパーセンターから無料で入手可能。
（ダウンロードする場合は、デベロッパー登録が必要。ま、特別な条件もなしに普通に登録できる）

上記ページの右上あたりに「Mac Developer Program」という見出しがあり、青い文字で「Download now」ってリンクがあるから、そこからダウンロードする。結構容量があるので、DVDからインストールする方が楽かもしれないが。

で、デベロッパーツールをインストールしたら、まず、これをあれする（笑）

Subversionの設定などをしよう

ちょっと古い記事だけどAdobeのDreamweaverの記事を見ながらやれば、割と簡単におわるよ
Dreamweaver CS4でのSubversionの使用 – パート3: SubversionをサポートするためのApacheの設定

ここには、Subversionのレポジトリの設定、Apacheの設定、Dreamweaverの設定方法が載ってるから説明通りに作業すればちゃちゃっと完了。

CS5については、英語記事だけど「Using Subversion with Adobe Dreamweaver CS5 – Part 1: Introducing Subversion」をみてね。

Subversionについてのイントロダクションから読みたい場合は、「Dreamweaver CS4でのSubversionの使用 – パート１: Subversionの紹介」から順番に読むと良いよ！

http://www.mamp.info/

ま、ご存知の方も多いと思いますが。。。タイトルの通り、MacにMySQL、Apache、PHPを一気にインストールして使えるようにしてくれるソフト。Apacheの起動やPHPのバージョン切り替え等もアプリケーション上で出来て便利。インストールしたらすぐ使える〜

MAMPを起動して「環境設定」＞「Apache」タブを選択すると、Document Rootを任意に指定できるので、案件ごとにこの設定で切り替えてリブートすれば、ローカルの環境でいくつもサイト構築作業できる。便利。無料。（プロ版じゃない方を使おうね）

あ、ちなみにphpMyAdminも入るから、データベースの中身も簡単に操作できる。

これなら、WordPressとかでテーマ作ってるときにちょっと間違ってぶっ壊したりしても、Apache終了して、データベースも一回消すとか、変なPHPのソースとかも抹消してしまえば良いし壊したい放題（笑）

Windowsユーザーの方は同じ感じで使えるWAMPをどうぞ。

メニューがプラグインなしで作成できる機能や、タクソノミーが改良されたようで、じっくり研究したらレビューなり何なりアップ予定。

ところで、3.0で使えるかまだ試してないけど、コンテンツのスライドショーを作ってくれるプラグインを探しているので、ついでに覚え書き。（3.0で動くと良いな〜、ま、ここ何週間かの間に、大量に3.0対応のプラグインがリリースされるでしょうから、以下のプラグインもアップデートされると思うけど）

iSlidex

Appleのサイトっぽくしてくれるプラグイン。デモはこちら。

詳細：WordPress Plugin Directory: iSlidex

SlideDeck Dynamic Content Slider

上記のような横向きアコーディオンと、スライドショーのタイプが選べる。（下のイメージ／クリックで拡大）

オプションによって、表示する内容を

• 新しい記事から00件表示
• 特集（投稿画面でチェックをしたもの）を表示
• 人気記事を表示
• カテゴリでフィルタリング

などと設定可能。また、背景色が白いものも選択可能。サイズ変更可。CSSを編集すれば自分の好きになる模様。

Dynamic Content Gallery

• WordPress 2.8以降（3.0対応）
• JavaScript: mootools framework / jQuery
• Widget対応
• 投稿ページからカスタムフィールドで編集
• 自動でExcerpt生成＞スライドショーの説明文を表示
• マルチオプション、１カテゴリ、またはページからギャラリーを生成
• 15枚まで（１カテゴリの場合）、9枚まで（マルチオプション／ページ）
• カスタムフィールドに値がない場合には、デフォルト画像を表示
• 投稿／ページタイトル、自分で設定した説明文を表示できる
• イメージから外部URLにリンク可能

などなど。

詳細：WordPressのPlugin Directoryページ

WordPress Content Slide

イメージをフェードイン／アウトしてくれるプラグイン。フルカスタマイズ可能でjQuery inner Fadeエフェクトが使える。オプションでサイズ、色、スタイルなど設定可能。見た所かなりシンプルで、使い方によっては色々出来そう。。

• WordPress 2.7以降（2.8.9まで対応）
• JavaScript: jQuery
• カスタムフィールド『slideshow_img』に画像のフルパスを入力
• カスタムフィールド『slideshow_url』にリンク先URLを入力

して使うようです。

詳細：WordPress Plugin Directoryのページ

Front Slider

詳細：WordPress Plugin Directoryのページ

Meteor Slides

詳細：WordPress Plugin Directoryのページ

s3Slider

詳細：WordPress Plugin Directoryのページ

WP Navo Slider

詳細：WordPress Plugin Directoryのページ