しかし業務となると固定IPでないとNGな場合もあります。
サブ回線にまで固定IPを取得しているというケースはさすがに稀かも？
私はメインの光では取得していますが、サブのdocomoでは未取得。

まあ外出時に固定IP必須の業務発生なんてレアケースはほぼないし、そんな時はがんばって職場に戻ればいいと考えてましたが、そうもいかない状況が訪れそうなわけです…。

そこで、Macの「画面共有」を使って外部からリモートでMacを操作できるようにしてみましたので記録に残しておきます。

ここではあえて、WindowsからMacをリモート操作する方法について記述します。
（Mac→MacやWindows→Windowsならもっと簡単と思われます）

操作される側：Mac （snow leopard）
操作する側：Windows 7 – Real VNC
ルータ：XXX（Mac:有線 / Win:無線（無線Hubを介して））

※これは場合によってはセキュリティ上非常に危険な状態になる可能性があります。
全て自己責任でお願いします。わからない事を自分で調べる事ができない方にはオススメできません。

1. LAN構築にDHCPを使っている場合、固定にする。

ルータのDHCPの設定で開始IPを 192.168.1.4〜などとして、
Macのシステム環境設定＞ネットワーク＞有効な接続のIPv4の構成を手入力にして
IPアドレスを192.168.1.3などとする。

2. 画面共有をONに。

システム環境設定＞共有＞画面共有 を『入』にします。
［コンピュータ設定］をクリックし、「VNC使用者が画面を操作することを許可」にチェックし、パスワードを設定。（※PCの操作が可能になるパスなので要注意！）
これでMac側の操作は終了。

※この操作でファイアウォールの例外に画面共有が自動で登録されます。
※iAntiVirusのProtect my Macは ON のままで大丈夫でした。

3. WindowsにReal VNCを導入

Real VNCのダウンロードはここから
サーバは不要なのでビューワのみインストール。
起動後、サーバに 192.168.1.3（1. で設定したMacのローカルIP）と入力し、
オプションのカラーレベルを「フル」に変更（Macの画面共有はフル以外で接続できない）し［OK］。
2で設定したパスワードを入力すると、Macの画面が表示される。

これでローカルLAN環境での画面共有ができるようになりました。

次に、インターネット側からのアクセスを許可する設定について。
※固定IPを取得するか、ダイナミックDNSのようなサービスを利用する必要があります。

4. ルータの設定（VNC用）

静的IPマスカレードの設定

VNCアプリからの通信を自動でMacへ

プロトコル：TCP / ポート：5900 → 192.168.1.3

IPv4パケットフィルタリングの設定

VNCアプリからの受信を許可

種別：通過 / プロトコル：TCP / 宛先ポート：5900

以上で、VNC関連の設定は完了です。
MacのあるLAN環境の外部のネット環境に接続し（同じLAN環境ではエラーになります）、
Real VNCのサーバに固定グローバルIPを指定し、Macの画面共有に接続します。

5. Wake On Lan の導入

スリープ状態のMacを外出先からスリープ解除できるようにします。
ルータが非対応の場合できません。

WindowsにWake up On Lan Toolをインストール

リモートホスト名：My Mac （適当に）
ポート番号：7779（※1）（適当に他とかぶらない値で）
IPアドレス：固定グローバルIP
サブネットマスク：255.255.255.255
MACアドレス：MacのイーサネットのMACアドレス

静的IPマスカレードの設定

WOLアプリからの通信を自動でMacへ

プロトコル：UDP / ポート：7779（※1の値） → 192.168.1.3

IPv4パケットフィルタリングの設定

WOLアプリからの受信を許可

種別：通過 / プロトコル：UDP / 宛先ポート：7779

WAN→LAN中継設定（うちのルータではこれでWOLを実現）

中継機能：ON / UDPポート番号：7779（デフォルト）（上２つの値はこれに合わせた）

以上で、WOL関連の設定は完了です。
MacのあるLAN環境の外部のネット環境に接続し（同じLAN環境ではエラーになります）、
Wake up On Lan ToolでMacをWake up!します。

これで全ての準備が完了しました。

実際にdocomoのAPモードON！、 WindowsノートをAPモードに接続！
WOLでMacを叩き起こし、VNCで接続！！！
Macの広大なデスクトップをフルカラーで転送するため携帯回線では正直つらいですが、ともかく「できる」ようになりました。

