『Seesaa』ブログに『SyntaxHighlighter 3.0.83』を導入した：パソコン・FXなどに関する日記

http://alexgorbatchev.com/SyntaxHighlighter/

上記のサイトを参考に、本文にコードを表示できるようにしてみた。


echo "Hello World!"
exit

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

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

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





Seesaa特殊タグ：seesaaカスタマイズ(livedoor Wiki)

トラックバック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 />

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

ブラウザのタイトルバーや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対策コラム

このブログでは左サイドバーの一番上に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の書き換えが反映される場面はありません。