Posterousがバレンタインデーに合わせて「Likes＆Comments」ウィジェットをリリースしました。

これは新機能というわけではありません。

今まで「Favorite」ボタンがありましたが、それが新たに「Like」ボタンとなり、
コメント欄も動的なものに変更されました。

それでは、説明します。

以下のようなウィジェットが今までのコメントフォームのあたりに追加され、
「Favorite」ボタンが廃止されています。

• Responsesボタン ・・・　反応（Likeとコメント）があった件数を表示します
• Likeボタン ・・・　今までの「Favorite★」が「Like」に一新されました
• Commentボタン ・・・　コメントフォームも新しくなりました

Responsesボタンをクリックすると、反応の内容をリスト表示（Responsesリスト）します。
反応とは、Likeやコメントのことです。

Likeボタンをクリックすると、「＜ユーザ名＞ liked this post.」というコメントが残ります。

Commentボタンをクリックすると、コメントの投稿を行うことができます。

「Favorite」より「Like」の方がライトな感じで押しやすいのでしょうかね (^_^;

確かに今までの「Favorite」は少々わかり辛かったかもしれません。
Posterousユーザではない方にしてみれば、何だかわからないですからね...。

採用しているテーマに関係なく、全てのPosterousに適用されているということです。

ご自身のPosterousをご確認ください。

 

新しいウィジェットが見当たらない！

あれ？自分のPosterousには適用されていないんですけど？？

もしかして、あなたのPosterousにも見当たりませんか？

そうなんです。

テーマをカスタマイズしちゃっている人の場合、このようなケースがあるようなのです。

そりゃそうですよね...。

ということで、自分で適用する方法を説明します。

（自分で適用する必要がない方は、読み飛ばしてください。）

 

新しい「Like」ボタンの適用方法

方法はとっても簡単です。

{block:Comments} ～ {/block:Comments} を {block:Responses/} に置き換えるだけ。

これだけです。

 

それでは、以下でもう少し詳しく説明します。

テーマの編集画面を開いて、ソースを表示してください。

その辺が不安な方は、以下の記事も併せてご覧ください。

テーマを編集する前に、必ずバックアップを取るようにしてくださいね。

 

 

 

1. {block:Comments} を検索する

今回、編集の対象となるのは、{block:Comments} というブロック要素です。

ソースの中から、{block:Comments} を検索してください。

採用しているテーマによっては、{block:Comments} が複数ヒットする場合があると思います。
私が採用しているテーマでも、2つヒットしました。

その場合は、ソースの内容を確認してください。
ここで編集の対象となるのは、コメントフォームのものです。

コメントフォームの {block:Comments} は、{block:Posts} というブロック要素で挟まれています。

念のため、私が採用しているテーマの場合のソースを書いておきます。

{block:Comments}
  ＜section class="comments{block:Show} comments_box{/block:Show}"＞
      {block:CommentsList action_id="comment_link_{PostID}" target_element="post_commentarea_{PostID}"}
        ＜div id="post_commentarea_{PostID}" class="comment_area"＞＜/div＞
      {/block:CommentsList}
      {block:CommentsShow}
        ＜a name="comment"＞＜/a＞
        ＜section class="comments_list"＞
           ＜h1 class="commentcount-show"＞{CommentCount} Comment{CommentCountPluralized}＜/h1＞
            {CommentCode}
        ＜/section＞
        ＜section class="comment_create"＞
            ＜h1＞Leave a comment...＜/h1＞
             {NewCommentCode}
        ＜/section＞
      {/block:CommentsShow}
  ＜/section＞
{/block:Comments}

私と異なるテーマの場合も、おそらく全く同じか、ほとんど同じではないでしょうか。

探してみてください。

 

2. {block:Comments} を {block:Responses/} に置き換える

{block:Comments} が見つかったら、次に {block:Responses/} に置き換えます。

{block:Comments} の時は、{block:Comments} ～ {/block:Comments} の中に色々書いてありますが、
{block:Responses/} の場合は、細かいことは必要ありません。
単純に {block:Responses/} だけです。

早速やってみましょう。

以下の部分を、

{block:Comments}
  ＜section class="comments{block:Show} comments_box{/block:Show}"＞
      {block:CommentsList action_id="comment_link_{PostID}" target_element="post_commentarea_{PostID}"}
        ＜div id="post_commentarea_{PostID}" class="comment_area"＞＜/div＞
      {/block:CommentsList}
      {block:CommentsShow}
        ＜a name="comment"＞＜/a＞
        ＜section class="comments_list"＞
           ＜h1 class="commentcount-show"＞{CommentCount} Comment{CommentCountPluralized}＜/h1＞
            {CommentCode}
        ＜/section＞
        ＜section class="comment_create"＞
            ＜h1＞Leave a comment...＜/h1＞
             {NewCommentCode}
        ＜/section＞
      {/block:CommentsShow}
  ＜/section＞
{/block:Comments}

全て削除して、

{block:Responses/}

に置き換えるだけです。

置き換えが終わったら、テーマの変更を適用して、確認してみてください。

万が一、失敗した場合は、バックアップしたソースに戻して、再度試してみてくださいね。

 

3. コメントフォーム部分以外のCommentsブロックをResponsesに更新する

上記でも少し触れましたが、私が採用しているテーマの場合、
コメントフォーム部分以外にもCommentsブロックが存在します。

そのような場合は、残りのCommentsブロックも新しくしましょう。

私が採用しているテーマの場合、トップページの以下のパーツの為のものでした。

これなら、このままにしておいても良さそうですが、
Commentsブロック自体が廃止になる可能性もありますので、きれいにしておきましょう。

そのためには、Responsesブロック要素自体を少々理解する必要があります。

 

Responsesブロックを理解する

以前の記事にも書きましたが、Posterousでのブロック要素には2種類あります。

トップレベルブロックとポストレベルブロックです。

Responsesは、ポストレベルブロックに属します。

ポストレベルブロックは、{block:Posts} というトップレベルブロックの配下にいる必要があり、
{block:Responses/} もその例外ではありません。

よって、{block:Responses/} は、必ず{block:Posts} ～ {/block:Posts} の間にいなければなりません。

そして、Responsesブロックは、いくつかの下位要素を持っています。

• {ResponseCount} ・・・　反応があった件数を返します
• {ResponseCountPluralized} ・・・　反応があった件数が複数件の場合に "s" という文字を返します
• {Responses} ・・・　反応のリストを表示するためのHTMLを返します
• {ResponseWidget} ・・・　新しいウィジェットを表示するためのHTMLを返します
• {ResponseForm} ・・・　新しいコメントフォームを表示するためのHTMLを返します

今までの {block:Comments} にも、同等の要素が存在していました。

コメントフォーラム部分以外に {block:Comments} が存在する場合のほとんどが、
これらの要素を利用している部分です。

私が採用しているテーマの場合を例にとってみましょう。

上記でも書きましたが、以下のパーツのために {block:Comments} が存在します。

 

ちなみに、ソースは以下のとおり。

{block:Comments}
  ＜div class="right"＞
     {block:CommentsList}
       ＜h1 class="commentcount"＞＜a href="{Permalink}#comment" id="comment_link_{PostID}"＞{CommentCount} Comment{CommentCountPluralized}＜/a＞＜/h1＞
     {/block:CommentsList}
  ＜/div＞
{/block:Comments}

このソースの独自タグを確認してください。

{block:CommentsList}, {CommentCount}, {CommentCountPluralized} というものがあります。

{block:CommentsList} は後程説明しますので、一旦忘れてください。

 {CommentCount}, {CommentCountPluralized} は、どこかで似たようなものを見たことないですか？

そうです。上記でResponsesブロックの下位要素として説明した、
{ResponseCount} , {ResponseCountPluralized} のCommentsブロック版で、同じ意味のものです。

ですので、これらを置き換えればいいわけですね。

ですので、上記の3行目は以下のようになります。

＜h1 class="commentcount"＞＜a href="{Permalink}#comment" id="comment_link_{PostID}"＞{ResponseCount} Response{ResponseCountPluralized}＜/a＞＜/h1＞

そして、青文字の部分に注目してください。

#commentというアンカーは今後も有効のようですので、このまま残します。

青文字のResponseは、上記パーツ内の文字なので、Responseに置き換えました。
日本語で「レスポンス」や「反応」もしくは、英語で「Likes&Comments」でも、
なんでも良いんですけどね。

では、後回しにした {block:CommentsList} について以下で説明します。

 

Responsesブロックをカスタマイズ

実は、{block:Responses/} は、全てのページに適用されてしまいます。

ここでいう全てのページとは、投稿ページ、リストページのことです。
リストページというのは、トップページ、検索結果ページ、タグページの総称です。

ひとによっては、「トップページは表示してほしくない」等の要望もあるかと思います。

その場合は、Responsesブロックをカスタマイズしましょう。

Responsesブロックには、オプションとして、別のブロック要素が用意されています。

• ResponsesListブロック ・・・　{block:ResponsesList} ～ {/block:ResponsesList}
• ResponsesShowブロック ・・・　{block:ResponsesShow} ～ {/block:ResponsesShow}

ResponsesListブロックは、リストページにResponsesを表示するためのブロック要素です。

ResponsesShowブロックは、投稿ページにResponsesを表示するためのブロック要素です。

この2つを使えば、表示したい場所を選んで自由に配置できるのです。

これらのブロック要素の中に、上記で説明したResponsesブロックの下位要素を組み合わせ、
それぞれを構成します。

以下は例です。

ResponsesListブロック

{block:ResponsesList}
   {ResponseWidget}
{/block:ResponsesList}

ResponsesShowブロック

{block:ResponsesShow}
   {ResponseWidget}
   {Responses}
   {ResponseForm}
{/block:ResponsesShow}

ちなみに、これらのブロック要素もResponsesブロックと同様、ポストレベルブロックですので、
必ず{block:Posts} ～ {/block:Posts} の間にいなければなりません。

しかし、これだけでは、設置されるウィジェット、Responsesリスト、コメントフォーム自体の
カスタマイズは出来ません。

それでは、CSSでカスタマイズしてみましょう。

 

「Likes＆Comments」ウィジェットをカスタマイズ

ずいぶん長くなりましたが、実はまだ終わりではありません。

Commentsブロックで生成されるHTMLに対応するCSSソースが残っています。

そのソースの中で必要なものと必要なくなったものを精査し、不要なものは削除しましょう。

そして、Responsesブロックで生成されるHTMLに対応するCSSを作成して、
カスタマイズすれば、もっと楽しくなりますよね。

ここでCSSのカスタマイズ方法等を紹介するとさすがにすごいボリュームになるので、
ここでは {block:Responses/} がHTMLに変換された際のソースだけ書きます。

＜aside class="p_responses light"＞
   ＜nav class="p_response_widget"＞
＜ul class="clearfix"＞
＜li class="p_responses_link"＞＜a href="/responses/recent?post_id={PostID}" data-posterous-response-count="{PostID}" data-response-post-id="{PostID}" title="View responses to this post"＞＜strong＞{ResponseCount}＜/strong＞ response{ResponseCountPluralized}＜/a＞＜/li＞
＜li class="p_like_link"＞＜a href="/likes/create?like_type=post&post_id={PostID}" class="like_post" data-like-url="/likes/create?like_type=post&post_id={PostID}" data-posterous-like-button-for-post-id="{PostID}" data-posterous-like-text="Like this post" data-posterous-like="true" data-posterous-unlike-text="Unlike this post" data-unlike-url="/likes/delete?like_type=post&post_id={PostID}" title="Like this post"＞＜div class="p_like_icon"＞＜/div＞＜div class="p_unlike_icon" style=""＞＜/div＞＜span＞Like this post＜/span＞＜/a＞＜/li＞
＜li class="p_comment_link"＞＜a href="/responses/recent?post_id={PostID}" data-comment-post-id="{PostID}" title="Comment on this post"＞＜div＞Comment＜/div＞＜/a＞＜/li＞
＜/ul＞
＜/nav＞
   ＜div data-posterous-responses-for-post-id="{PostID}"＞＜/div＞
＜/aside＞

本当は当然、{PostID}, {ResponseCount}, {ResponseCountPluralized} はHTMLになってます。
しかし、ここではわかりやすくこのように表示しています。

ちなみに {PostID} は、そのままポストIDです。
投稿したエントリーには、毎回IDが割り振られています。

これを元にCSSを作成して、カスタマイズを楽しんでくださいね。

私が採用しているテーマの場合、かなり不恰好な状態でしたので、
私もCSSで綺麗に直しました (^_^;

 

その他、要らないものを消してきれいにする

最後に、他のゴミを消しちゃいましょう。

例えば、 {block:Favorite} です。
これは、以下のアイコンを表示するブロック要素です。

次に、{FavoriteCount} も不要ですね。
これまでのお気に入り（Favorite）の数をカウントして値を返すブロック要素です。

{ResponsesCount} に変更しておくのがいいかもしれません。
もちろん、前後のソースを確認してくださいね。

そして、 {block:Fans} も不要です。
これは、これまでのお気に入り（Favorite）を付けたユーザ（つまりファンですね）を
リスト表示するためのブロック要素です。

また、とても似ているのですが、{block:Fan} も不要です。
これも {block:Fans} と同様にファンを表示するためのブロック要素です。

見せ方が違うだけでほとんど一緒ですので、同様に不要です。

何度も書いていますが、テーマによってソースが違うため、
もちろん、採用されている要素もまちまちです。

必ずしも、ご自身のソースに全てが当てはまるとは限りません。
確認しながら作業するようにお願いします。

 

まとめ

いかがでしたでしょうか。

今回はちょっとマニアックになってしまったかもしれませんが、
Posterousユーザの方は、参考にしていただければ嬉しいです。

不備や質問がありましたら、コメント欄やFacebookファンページでお願いします。