※iPhone用のVNC / WOL アプリもあります。

※この記事に関する質問には応えられません。
この情報を元にいかなる損害が出ても当方は責任を持ちません。

※画面共有に限らずMacの「共有」関係は、必要最低限な機能のみを必要な時だけONにすることを推奨します。

※上で設定したルータの静的IPマスカレード、パケットフィルタリングは（以下略）

早速アップグレードしましたが（管理画面の自動更新からサクっと）今のところ全く問題ありません。
プラグインも同様にサクッと自動更新しましたが、不具合の発生しているものは無い模様。

大幅にカスタマイズしているショッピングカートプラグインWelcart がこけたら…が恐怖でしたが大丈夫でした。

マルチサイト化しているWordpressもアップグレードしましたが、これも無問題。

Ktai styleもだいじょうぶ☆

管理画面もだいぶ強化されてます。

この辺り↓の新機能が便利そう

これ、面倒なんですよね。テーブル使わずにコーディングするの。

display: table-cell

が使えればどんなに楽なことか。
Fack IE!!

Microsoftは 古いIEにはどぎつい警告が1時間に1回自動表示されるようにして欲しい。
（Wordpressの管理画面にIE6でアクセスすると出る真っ赤なアレみたいな）

さて本題。
複数カラムの高さを揃えるJSを使うのも久しぶりなので、もっと便利なJSがないか探してみました。

あったー。

jQuery Auto Height – 複数のカラムの高さを最大値にそろえるjQueryプラグイン | かたつむりくんのWWW.

いつもお世話になってます＞かたつむりくんwww。

このJSの便利なところはこれ。

セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる）

カラムブロックに余計なクラスを設定しなくてもOK！
膨大な数のカラム、複数パターンのデザインのブロックを3カラムごとに高さを揃えたい！なんて場合でもヘッダーに書くJSは1行でいけます。

例えばこんな感じで。

