Seesaaブログで、モバイル向けのカスタマイズを紹介してるサイトが少なかったので、個人的にこうした方が見やすそうだな、と思ってカスタマイズしたところを記してみます。

他のサービス（FC2とかJUGEM）にはテンプレートが選択できたり、設定できる項目がたくさんあったりするんだけど、Seesaaは携帯向けテンプレートはないし、背景・リンク・文字の色くらいしか項目がないから、細かい部分はHTMLをいじらなければならない。デフォルトの状態はこんな感じ（Seesaaお知らせブログ）。これじゃあちょっと物足りないよね、って思う人も多いはず。


あまり需要はないかもしれないけれど、何かの役に立てれば幸いです。








※ちなみに……

モバイル版のページはブログのURLの末尾に「 pages/user/m/index 」をつけるとパソコンから見ることができます。パソコンで確認すれば時間とパケット代節約。



◆コメント数を各記事のタイトル下に表示させて、直接コメントページに移動できるようにする


FC2ブログのモバイル版がそうなっていて、いいなーって思ったので。携帯だと経由するページはなるべく少ない方がいいよね。


　　記事タイトル
　　00/00/00 00:00 | Comment(x)

↑ こんな感じで投稿日時の横にその記事に付けられたコメントの数を表示させて、「（x）」を選択すると直接コメントのページに移動するようにします。「x」はコメントの数、コメントがない時は「（0）」と表示されます。
できあがったものがこちら（マグカン）。


それでは早速。


管理画面から
　「デザイン」 ＞ 「コンテンツ（モバイル）」 ＞ 「記事」 ＞ 「コンテンツHTML編集」
と進む。


テキストエリアをちょっと下にスクロールして、<!-- contents -->　のもう少し下の、
<% if:page_name eq 'index' -%>　から始まる段落 を探す。スクロールバーの上から四分の一あたり。ここがトップページの記事一覧にあたる部分。

<% if:page_name eq 'index' -%>
<% loop:list_article -%>
<a href="<% article.mobile_page_url %>"><% article.subject | tag_break %></a><br>
&#63838;<% article.createstamp | date_format('%y/%m/%d %H:%M') %><br><br>
<% /loop -%>
<% /if -%>

初期状態はこのようになっているはず。
青い部分がその記事の投稿日時。この後ろに、↓ 赤字の部分を挿入。

<% if:page_name eq 'index' -%>
<% loop:list_article -%>
<a href="<% article.mobile_page_url %>"><% article.subject | tag_break %></a><br>
&#63838;<% article.createstamp | date_format('%y/%m/%d %H:%M') %> | Comment<a href="/pages/user/m/comments/regist/input?article_id=<% article.id %>">(<% article.children_count | __or__ | echo('0') %>)</a><br><br>
<% /loop -%>
<% /if -%>

これを参考にしながらその下の、

　<% if:page_name eq 'category' -%>　から始まる段落（カテゴリーの記事一覧）
　<% if:page_name eq 'archive' -%>　から始まる段落（過去ログの記事一覧）

の同じ部分を同じように変更。以上。


おわかりいただけただろうか。


日時の前の「&#63838;」は時計の絵文字なので、私は取っ払って四角マークにしました。
あとはお好みで右寄せにしたり、文字の大きさを変えたり、枠線を入れたり……その辺りは各々HTML解説サイトで調べましょう。


あぁ、でもこれってコンテンツから「最新のコメント」を追加すればたいしていらない気もしますね。
まぁ見た目はスッキリするし、過去ログを遡ってコメントを読み返したい時なんかは、こうした方が遥かに便利だと思います。



解説下手ですみません。慣れないことはするもんじゃないな。
ご意見・ご指摘・菓子折り等ございましたら私まで。



（忘れた頃に第二段やります）