2014/3/21

インタビューサイトのダイアログに装飾を後付けする

Blabo!マガジンというのをFacebookで見ていたら、ああこういうアイコンがダイアログに出てくる奴、読んでて楽しげだなあと思って、ET Luv.Lab.に実装しようと思いまして。ただ、問題があって、特にマークアップで綺麗に僕とゲストのパラグラフの切り分けとかやってないんですよね。というわけで、jQueryのお世話になることにしました。

$('.brief p').each(function(){
		var txt = $(this).html();
    if(txt.substr(0,4) == '【加藤】') {
      $(this).addClass('kato');
    } else if(txt.substr(0,1) == '【') {
      $(this).addClass('others');
    }
  });

記事内で、段落が【加藤】で始まってるのを、katoってclass振って、他の【で始まっているのをothersってclass振る処理してます。こうすると【】で始まってる段落にそれぞれのclassが振られます。後はCSSでデザイン調整すれば良いのですが、ET Luv.Lab.はWordPressのカスタムフィールドにFlickrにアップされた画像のURL持ってるので、header.phpに直接CSS書き込んじゃいました。

<style type="text/css">
<!--
.brief p.kato {
  background-image:url('http://farm9.staticflickr.com/8215/8325234095_78436bc914_s.jpg');
  background-position:top left;
  margin-top:10px;
  padding-top:-10px;
  margin-left:-50px;
  padding-left:50px;
  background-repeat:no-repeat;
  background-size:40px auto;
  min-height:40px;
}
.brief p.others {
  <?php $flickr = get_post_meta($post->ID,'flickr',TRUE); ?>
  background-image:url('<?php echo $flickr; ?>_s.jpg');
  background-position:top left;
  margin-top:10px;
  padding-top:-10px;
  margin-left:-50px;
  padding-left:50px;
  background-repeat:no-repeat;
  background-size:40px auto;
  min-height:40px;
  font-weight:bold;
}
-->
</style>

こんな感じで、実装して、結果、こんな感じで表示されてます。なんか前より楽しげになった感じがします。アイコンついてると、良いですね。これ実はユレッジの「アジーとJ子」でも似たようなことやってまして、ようは面倒臭がりなので、上がって来た原稿マークアップして装飾加えたりするの手間なので、文字列ベースでスタイル宛てがえるような感じにしています。

汎用性どこまであるかなあというのは疑問ですが、とりあえず、定形で誰が喋ってるのかわかるような何かが段落の頭についてれば、ゴニョゴニョできるんじゃないでしょうか。というところ。

ひとり仕事: フリーランスという働き方
(2012-10-5)
売り上げランキング: 14,705
100円
WordPressデザインレシピ集
狩野 祐東
技術評論社
売り上げランキング: 197,569
WordPress 高速化&スマート運用必携ガイド
こもりまさあき 岡本渉
エムディエヌコーポレーション
売り上げランキング: 435,263