$(‘.boxtype-1,#special-wrap li’).autoHeight({column:3});

はい、困った時のショートコードー。
今回はYouTubeサムネイルリンク埋め込み版です。

サムネイル画像はytimg.comから取得。
サイズ処理はHTMLタグ側で無理やり、です。
CSSによってはうまく調整できないので style属性にでも書き換えましょう。

functions

function youtube($atts) {
extract(shortcode_atts(array(
"value" => '',
"width" => '480',
"height" => '360',
"title" => ''
), $atts));
return '<div class="ytthum"><a href="http://www.youtube.com/watch?v='.$value.'"><img src="http://i.ytimg.com/vi/'.$value.'/0.jpg" width="'.$width.'" height="'.$height.'" alt="'.$title.'" /></a><br />'.$title.'</div>';
}
add_shortcode("youtube", "youtube");

Shortcord

［youtube value="emAzdSUkkM8"］

Sample

参考にさせていただきました

WordPressで運営しているサイトでYoutubeを使う際に知っておくと得するっぽいTips

これだと、該当カテゴリに記事が無い場合は何も表示されず素っ気ない感じがします。

そこで、記事がない場合に「ごめんね」コピーを表示します。
ついでにタイトルクリックで一覧ページにジャンプの仕様を、一覧ボタン表示に変え、これも記事が無い場合は表示しないようにします。

その改良版コードがこれ。
大したカスタマイズじゃないですけど…メモメモ。

<?php $lastposts = get_posts('category=1&numberposts=5'); ?>
<div class="topnews">
<div?class="cat-title">
<h2><?php echo get_the_category_by_ID('1') ?></h2>
<?php if($lastposts): ?>
<a href="<?php echo get_category_link('1'); ?>"?class="bt-catidx">一覧はこちら</a>
<?php endif; ?>
</div>
<?php if($lastposts): ?>
<dl>
<?php foreach($lastposts as $post) : setup_postdata($post); ?>
<dt><?php the_time('Y/n/j'); ?></dt>
<dd><a href="<?php the_permalink(); ?>"><?php the_title_attribute(); ?></a></dd>
<?php endforeach; ?>
</dl>
<?php else : ?>
<p>ただいま準備中です。</p>
<?php endif; ?>
</div>

追記：カテゴリーIDの指定が・・・

上記例だとカテゴリーIDの指定が何度も必要で面倒ミスの元になりそう！
エクスポート→インポートでIDが変わったりすることもあるし。
というわけで、カテゴリースラッグからIDを取得してゴニョることにしました。

<?php $lastposts = get_posts('category=1&numberposts=5'); ?>
<div>
<div?class="cat-title">
<h2><?php echo get_the_category_by_ID('1') ?></h2>
<?php if($lastposts): ?>
<a href="<?php echo get_category_link('1'); ?>"?class="bt-catidx">一覧はこちら</a>

これを

<?php $term_id = get_category_by_slug('xxxxx')->term_id;
$lastposts = get_posts('category='.$term_id.'&numberposts=5'); ?>
<div>
<div?class="cat-title">
<h2><?php echo get_the_category_by_ID($term_id) ?></h2>
<?php if($lastposts): ?>
<a href="<?php echo get_category_link($term_id); ?>"?class="bt-catidx">一覧はこちら</a>

こう。

1. 固定ページでは全ページのタイトルを画像に。
2. 投稿系では一覧・詳細共に共通でカテゴリー名をタイトル画像に。
   （記事が属するカテゴリは一つだけとする）

これを実現するためには、タイトル要素をCSSで指定できるようにすればいい。
Wordpressは body のクラスに自動でページIDや投稿IDをつけてくれているのですが、これをフックにする場合、以下の問題が・・・

• ページや投稿記事を作成するまでIDが何になるかわからない
• 投稿記事のbodyには属するカテゴリについての情報を出力しない

そこで、タイトル要素の親要素のクラスに

1. 固定ページでは、ページスラッグ
2. 投稿記事一覧・詳細では、カテゴリースラッグ

を出力するようにカスタマイズします。

1. ページスラッグの出力カスタマイズ例（page.php）

<div id="content" class="pgslug-<?php echo get_page_uri($post->ID);?>" role="main">

第3階層以下は全て第2階層のタイトル画像を使用する （2011/11/01追記）

• 商品紹介
  • 商品その1
  • 商品その2
    • 商品その2のバリエーションその1
    • 商品その2のバリエーションその2
  • ・・・

というような階層構造をWordpressで作成している場合、タイトル画像は商品紹介以下全ページで「商品画像」としたい、という場合が多いかと。
そんな場合はこれで。

<?php
$top_post = get_post($post->ID);
while ($top_post->post_parent) { $top_post = get_post($top_post->post_parent); }
$top_slug = get_page_uri($top_post->ID);
?>
<div id="content" class="pgslug-<?php echo $top_slug;?>" role="main">

2. カテゴリースラッグの出力カスタマイズ例（single.php, category.php）

<?php
$cat = get_the_category();
$catslug = $cat[0]->category_nicename;
?>
<div id="content" class="pgslug-<?php echo $catslug; ?>" role="main">

その他のコンテンツでは…

アーカイブや検索系では body に対応するクラスが付いているので、それをフックにします。

• アーカイブ：archive
• タグ：tag
• 検索系共通：search
  • 検索結果一覧：search-results
  • 検索で見つからない：search-no-results
• Not found：error404

あとはこれら全てのクラスに対して

.pgslug-xxxx #page-title {
width: 100%;
height: 35px;
overflow: hidden;
text-indent: -999em;
background: url(画像のパス) no-repeat;
}

のように背景画像を設定すればいいかと。

できればプレーンテキストでハマるデザインで提案しておきたいところですが…どうしてもって場合もあるので、備えあれば憂いなし。

font-resizer

テンプレート埋め込みタグ

<?php if(function_exists('fontResizer_place')) { fontResizer_place(); } ?>

出力タグ

<li class="fontResizer" style="text-align: center; font-weight: bold;">
<a style="font-size: 0.7em;" title="Decrease font size">A</a>
<a title="Reset font size">A</a>
<a style="font-size: 1.2em;" title="Increase font size">A</a>
<input id="fontResizer_value" type="hidden" value="ownid" />
<input id="fontResizer_ownid" type="hidden" value="content" />
<input id="fontResizer_ownelement" type="hidden" value="" />
<input id="fontResizer_resizeSteps" type="hidden" value="1.6" />
<input id="fontResizer_cookieTime" type="hidden" value="31" />
</li>

クラス付けしてくれているのでデザインはCSSでどうとでもなります。

汎用的に使えるかもしれないサンプルはこちら

テンプレート

<div id="font_select">
<ul>
<li id="fselectTtl">文字サイズ：</li>
<?php if(function_exists('fontResizer_place')) { fontResizer_place(); } ?>
</ul>
</div>

