2011年01月25日

Seesaaブログのモバイルページを「改行をbrタグに変換しない」でも改行させる

Seesaaブログにも「モバイル端末でページを開いた場合に、自動的にモバイルテンプレートで表示する機能」は当然付いてるんだけど、困ったことにモバイルページはほとんどのタグを自動的に削除してから表示するようになってる。もちろん普通に使ってる分には改行がbrタグに変換されるので何も困らないんだけど、このブログみたいに「pタグなどでマークアップ済みの記事をそのままアップロードする」というスタイルで使ってると、改行が全くなくなって読めたものじゃなくなってしまう。(例えば今のFC2ブログは、ほとんどのタグをそのままモバイルページでも表示してくれるようになったので、この問題は起こらない。)

恐らくモバイルページング(モバイル向けに記事を数ページに分けて表示する)機能のせいでこうなってるんだろうけど、モバイル版のために普通の記事のスタイルを変えるのは嫌だったので「ああ、これはこういうものなんですね」と諦めて使っていた。

ところがこれは簡単なカスタマイズで解決できると判明。デザインから「コンテンツ(モバイル)」を選び「記事」をコンテンツHTML編集で以下のように書き換える。

変更前

<% article.entire_body | bodyfilter(article_info, blog) %>

変更後

<% article.entire_body | bodyfilter(article_info,blog) | nl2br %>

変数部分にnl2brを加えただけ。pタグなんかが消えるのは変わらないが、これで文中で改行さえしてあればbrタグが追加されるようになる。もちろん「記事の投稿時点で(タグがあること前提で)改行が全くない」という書き方をしてるなら意味ないけど。

posted by RPM at 21:26 | TrackBack(0) | BackLink | Web制作 | 更新情報をチェックする

2009年10月13日

Seesaaブログに「Twitterでつぶやく」ボタンを設置する方法

Seesaaブログのテンプレートに、独自変数とJavaScriptを使って「Twitterでつぶやく」ボタン(とついでにTwib で取得できるTweet数)を設置できるコードの解説。ただ大前提として、現在ではSeesaa標準の「ブックマーク機能」にまったく同じ機能が搭載されている。普通はこれを使えばいいので、あえて「別の場所につぶやくボタンを付けたい」とか「標準機能を何かの理由で使いたくない」という場合でないと使う意味がない点に注意。

貼り付けコード

<script type="text/javascript">
<!--
document.write('<a href="http://twitter.com/home?status=' + encodeURIComponent('<% article.subject | html %>') + '%20<% article.page_url %>" target="_blank" title="Twitterでつぶやく"><img src="http://blog.seesaa.jp/img/bookmark/twitter_ico.gif" alt="Twitterでつぶやく" width="16" height="16" border="0" /></a>'); 
// -->
</script>

ブラウザのJavaScriptがONで正常に機能している場合、以下のように表示されるはず。

「つぶやくときにタイトルはいらない。URIだけで十分」という場合ならJavaScriptは不要なので、noscriptの部分に以下のように入れておいてもいいかもしれない。(自分の環境ではやっていない。)

<a href="http://twitter.com/home?status=%20<% article.page_url %>%20" target="_blank" title="Twitterでつぶやく"><img src="http://blog.seesaa.jp/img/bookmark/twitter_ico.gif" alt="Twitterでつぶやく" width="16" height="16" border="0" /></a>

設置は「デザイン」→「コンテンツ」などから任意の場所に書き込めば機能するはず。

おまけのTwibのコード

TwibのAPIでTweet数が取得できるので、それにSeesaaの変数を入れただけのもの。上のものと組み合わせればこのBlogのように「つぶやくボタン + Tweet数」が表示可能に。設置例はページ下部で。

<a href="http://twib.jp/url/<% article.page_url %>" title="tweet" target="_blank" ><img src="http://image.twib.jp/counter/<% article.page_url %>" border="0" alt="" /></a>

「設置しても上手く表示されない」という場合は単にSeesaaの再構築が不完全なだけかもしれないので、「設定を反映する」や「ブログ設定の変更」を何度かクリックしてみるといいかもしれない。

posted by RPM at 20:27 | TrackBack(0) | BackLink | Web制作 | 更新情報をチェックする

2008年08月08日

IE6+positionプロパティの注意点

「position: absolute」を使うために上位要素に「position: relative」を設定する場合、その要素には必ず横幅(width)を設定した方がいい。そうしないとIE6でいくつものバグに悩まされることになる。

マークアップの関係上横幅を設定できないなら、(美しくなくても)もう一回divか何かで囲って横幅を設定しよう。少なくともバグと正面からつきあうよりかはそっちの方がずっと楽。以下私が体験したIE6+positionプロパティでのバグ。

  • ブロック要素の背景色が消える
  • ブロック要素の背景画像が消える
  • 指定していないところにposition: absoluteで固定した要素がレンダリングされる

以上全てIE6の標準モード。IE7では起こらない。

posted by RPM at 01:55 | TrackBack(0) | BackLink | Web制作 | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。