afainu.action » Theme http://act.affai.com 写真とプログラミングにチャレンジ Sun, 25 Jul 2010 15:08:44 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 テーマを更新 http://act.affai.com/archives/20100718004344/ http://act.affai.com/archives/20100718004344/#comments Sat, 17 Jul 2010 15:43:44 +0000 afainu http://act.affai.com/?p=305 続きを読む »]]> WordPress を最新バージョンにアップグレードしたのを機に、自作のテーマもアップグレードしました。WordPress 本体は３週間前にアップグレード済みで、その前からテーマ改変に着手していたのですが、やっと実践投入できるようになりました。ローカル環境である程度はテスト済みですが、もし表示に不具合があるようでしたらお知らせくださると助かります。

WordPress 3.0 からの新デフォルトテーマ Twenty Ten を元にして作ってみました。これまでのものと比べてヘッダー画像がついたぐらいしか変わってないように見えるかもしれませんが、内部的にはかなりの変更を加えています。というか、以前と同じような見た目を保ちつつ、一から作り直しています。

メインマシンが Mac になりましたので、Mac 上の Safari での見え方を基準に作って Windows 上の Firefox と Internet Explorer でもチェックするという形で作成していった訳ですが、Mac に慣れてしまうと、Windows での表示がとても汚く見えますね。もう Windows には戻れないかも（仕事では使ってますけどね）。

]]> http://act.affai.com/archives/20100718004344/feed/ 0 Flash でブログのヘッダーを作る (4) http://act.affai.com/archives/20090228202451/ http://act.affai.com/archives/20090228202451/#comments Sat, 28 Feb 2009 11:24:51 +0000 afainu http://act.affai.com/?p=41 続きを読む »]]> 前回出来上がった Flash 製のブログヘッダーを HTML に埋め込みましょう。

その前に、パブリッシュする必要があります。Flash CS3 のファイルメニューからパブリッシュを選ぶと、fla ファイルが保存してあるのと同じフォルダに３つのファイルが作成されます。１つは swf ファイルで、これが Flash の本体です。後の２つは html ファイルと AC_RunActiveContent.js という JavaScript ファイルです。

まずはスタンダードなやり方を試してみます。パブリッシュされた swf ファイルと js ファイルを自分のブログを設置しているサーバーにアップロードします。WordPress なら使用しているテーマのフォルダでいいでしょう。html ファイルはアップロードする必要はありません。テーマでヘッダー部分が記述されているファイル（通常は header.php）をローカルにダウンロードして編集します。html ファイルをテキストエディタで開き、<head> 内で AC_RunActiveContent.jp を読み込んで初期化している部分：

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

をコピーし、head.php の同じく <head> 内にペーストします。さらに、<body> 内の以下の部分：

<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("このページでは \"AC_RunActiveContent.js\" が必要です。");
	} else {
		AC_FL_RunContent(

	【省略】

		); //end AC code
	}
</script>
<noscript>

	【省略】

</noscript>

をコピーし、header.php の Flash を表示させたい場所にペーストします。

編集した header.php をサーバーに上書きアップロードすれば完成・・・というのが解説書とかに書かれていいる通りの手順ですが、これではおそらく表示されないでしょう。js ファイルと swf ファイルのパスが正しくないからです。ファイル名を指定している部分をテーマのフォルダまでのフルパスで記述してやれば動くようになります。書き換える場所は js ファイルについて１か所（<head> 内）、swf ファイルについて４か所あります。WordPress で使うにはこのフルパスというのはテンプレートタグを使って <?php bloginfo('template_url'); ?>{swfファイル名} と表すことができます。なお、Flash CS3 が書き出す html は XHTML 1.0 では Valid ではありませんので、必要に応じて書き換えないといけません。

この方法を使う時は、既存のヘッダー部分は消してしまうか CSS で見えなくしてしまう必要があります。

私は別の方法を使ってこのブログのヘッダーを Flash 化しています。それは SWFObject という JavaScript を使う方法で、これもよく使われています。設置方法はリンク先の documentation ページに（英語で）詳しく解説されていますし、日本語訳へのリンクもあります。

SWFObject 2.0 には２通りの設置方法があり、ひとつは JavSscript がオフでも Flash が表示される、<object> タグを直接書く方法と、javascript でダイナミックに表示する（つまり javascript がオフだと表示されない）方法があります。私は、JavaScript をあえてオフにしている人は少数派であろうと仮定し、後者のダイナミックな方法を用いています。ソースが複雑になるのを避け、既存のヘッダー部分はそのまま残したかったということもあります。既存のヘッダーをそのまま残して SWFObject を用いて Flash を埋め込むには、例えば以下のようなソースにすればよいです（swfobject.js と swf ファイルはテーマフォルダにアップロードされているとします）。

<div id="header">
	<h1>ブログのタイトル</h1>
	<p>ブログの説明</p>
</div>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>swfobject.js"></script>
<script type="text/javascript">//<![CDATA[
	swfobject.embedSWF("<?php bloginfo('template_url'); ?>{swfファイル名}", "header", "{横幅}", "{高さ}", "9.0.0");
//]]></script>

これで javascript がオフならこれまでのヘッダーが、オンなら Flash のヘッダーが表示されるようになります。

４回にわたる Flash によるブログのヘッダーの作成過程の紹介はこれで終わりです。次は何を作るかまだ考え中ですが、公開できるようなものが出来たら、また作成過程も含めて紹介してみたいと思います。

]]> http://act.affai.com/archives/20090228202451/feed/ 0