CSS

/* font-resizer */
#font_select {
letter-spacing: -0.31em;
*letter-spacing: normal;
word-spacing: -0.43em;
text-align:right;
padding-right:0.5em;
line-height:20px;
}
#font_select ul {
list-style: none outside none;
margin:0 0 1em 0;
padding:0;
}
#font_select ul li,
#font_select ul li a {
display: inline-block;
zoom: 1; *display: inline;
vertical-align: middle;
white-space:nowrap;
}
#font_select ul li#fselectTtl {
letter-spacing: normal;
word-spacing: normal;
width:auto;
}
#font_select ul li.fontResizer {
}
.fontResizer a {
letter-spacing: normal;
word-spacing: normal;
width:20px;
hright:20px;
margin-right:2px;
}
.fontResizer a:hover {}
a.fontResizer_minus {}
a.fontResizer_reset {}
a.fontResizer_add {}

フロートはあまり好きじゃないので inline-block。
リサイズボタンにマイナスインデント＋背景画像で。
そういえばマイナスインデントでリンクテキストをhiddenするテクニックがSEO的にマイナスっていう都市伝説はホントのところどうなんでしょうね？
どなたか知ってたら教えてくださーい。

追記：
JS組込みの手間を惜しまないのであれば、より汎用的でHTMLの制限のないこちらの方がいいかも。（未検証）

Simple jQuery Text Resizer

LeaveNoticeを参考に、いろいろカスタマイズしています。

• 外部リンクは新ウィンドウ（タブ）で開く
• 同じウィンドウで開くか新ウィンドウで開くか選択できる
• URLは常に表示する
• title属性はある場合だけURL上に表示
• 「この画面を次回移行表示しない」チェックボックスを追加
  （検証用：チェックを解除）

rel=”external” or target=”_blank” or class=”outlink” 属性のあるリンク：
自動で確認画面＋新しいタブ＋クラス「outlink」付与

Yahoo!JAPAN

twitter

Google（タイトル属性無し）

長いURLの省略表示サンプル

※rel=”external” または target=”_blank”と、ヘッダ内に記述する個別フラグ（下記）を同時に設定するのはNG。

個別設定→クラス「time5」のリンク：
自サイト名「サンプルサイト」、5秒後に自動遷移

MSN Japan（5秒後に自動遷移）

jQuery(function(){
jQuery('a.time5').leaveNotice({
siteName:"サンプルサイト",
timeOut:5000 });
});

個別設定→クラス「custom」のリンク：その他オプション

参考：LeaveNotice

jQuery('a.custom').leaveNotice({
siteName:"Labrid WP",
exitMessage:"<h3>Say goodbye to {SITENAME}!</h3><p>Thanks. Shut the door behind you!</p>",
preLinkMessage:"<hr/><p>Have fun at:<br/><strong>{URL}</strong></p><hr/>",
overlayId:"custom-blackout",
messageBoxId:"custom-messageBox",
messageHolderId:"custom-messageHolder",
overlayAlpha:0.6
});

※IE6：×

※IE6での表示に対応しました。

jStyler

cookieにも対応。
文字サイズ変更等に最適！

functions.php に以下を追加して

function my_form_tag_filter($tag){
if ( ! is_array( $tag ) )
return $tag;
if(isset($_GET['goods'])){
$name = $tag['name'];
if($name == 'your-goods') $tag['values'] = (array) $_GET['goods'];
}
return $tag;
} add_filter('wpcf7_form_tag', 'my_form_tag_filter', 11);

Contact Form 7 で例えば

<p>商品名<br /> [text your-goods] </p>

のような商品名欄を作成し、ボタンのリンク先を

http://example.com/contact?goods=商品1

みたいにすると、ソノような動きをします。

Contact Form 7′s FAQ

wp_list_pagesをページ内に埋め込みたいという要望はかなり多いはず。

ただそのたびに個別テンプレートを用意したり、条件分岐を設定するのも面倒。
気づいたらloop_page.phpがグチャグチャに…なんてことにも。

このプラグインを入れると、以下のショートコードが使えるようになるらしいです。
これから検証するのですが、ショートコードを忘れないようにメモメモφ(｀д´)

