afainu.action » Theme http://act.affai.com Enjoy Photography etc. Fri, 03 Feb 2012 13:20:13 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 テーマ更新とレスポンシブデザイン http://act.affai.com/archives/20111029124048/ http://act.affai.com/archives/20111029124048/#comments Sat, 29 Oct 2011 03:40:48 +0000 afainu http://act.affai.com/?p=549 続きを読む →]]> １年強ぶりにテーマを更新しました。WordPress 3.2 からのデフォルトテーマ、Twenty Eleven を参考に改変を加えてみました。

分かりやすい変更はヘッダー画像だと思います。これまでもランダムに（といっても２〜３種類だけですが）変わるようにしていましたが、サイドバーにも投稿画像のサムネイルをランダムにピックアップしていましたので、これらを統合しました。タイル状に並べた画像があまり多いとごちゃごちゃして嫌だったので、12枚までに抑えて、固定ページへのナビゲーションメニューを画像の右側に移しました。

フォントの大きさだとかコメントフォームだとか（Twenty Eleven のものそのまんま）ちょこちょこと変わってますが、もう一つの大きな変更は、Twenty Eleven のレスポンシブデザインを採用したことです。iPhone など表示領域の小さなデバイスで表示した際には見やすいようにレイアウトやサイズが変わります。上記ヘッダー画像の数もそれに応じて減るようになってます。

このレスポンシブデザインは手持ちの iPhone (4S, 3GS)、iPad (初代) で確認しながら作業していたのですが、どうしても思い通りに CSS が適用されずに苦労しました。その原因は Webkit のバグにあり、max-width の値を実際の値より 20px ほど大きく指定しなくてはなりませんでした。これからレスポンシブデザインを採用される方はご注意ください。

参考：レスポンシブ・ウェブデザインの Media Queries の設定と15px

]]> http://act.affai.com/archives/20111029124048/feed/ 0 ツイートボタン http://act.affai.com/archives/20100815165541/ http://act.affai.com/archives/20100815165541/#comments Sun, 15 Aug 2010 07:55:41 +0000 afainu http://act.affai.com/?p=318 続きを読む →]]> Twitter 公式のツイートボタンができたということで、早速このブログにも設置してみました。各投稿の最後にある青いボタンがそれです。該投稿について簡単に Twitter でつぶやくことができます。

同様な機能を提供するプラグインはたくさんあります。Twitter への通知に使っているプラグイン Simple Tweet でも可能です。正直そちらのほうが今は使い勝手も良いのですが、「公式」というのと今後への期待料込みで、公式のボタンを設置してみました。

設置方法は、Twitter のツイートボタンページにアクセスして、デザイン等を選択した後、表示されているコードをブログに貼付けるだけ。WordPress の場合、使用しているテーマの該当箇所に貼付けることになりますが、そのうちプラグインで簡単に設置できるようになるでしょう。

デフォルトではボタンが表示されているページの URL とタイトルがツイート内に含まれることになります。WordPress のシングルページに設置する場合にはそれで全く問題ありませんが、インデックスページやアーカイブページに設置したい場合には、上記ページで表示されるコードを各テンプレートファイルのループ内に記述しただけでは困ったことになります。表示される複数の投稿のツイートボタンは、どれを押しても表示されているページの URL とタイトルをツイート内に含むことになってしまいます。思い通りの動作（各投稿の URL とタイトルをツイートに含める）にするには、ループ内に記述するコードを例えば以下のようにしてやれば良いです。

<a href="http://twitter.com/share"
    data-url="<?php the_permalink(); ?>"
    data-text="<?php the_title(); ?>"
    data-count="horizontal"
    data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

トップページやアーカイブページでは投稿の全文ではなく抜粋を表示している場合、ツイートボタンを表示するのは個別ページだけで良いでしょう。しかし、このブログのように全文を表示している場合、読者は個別ページに行かずにトップページだけを読むことの方が多いと思われますから、こうした細工をしてみました。

もう一つ注意点があります。ボタンの横または上にツイート数のカウントを表示することができ、この吹き出しをクリックすると Twitter のリアルタイム検索の結果に飛ぶようになっています。カウントが 0 以外になっているのに、クリックすると表示されるページでは 0 件になっている場合があります（投稿日現在、このブログではすべてこうなります）。ツイート数を取得する際は短縮 URL でツイートされたものもカウントしているにも関わらず、リアルタイム検索では短縮 URL での投稿はヒットしないためだと考えられます。この辺は今後改善されることを期待します。

]]> http://act.affai.com/archives/20100815165541/feed/ 0 テーマを更新 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