HOME > Seesaaブログのカスタマイズ :このページの記事一覧
SeesaaブログのHTMLカスタマイズで、独自タグでよく使う変数オブジェクトを一目で分かるよう視覚的に表してみた[2009-01-08]
トラックバックURLを1クリックで選択できるように(Seesaa)[2007-09-05]
ページタイトルの表示順を変えてみる(Seesaa)[2007-09-02]
検索結果のページのデザインを修正(改行、記事タイトル一覧など)(Seesaa)[2007-08-22]
「続きを読む」を折りたたみ式に改造(Seesaa)[2007-08-21]

2009-01-08

SeesaaブログのHTMLカスタマイズで、独自タグでよく使う変数オブジェクトを一目で分かるよう視覚的に表してみた


Seesaaブログでは、HTMLを自由に編集してブログのデザインを操作できます。
その際に使われるものに、Seesaa独自タグの変数があります。
HTML中では、<% 変数 %>で表現されているものです。

代表的な変数一覧(オブジェクト型):Seesaaブログ・よくある質問と回答 はてなブックマーク

↑のページで一応解説されているんですが、視覚的に「パッと見て」分かる感じのイメージがあったら便利だなと思って、作ってみました。
(※クリックすると大きいサイズで表示します)

seesaa_css_01s.jpg

seesaa_css_02s.jpg

Seesaa特殊タグ:seesaaカスタマイズ(livedoor Wiki) はてなブックマーク
2007-09-05

トラックバックURLを1クリックで選択できるように(Seesaa)


トラックバックURLは、Seesaaブログでは初期設定では普通にURLが表示されているだけで、ドラッグして選択・コピーしなくてはいけません。

これを、textフィールドに表示して、1クリックするとURLが選択されるようにしてみます。

管理画面から[デザイン]→[コンテンツ]→[記事]→[コンテンツHTML編集]と進み、「この記事へのトラックバックURL…」という部分を探します。
この記事へのトラックバックURL<br /><% individual_article.tb_url %><br />

という部分を、↓のように書き変えます。
この記事へのトラックバックURL<br /><input type="text" size="50" value="<% individual_article.tb_url %>" readonly="readonly" onfocus="this.select()" /><br />

赤い文字の部分を、青い文字の部分に書き変えました。
2007-09-02

ページタイトルの表示順を変えてみる(Seesaa)






ブラウザのタイトルバーやGoogleの検索結果などに表示されるページのタイトルですが、Seesaaブログでは初期設定で
ブログ名: 記事タイトル
と表示されてしまいます。
GoogleやYahoo!で表示されるタイトルの文字数にはそれぞれ20文字、40文字といった上限があって、それより長いと「...」と省略されてしまいます。
ですから、
記事タイトル - ブログ名

という風に表示されるほうが、検索をしている人にタイトルをきちんと読んでもらるみいたいです。

そこで、HTMLの<title>タグの部分を少しだけ書き変えます。
管理画面から[デザイン]→[HTML]と進んで、<title>タグを見つけて、
<title><% blog.title %><% if:extra_title %>: <% extra_title %><% /if %></title>

となっているところを、↓のように書き変えます。
<title><% if:extra_title %><% extra_title %> - <% /if %><% blog.title %></title> 

青色の文字の部分が記事タイトルに相当する。


タイトルは計画的に :Google Adsenseでアフィリエイト
タイトルバーのカスタマイズでSEO対策なんだぜ :LOVE IS DESIGN
タイトルバーの表示内容を変更 :ブログカスタマイズ
Google検索結果のタイトル表示 :SEO対策コラム
2007-08-22

検索結果のページのデザインを修正(改行、記事タイトル一覧など)(Seesaa)


このブログでは左サイドバーの一番上にSeesaaで用意されている検索ボックスを設置しています。
この検索ボックスを使って表示される検索結果のページは、初期設定のままではデザインが少し見づらいものになってしまっていました。(例えば、改行が向こうになっていたり)
原因は、検索結果のページが記事コンテンツのHTMLではなくて全体のHTMLの方で指定されているからのようです。
そこで、全体のHTMLを少し書き変えて見やすくしてみました。

管理画面から[デザイン]→[HTML]と進んで、その中の一部分を書き変えます。

<% if:page_name eq 'search' -%>
<div class="sidetitle"><a href="<% blog.page_url %>">HOME</a> > 検索 :このページの記事一覧</div>
<div class="side">
<% loop:list_article -%>
<a href="<% article.page_url %>" class="a"><% article.subject %></a><br />
<% /loop -%>
</div>

<% loop:list_article %>
<div class="blog">

<h2 class="date"><% article.createstamp | date_format("%F") %></h2>
<div class="blogbody">

<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<div class="text"><% article.entire_body | text_summary(240) %></div>
<div class="text"><% if:article.convert_breaks %><% article.entire_body | nl2br %><% else %><% article.entire_body %><% /if %></div>
<div class="posted">
<% if:article.accept_comment_show -%>| <a href="<% article.page_url %>#comment">Comment(<% article.children_count | __or__ | echo('0') %>)</a><% /if -%>
<% if:article.accept_tb_show %>| <a href="<% article.page_url %>#trackback">TrackBack(<% article.tb_count | __or__ | echo('0') %>)</a><% /if -%>

</div>

</div>

</div>
<% /loop %>
<% unless:list_article %><div class="text">該当するページが見つかりませんでした。</div><% /unless %>
<% /if -%>

青い文字の部分を追加、赤い文字の部分を削除しました。

・検索結果の記事のタイトル一覧をページ上部に表示
・各記事の下部のposted欄にコメント、トラックバックを表示
・検索結果がゼロの場合は「該当するページが見つかりませんでした」と表示
・改行を有効にして、全文を表示

という感じで、違和感のあったデザインが改善されたと思います。
posted欄にカテゴリを表示することはできないみたいです。


HTMLの書き換えにあたっては、以下のページがたいへん参考になります。

検索結果ページのデザイン :ブログカスタマイズ
検索結果ページの改行 :ブログカスタマイズ
検索結果でヒット件数ゼロを表示する :ブログカスタマイズ

【追記】
現在は、当ブログ内の検索には「Google検索」を使っているので、上記のCSSの書き換えが反映される場面はありません。
2007-08-21

「続きを読む」を折りたたみ式に改造(Seesaa)


Seesaaブログでは「続きを読む」をクリックすると、追記記事の内容は別ページに表示されます。
でも私は個人的には「続きを読む」をクリックしたら同一ページにそのまま表示される折りたたみ式の方が好みなので、HTMLを書き換えて改造してみました。

その際、以下のページがたいへんに参考になりました。
記事の追記部分を折りたたみ :Style book

でも、実際に「続きを読む」という機能ってどういう場面で使うのが適切なのかよく分かりません。

ブログの『続きを読む』機能の本当の使い方 :ホームページを作る人のネタ帳

このブログにおける「続きを読む」考 :ekken