【注意】2010年9月21日の記事を2012年7月27日現在の画像で補足したものです
【前提】とりあえずTumblrでテーマのcustomHTMLを見られる人＋CSS弄れる人
tumblrのテーマの中には会話（chat）形式を収録するとき会話主に合わせて行にスタイルを当てはめるためのclassが設定されているものがある。
ただし、適用するテーマによってはclassが設定されていなくてできないこともある。
しかし、会話主別のクラス付与はTumblrの機能なので、設定さえできれば、どんなテーマにでも適用することができる。
手順１：テーマのカスタマイズからcustom HTMLを読む
ダッシュボードから「カスタマイズする」→「HTMLを編集」でテーマのソースである「custom HTML」を編集することができる。
手順２：custom HTMLのchat形式postの部分を探す
テーマによって当然違うので一概には言えないが、次の部分で囲まれた部分がchat形式のpostの構造を決める部分になっている
{block:chat}……{/block:chat}
（または、{block:Conversation}……{/block:Conversation}）
例えば、Impliedというテーマでは、次のように記述されていた。
{block:Chat}
<ul class="chat">
{block:Lines}
<li>{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}</li>
{/block:Lines}
</ul>
{/block:Chat}
念のため、他の{block:}で囲まれている部分は
{block:Lines}……{/block:Lines} ：会話1行分（実際には{Line}の部分に会話文が入る）
{block:Label}……{/block:Label}：会話主（実際には{Label}の部分に会話主の名前が入る）
手順３：会話主別class名を付与する
今回例に挙げたソースでは、1行をリストで表示しているため、li要素（テーマによってはdiv要素）に会話主別のクラスを付与するのが適当なので、次のように記述する。
{block:Chat}
<ul class="chat">
{block:Lines}
<li class=”user_{UserNumber}”>{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}</li>
{/block:Lines}
</ul>
{/block:Chat}
ようやく出てきた{UserNumber}が今回のキーで、chatの会話主に上から順番に振られる番号（同じ会話主はそのpost内では同じ番号）
ここではuser_{UserNumber}と記述することで、各会話行が、会話主別に上からuser_1、user_2、……と振られていくことになる。
手順４：user_1、user_2、……にスタイルシートを適用する。
最後の問題はuser_いくつまで設定するかだが、基本的にラジオでこれ以上の人数は使わないだろうと個人的には4つにしている。
4人以上の会話があったとしてもスタイルシートや会話主の順序を少々工夫することで結構間に合っていたりする。
参考リンク
Creating a custom HTML theme
Tumblrのテーマの作り方の仕様。ただし英語
Tumblr で使えるタグ - 導入 2010-01-20
ということで日本語になってるところ。
■ツイート 
0 件のコメント:
コメントを投稿