© no new folk studio®

© no new folk studio®

© no new folk studio®

Blubrry PowerPress Podcasting plugin – Changelog

• PowerPress3.0はWordPress3.0以降のバージョンが必要になります。
• Meta Marksという機能が追加されました。
• メディアの長さ検出・検証機能はこれまでのmp3に加えて、AAC・m4aオーディオとH.264・mp4/ m4vビデオがサポートされるようになりました。長さ検出にはPHP5.0.5以降が必要です。
• PodcastのEntry Boxに新しいオプション「Disable Warnings（警告を無効にする）」を追加しました。エラーは表示されます。
• Media verification（Verifyボタン）はmp3がモノラルの場合の警告を表示しなくなりました。
• Media verification（Verifyボタン）はメディアURLのコンテンツタイプが有効かどうかを長さ検出時に検証します。
• Media verification（Verifyボタン）はエラー時にメディアへのリンクを表示するので、ユーザーが直接アクセスして手動でテストすることができます。
• Media verification（Verifyボタン）はURLが404エラーの時にこれまでより読みやすいメッセージを表示します。
• 新しく追加されたFeed DiscoveryオプションはサイトのヘッダにFeed Discoveryのリンクを追加し、ブラウザやフィードリーダーでPodcastのフィードを自動検出できるようにします。
• iTunesの「Update iTunes listing」を削除しました。Appleが2011年2月にオフラインにしたpingを復活させる意思が無いのが明らかなためです。
• 少なくとも1つのPodcastエピソードを作成するまではPodcastフィードが無効であるということの警告を追加しました。
• 埋め込みメディアが入力された時、URLが存在しない場合は警告が表示されるようになります。
• WordPress2.9以降は必要がなくなった、サードパーティのJSONライブラリを削除しました。
• Podcast Channelsはカスタム投稿タイプ”post”と関連付けられます。
• HTML5の音声・ビデオ再生アイコンをアップロード／変更するオプションが追加されました。ビデオの再生アイコンのサイズは60×60ピクセルである必要があります。音声再生アイコンにはサイズの制限はありません。
• WordPressの「設定」にPowerPressの設定へのリンクを追加しました。これは、PowerPressの設定メニューが見つけられないという、新しいユーザーたちから受け取った不満を解決するものです。
• ID3タグの書き込み機能が正常に機能していないというバグを修正。
• ビデオを再生する際にFlow Player Classicがフルスクリーン再生ボタンを表示するようになりました。
• ルーマニア語翻訳・イタリア語翻訳がv2.0.4+から追加されました。
• WP_DEBUGモード時にPHP通知メッセージを表示する数を修正しました。

以上です。
WordPress3.0以降のみに対応・Media verificationで長さの検出に対応する拡張子が増えた・設定メニューの位置が移動、などが気になる変更点といったところでしょうか。

菊川＆浜辺のキクラジオでもPowerPress3.0にアップデートしてみました。
今のところ、問題なく利用できているようです。

© no new folk studio®

Projects

• 菊川＆浜辺のキクラジオ［パーソナリティ］
• 武蔵野コード研究会［ベース］
• 時にはムーブメンツ［作詞・作曲・ヴォーカル・ギター］
• すあだ［音楽担当］

© no new folk studio®

菊川＆浜辺のキクラジオ

キクラジオのサイトにはWordPressを利用しています。
各投稿のタイトルをよく見てもらうと、２種類あるということに気付くかと思います。

キクラジオ第13回収録しました！ | 菊川＆浜辺のキクラジオ

キクラジオ第12回 | 菊川＆浜辺のキクラジオ

上の「第13回」のほうが文字、下の「第12回」のほうが画像となっています。
上の投稿はお知らせの投稿、下の投稿はPodcastのエピソードになっている投稿です。

この切り替えがどのような仕組みでできているのかを（復習も兼ねて）解説したいと思います。

文字と画像のスイッチ方法

それではまず、どのようにして投稿タイトルへの文字と画像の使用を切り替えているのかを説明します。