• [pagelist]　基本。wp_list_pages(‘title_li=’)
• [subpages]　現在の子ページ。[pagelist child_of="current"]でも可。
• [siblings]　共通の親を持つ子ページ。[pagelist child_of="parent"]でも可。
• depth ? means how many levels in the hierarchy of pages are to be included in the list, by default depth is unlimited (depth=0), but you can specify it like this: [pagelist depth="3"];
• if you want to show flat list of pages (not hierarchical tree) you can use this shortcode: [pagelist depth="-1"];
• if you want to show subpages of the specific page you can use this shortcode: [pagelist child_of="4"] where 4 is the ID of the specific page;
• if you want to exclude some pages from the list you can use this shortcode: [pagelist exclude="6,7,8"] where exclude parameter accepts comma-separated list of Page IDs;
• if you want to exclude the tree of pages from the list you can use this shortcode: [pagelist exclude_tree="7,10"] where exclude_tree parameter accepts comma-separated list of Page IDs (all this pages and their subpages will be excluded);
• if you want to include certain pages into the list of pages you can use this shortcode: [pagelist include="6,7,8"] where include parameter accepts comma-separated list of Page IDs;
• if you want to specify the title of the list of pages you can use this shortcode: [pagelist title_li="<h2>List of pages</h2>"]; by default there is no title (title_li=””);
• if you want to specify the number of pages to be included into list of pages you can use this shortcode: [pagelist number="10"]; by default the number is unlimited (number=””);
• if you want to pass over (or displace) some pages you can use this shortcode: [pagelist offset="5"]; by default there is no offset (offset=””);
• if you want to include the pages that have this Custom Field Key you can use this shortcode: [pagelist meta_key="metakey" meta_value="metaval"];
• if you want to show the date of the page you can use this shortcode: [pagelist show_date="created"]; you can use this values for show_date parameter: created, modified, updated;
• if you want to specify the column by what to sort you can use this shortcode: [pagelist sort_column="menu_order"]; by default order columns are menu_order and post_title (sort_column=”menu_order, post_title”); you can use this values for sort_column parameter: post_title, menu_order, post_date (sort by creation time), post_modified (sort by last modified time), ID, post_author (sort by the page author’s numeric ID), post_name (sort by page slug);
• if you want to change the sort order of the list of pages (either ascending or descending) you can use this shortcode: [pagelist sort_order="desc"]; by default sort_order is asc (sort_order=”asc”); you can use this values for sort_order parameter: asc, desc;
• if you want to specify the text or html that precedes the link text inside the link tag you can use this shortcode: [pagelist link_before="<span>"]; you may specify html tags only in the HTML tab in your Rich-text editor;
• if you want to specify the text or html that follows the link text inside the link tag you can use this shortcode: [pagelist link_after="</span>"]; you may specify html tags only in the HTML tab in your Rich-text editor;

それも面倒、というか忘れそうなので、テンプレートに対策を直接記述する
以下のバグ対策を施すことにしました。

例えば

wp_list_pages(‘exclude_tree=29,32,36,39&sort_column=menu_order&depth=2&title_li=’ );

という記述は、

$parent_pages_to_exclude = array(29,32,36,39);
foreach($parent_pages_to_exclude as $parent_page_to_exclude) {
if ($page_exclusions) { $page_exclusions .= ‘,’ . $parent_page_to_exclude; }
else { $page_exclusions = $parent_page_to_exclude; }
$descendants = get_pages(‘child_of=’ . $parent_page_to_exclude);
foreach($descendants as $descendant) {
$page_exclusions .= ‘,’ . $descendant->ID;
}
}
wp_list_pages(‘title_li=&sort_column=menu_order&depth=2&exclude=’ . $page_exclusions);

で想定通りの動作をさせられます。

参考：http://wordpress.org/support/topic/excluding-multiple-pages-with-exclude_tree

IE6非対応なのでそれだけ注意。

ノーマルな使い方は上記配布サイトの説明通りにすればOK。

サムネイル方式にするのに少しハマったのでメモ。

サムネイル画像は名前を『元ファイル名_thumb.jpg』として同ディレクトリに配置。

配布のJS/CSSはいじらずそのまま使う。

Header

<script src=”js/jquery.nivo.slider.pack.js” type=”text/javascript”><!–mce:0–></script>
<script type=”text/javascript”><!–mce:1–></script>

BODY

<div id=”slider”>
<img src=”images/pic_01.jpg” />
<img src=”images/pic_02.jpg” />
<img src=”images/pic_03.jpg” />
<img src=”images/pic_04.jpg” />
</div>