「タイトルが文字になっている投稿」と「タイトルが画像になっている投稿」とでは、２種類のカテゴリーを切り替えています。
（ここでは文字がタイトルになっている投稿のカテゴリーを「text」、画像になっている投稿のカテゴリーを「image」とします）

文字がタイトルになる場合

まずタイトルが文字の場合、つまりカテゴリーが「text」の場合です。こちらは通常のセオリー通りです。
「text」カテゴリーの場合に適用されるタイトル部分を編集します。（category-text.phpなど）

タイトル部分は

<h3>
	<?php the_title(); ?>
</h3>

となっています。h3要素の中に投稿タイトルが入っている、普通の投稿タイトルですね。

画像がタイトルになる場合

次に画像がタイトルになっている場合、つまりカテゴリーが「image」の場合です。
「image」カテゴリーの場合に適用されるタイトル部分を編集します。（category-image.phpなど）

タイトル部分は

<h3 style="background-position: 0 -<?php echo post_custom('bg'); ?>px">
	<span style="display:none">
		<?php the_title(); ?>
	</span>
</h3>

となっています。h3要素の中に投稿タイトルが入っていますが、

	<span style="display:none">
		〜
	</span>

によって見えなくなっています。これはSEO対策のために、投稿のタイトルを文字列としてhtmlソースの中に残しておくためです。
画像はh3要素の背景として表示しているのですが、「background-position」にちょっとした工夫があります。

background-positionを投稿によって変える

h3要素の背景に設定してある画像は以下のようなものです。

とりあえず第20回目分までをまとめた透過PNG画像です。
（色が薄いのはロールオーバー用です）（が、使ってません…）
更新のたびに画像を作成するのは手間なのでこのような形にしました。
これを背景画像として指定し、h3に１行分のheightを指定した上でbackground-positionに数値を指定し、１行分だけのタイトルを表示させています。

background-positionにテーマ上で数値を入れてしまうと、どの投稿にも全て同じ部分しか表示されなくなってしまいます。そのためbackground-positionに適用される数値を投稿ごとに変えられるようにする必要がありました。

今回はそれをWordPressの投稿に持たせられる「カスタムフィールド」というメタデータを使って解決しました。
投稿に「bg」という名前のカスタムフィールドを付加して、値に指定した数値分だけ背景の位置を移動しているのです。これが

style="background-position: 0 -<?php echo post_custom('bg'); ?>px"

の部分です。（ここではマイナスをつけてY軸マイナス方向に移動させています）。

<?php echo post_custom('bg'); ?>

というのがカスタムフィールド（ここでは名前「bg」）に設定した値を取り出している部分です。

例えば、

の場合は、カスタムフィールドのName「bg」に値「660」を入力して、さっきの縦にながーい画像の縦位置を「-660px」移動しているのです。

このように、文字のタイトルと画像のタイトルをカテゴリーによって切り替え、更新情報やお知らせなどに毎回タイトル画像を用意する手間を省いているのですね。

「連番などが入っていて今後の投稿のタイトルはだいたい決まっている。基本的には投稿タイトルは画像でいきたい。でもたまに、それ以外の投稿がある可能性もある。」
とかいった場合に使えるテクニックかなと思います。

お分かりいただけたでしょうか？

あと、僕も喋ったりしている「菊川＆浜辺のキクラジオ」、是非iTunesに登録してみてください。インディーズ音源も募集しています！
キクラジオをiTunesに登録！

© no new folk studio®

WAGOM.TV

WAGOM.TVにはtumblrを利用しているのですが、普通のtumblrのページとはちょっと違うので「？」となった方がいるかもしれません。

普通のtumblrページのインデックスは、こんな風に投稿の一覧が表示されます。

FFOODD

ですが、WAGOM.TVのトップページは固定された画面となっています。

web上では日本語では簡単に解説している情報が見当たらなかったので、これがどのようなしくみで実現できているのかを解説したいと思います。

tumblrのテーマをカスタマイズする

tumblrのカスタマイズにあたってはwordpressでいう<?php 〜 ?>にあたる部分が簡単に記述できるようになっています。これでサイトの情報を取り出したり、条件分岐を簡単に記述することができます。
例えば、tumblrのタイトルを記述するときには{Title}と書くだけです。

記述例

<html>
	<head>
		<title>{Title}</title>
	</head>
	<body>
	...
	</body>
</html>

簡単ですね。

このカスタマイズ用タグ一覧はtumblrのヘルプから参照できます。
カスタムHTMLテーマの作成 | Tumblr
Creating a custom HTML theme | Tumblr （英語版のページ。こちらのほうが最新の情報です）

この中の「ベーシックなVariable」の中に「個別記事を表示する。(コメントのウィジェットを埋め込むのに便利)」「インデックス（投稿）ページを表示する。」といった項目があります。
これはそれぞれ個別記事ページやインデックスで表示される項目をこの中に記述する、という条件分岐タグです。普通はここにコンテンツのタグを書くのに使います。

ここでは、これをちょっとイレギュラーな使い方をして固定のインデックスをつくります。

ナビゲーション部分

「news」や「film」といったページはそれぞれタグページになっています。
投稿に「#news」というタグをつけ、

<a href="/tagged/news/">

としてタグページへのリンクを貼ります。
これでナビゲーションとしています。

コンテンツ部分

ここが肝です。
head、ナビゲーションのあとに

{block:Permalink}<!--{/block:Permalink}
{block:TagPage}<!--{/block:TagPage}

	ここにインデックスページで表示される内容

{block:TagPage}-->{/block:TagPage}
{block:Permalink}-->{/block:Permalink}

{block:Permalink}<!--{/block:Permalink}
{block:TagPage}<!--{/block:TagPage}

<div style="display:none">

	{block:TagPage}-->{/block:TagPage}
	{block:Permalink}-->{/block:Permalink}

		ここにタグページで表示される内容

	{block:Permalink}<!--{/block:Permalink}
	{block:TagPage}<!--{/block:TagPage}

</div>

{block:TagPage}-->{/block:TagPage}
{block:Permalink}-->{/block:Permalink}

としています。ちょっとややこしいですね。

つまり、
display:none をスタイルに設定した div 要素を、表示されるページによってコメントアウトして、インデックスとタグページとの表示をスイッチングしているのです。
コメントアウトの開始（ <-- ）と終了（ --> ）をそれぞればらばらに {block:TagPage} タグと {block:Permalink} を使って囲うことで、コメントアウトタグ自体を切り替えているわけです。

display:none が設定された div でコンテンツ部分を囲い、
インデックスを表示する時は
div を有効にすることでコンテンツを非表示にし、
タグページを表示する時は
インデックス部分をコメントアウトし、 div の開始タグと終了タグをそれぞれコメントアウトする
ことでコンテンツを表示しているわけですね。

おわかりいただけたでしょうか？

tumblrのカスタムテーマ作成にあたって参考にしたサイト

カスタムHTMLテーマの作成 | Tumblr
Tags of tumblr.

© no new folk studio®

菊川＆浜辺のキクラジオ

no new folk studioの菊川裕也とその友人、浜辺・ヨシキそしてわたくしマツバによるPodcastです。
iTunes Storeでキクラジオを見る

インディーズの音源を募集してオンエアもしています。
インディーズ音源募集

八王子・日野のごはんログに続いてWordPressを利用しています。

Podcastの配信もこのサイトのRSSを利用しています。
Blubrry PowerPressというプラグインを利用しています。

© no new folk studio®

八王子・日野のごはんログ

八王子や日野周辺で食べたものを記録していくサイトです。
八王子や日野はぼくらが普段生活している地域なのですが、せっかくなので食べた物を記録していったら何かの役に立つかもしれない、ということで、WordPressの勉強のつもりで１からテーマを作ってみました。

インストールしたプラグイン

• All in One SEO Pack
  SEO対策のための設定を一度に行うことのできるプラグインです。タグをmetaキーワードに置き換えてくれたりします。
• Broken Link Cheker
  サイト内のリンク切れを自動的にチェックしてくれます。画像が多かったりする場合には助かります。