CSS （Demoから引用）

#slider {
    position:relative;
    width:600px; /* Change this to your images width */
    height:450px; /* Change this to your images height */
    background: url(images/loader.gif) no-repeat 50% 50%;
		margin-top:30px;
		margin-bottom:160px;
		margin-left:70px;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

#slider .nivo-controlNav {
	position:absolute;
	bottom:-70px;
}
#slider .nivo-controlNav a {
	display:inline !important; /* Unhide the thumbnails */
}
#slider .nivo-controlNav img {
	display:inline !important; /* Unhide the thumbnails */
	margin-right:10px;
}

.nivoSlider {
	-moz-box-shadow:0px 0px 5px #333;
	-webkit-box-shadow:0px 0px 5px #333;
	box-shadow:0px 0px 5px #333;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.nivoSlider a {
	border:0;
	display:block;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

#slider {
	margin-bottom:110px;
}
#slider .nivo-controlNav {
	position:absolute;
	bottom:-70px;
}
#slider .nivo-controlNav a {
    display:inline;
}
#slider .nivo-controlNav img {
	display:inline;
	position:relative;
	margin-right:10px;
	-moz-box-shadow:0px 0px 5px #333;
	-webkit-box-shadow:0px 0px 5px #333;
	box-shadow:0px 0px 5px #333;
}
#slider .nivo-controlNav a.active img {
    border:1px solid #000;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}

.pointer {
	cursor:pointer;
}

/* Sharper Thumbnails */
img {
	-ms-interpolation-mode:bicubic;
}

WordPress 3.0〜 の新しい機能としてカスタムヘッダーという機能がある。
これは以下のような機能をもったもの。

• 管理画面で全ページ共通で表示されるヘッダーイメージを選択できる
• 固定ページ、投稿ページごとに投稿画面からヘッダーイメージをアップできる

しかし、これではカテゴリー一覧や検索関連では個別設定できないので、この機能を使って「タイトル画像」を各ページにセットする、という使い方はできない。

そこで、一つのテンプレートファイル（header.php）をカスタマイズして、以下のような仕様のヘッダーイメージを全ページに設定する方法を考えてみた。

• トップページには大きめのメインビジュアル画像
• カテゴリー一覧・個別投稿ページではカテゴリータイトル画像
• 固定ページには個別のタイトル画像

条件分岐は、いつもの if 文で。

トップページにメインビジュアル画像

普通に固定で。

<img src=”<?php bloginfo( ‘template_url’ ); ?>/images/main.jpg” alt=”" />

もしくはカスタムヘッダーを使う。（管理画面から差替え可能）

<img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”" />

カテゴリー一覧・個別投稿ページではカテゴリータイトル画像

カテゴリースラッグを抜き出して画像ファイル名を
｛カテゴリースラッグ｝_ttl.jpg
としてテンプレートの画像ディレクトリに用意。
これを以下のように読み出す。

<?php $cat = get_the_category(); $cat = $cat[0]; {
echo ‘<img src=”‘ . get_bloginfo(“template_url”) . ‘/images/’ . $cat->category_nicename . ‘_ttl.jpg” alt=”‘ . $cat->cat_name . ‘” />’;
} ?>

固定ページには個別のタイトル画像

カスタムフィールドを使い 「ttl」のような key に セットした値を使って
｛カスタムフィールド：ttlの値｝_ttl.jpg
という名前の画像ファイルをテンプレートの画像ディレクトリに用意。
これを以下のように読み出す。

<img src=”<?php bloginfo( ‘template_url’ ); ?>/images/<?php echo get_post_meta($post->ID,’ttl’,true); ?>_ttl.jpg” alt=”<?php the_title(); ?>” />

全ページ・全カテゴリ分のテンプレートファイルを個別に用意するのに比べればかなり楽にタイトル画像を実現できたかと思います

Movable Type コンテスト2010　受賞サイト一覧

コンテスト２０１０の受賞サイトをさらっと眺めてみましたが、さすがに上位サイトはどれもおもしろい！

テンプレートとシステムと機能が、アイデアに基づいた必然さをもってバランスよく組み上げられているのを見ると、気持ちが良いですねえ。ハイ。

私もいろいろやってみたい気持ちがフツフツと沸いてきましたよ。フツフツ・・・