• BWP Google XML Sitemaps
  GoogleのクロールのためのXMLのサイトマップを生成してくれます。Google ウェブマスターツールとセットで使います。
• Google Analytics Dashboard
  GoogleアナリティクスのグラフをWordPressのダッシュボードに設置できます。いちいちGoogleに飛ばなくてもいいので便利。
• Really simple Facebook Twitter share buttons
  twitterやGoogle+1、Facebookのボタンを簡単に記事の下に追加できます。
• RSS Footer
  RSSにフッターとして文言を追加できます。コピーライトなどの表示ができて便利。
• WP Hyper Response
  WordPressの高速化プラグイン。とくに管理画面のレスポンスが良くなります。
• WP Multibyte Patch
  WordPressを日本語で動かすにあたって必須のプラグイン。文字数のカウント方法が正確なものになります。
• WP Super Cache
  WordPressの高速化プラグイン。
• WPtouch
  WordPressで作られたサイトをiPhoneなどで表示する際にAppleっぽいテーマに置き換えてくれます。ナビゲーションも設定可能。

という感じで、SEO対策を真面目にやってみたらどれくらいの効果があるのかな？というのを検証するつもりで、SEO対策中心にプラグインをインストールしています。

© no new folk studio®

M+というフリーで高品質な日本語フォントがあります。
ウェイトが７種類用意されていて、それぞれ和文で２種類・欧文可変幅が４種類・欧文固定幅が２種類と多くの字形が用意されているため、使い勝手のよい書体です。
M+はwebフォントとして誰でも簡単に利用できるようになっているので、それを利用したサンプルを作ってみました。

WordPressでの設置方法

WordPressでの設置方法は簡単です（この記事を書くほうが時間かかりました）。

方法その１・ヘッダーに書き加える

ダッシュボードから「外観→テーマ編集」→「ヘッダー（header.php）」の編集へと進み、headの中からlinkタグの部分を探します。

linkは何行かあるので、適当な行の間に
<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css"/>
と書き加えます。

これはM+の用意したCSSを読み込むという指定です。このCSSの中から必要なfont-familyを直接指定して使います。
あとは投稿の際にスタイルとして指定すれば、webフォントを利用できるようになります。

例

SAMPLE TEXT あいうえお サンプルのテキスト［M+1P REGULAR］

これが下のようになります↓

SAMPLE TEXT あいうえお サンプルのテキスト［M+1P REGULAR］

方法その２・CSSに書き加える

次にファミリーを１つずつ読み込む方法です。
ダッシュボードから「外観→テーマ編集」→「スタイルシート（style.css）」の編集へと進みます。
適当な場所に以下を書き加えます（M+1P Regularの場合）。


@font-face
{
font-family: mplus-1p-regular;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf')
format("truetype");
}


「mplus-1p-regular.ttf」の部分は適宜必要な書体に変更します。
スタイルシートの編集が終わったら、同じく投稿の際にスタイルとして指定することでwebフォントを利用できるようになります。

和文＋欧文可変幅の字形サンプル

SAMPLE TEXT あいうえお サンプルのテキスト［M+1P REGULAR］
SAMPLE TEXT あいうえお サンプルのテキスト［M+1C REGULAR］
SAMPLE TEXT あいうえお サンプルのテキスト［M+2P REGULAR］
SAMPLE TEXT あいうえお サンプルのテキスト［M+2C REGULAR］
SAMPLE TEXT あいうえお サンプルのテキスト［M+1P BOLD］
SAMPLE TEXT あいうえお サンプルのテキスト［M+1C BOLD］
SAMPLE TEXT あいうえお サンプルのテキスト［M+2P BOLD］
SAMPLE TEXT あいうえお サンプルのテキスト［M+2C BOLD］

M+1Pでのサイズ違いサンプル

8px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］

10px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］

12px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］

13px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］

15px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］

20px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］

30px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］

40px
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P THIN］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P LIGHT］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P REGULAR］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P MEDIUM］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BOLD］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P HEAVY］
SAMPLE TEXTあいうえおサンプルのテキスト［M+1P BLACK］

© no new folk studio®