【Seesaaブログのカスタマイズ】SeesaaブログのHTMLカスタマイズへのリンク集

この記事は、このブログに施しているカスタマイズと、そのカスタマイズ方法を公開してくださっている記事(どうもありがとうございます!)へのリンク集です。

  1. 記事から直接編集ページへ行く
  2. カテゴリページ・過去ログページに、記事タイトル一覧を表示する
  3. 記事タイトルの右下に記事のカテゴリを表示する
  4. 同カテゴリの最新記事に表示させる記事タイトルの文字数を変更する
  5. タグページの表記を少し変更する
  6. 記事検索のラジオボタンのチェックをはじめから「記事」のほうにする
  7. 記事検索の結果が0件だったときのメッセージを表示する
  8. 各記事に日付を表示する
  9. 自由形式を使う
  10. ページタイトルを「記事タイトル:ブログタイトル」に
  11. カテゴリのツリー化
  12. フッターにコピーライトを表示する
  13. ソーシャルボタンをつける
  14. seesaa独自のタグ

カスタマイズをする際はリンク先の記事を熟読されて、現在の状態のソースを別ファイルに保存するなどして、失敗しても元に戻せるように準備してから実行してください。
(リンクではなく直接タグを紹介しているものは、私が編集したものです。間違いがないように気をつけてはおりますが、実行された場合のいかなる損失についても責任は負えません。アフターフォローとかもあんまりできません。)

記事から直接編集ページへ行く

編集箇所「デザイン>PC>コンテンツ>記事>コンテンツHTML編集」
自分の記事に直したいところを見つけたとき、クリックひとつですぐに編集画面に移動できます。これはとても便利なので、まず一番におすすめ。

以前は別サイトを参考に長めのタグを入れて使っていたんですが、今はシンプルなこちらを使っています。(現在は編集ページのURLが変わっています。記述の際は気をつけてください →「http://blog.seesaa.jp/cms/article/edit/input?id=<% article.id %>」)

シス日記: 記事から直接ブログ編集画面へ

カテゴリページ・過去ログページに、記事タイトル一覧を表示する

編集箇所「デザイン>PC>コンテンツ>記事>コンテンツHTML編集」
カテゴリ名やカレンダーをクリックして表示されるカテゴリページや過去ログページは、デフォルトではただ記事だけがずらっと並びます。下までスクロールしないとどんな記事があるのかわからなくて面倒なので、ページの冒頭に記事タイトル一覧を表示させました。

徒然なるままに: Seesaaブログで件数表示を伴うカテゴリ・過去ログ別記事一覧表示』件数表示もされるので便利です。

記事タイトルの右下(本文の右上)に、記事のカテゴリを表示する

編集箇所「デザイン>PC>コンテンツ>記事>コンテンツHTML編集」
記事タイトルの右下(本文の右上)にも記事のカテゴリを表示することで、何についての記事なのかがすぐにわかりますし、クリックすればそのカテゴリのページにすぐ移動できて便利です。

記事のタイトル部分(h3)を探して、そのすぐ下に記述しました。

<div class=”blogbody”>
<h3 class=”title”><a href=”<% article.page_url %>” class=”title”><% article.subject %></a></h3>
<% if:page_name eq ‘article’ -%>
↓  ↓  ↓
青文字部分を追加
<div class=”blogbody”>
<h3 class=”title”><a href=”<% article.page_url %>” class=”title”><% article.subject %></a></h3>
<div class=”article-right-top”>
[<a href=”<% article_category.page_url %>”><% article_category.name %></a>]
</div>

<% if:page_name eq ‘article’ -%>

あとはスタイルシートで右寄せと文字の大きさを指定しました。
(リンクではなく直接タグを紹介しているものは、私が編集したものです。間違いがないように気をつけてはおりますが、実行された場合のいかなる損失についても責任は負えません。アフターフォローとかもあんまりできません。)

同カテゴリの最新記事に表示させる記事タイトルの文字数を変える

編集箇所「デザイン>PC>コンテンツ>記事>コンテンツHTML編集」
このブログの記事タイトルは長いので、「同カテゴリの最新記事」の記事タイトルが途中で切れてしまいます。デフォルトでは20文字になっていますが、これを40文字に増やしました。
該当箇所を探し、数字を書き換えます。(text_summaryのところ)

<% if:list_category_article -%>
<div class=”listCategoryArticle”>
【<% article_category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href=”<% article.page_url %>”><% article.subject | text_summary(20) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>

(リンクではなく直接タグを紹介しているものは、私が編集したものです。間違いがないように気をつけてはおりますが、実行された場合のいかなる損失についても責任は負えません。アフターフォローとかもあんまりできません。)

タグページの表記を少し変更

編集箇所「デザイン>PC>HTML>追加したHTML」
タグをクリックして表示されるページは初期表示が6件(記事・フォト・他ファイルそれぞれ)で、ページングナビも目立たない場所にあります。印象として「6件しかないのね」という感じ。
なので「初期表示は6件です。右下の「>>もっと見る」をクリックしてください。」という一文を表示させました。(クリックした先のページでも同じメッセージが表示されるのがちょっとマヌケなんですが・・)

それから、デフォルトでは記事のタイトルのみが表示されるので、記事の冒頭部分も表示させました。これは本体HTMLの該当箇所がコメントアウトされているだけなので、コメントタグを削除すればOK。表示される文字数は任意で変更します。

<% loop:list_service -%>
<div class=”tag-body”>
<div class=”tag-service”><% tag_service.title %></div>
<div class=”tag-search”><a href=”<% tag_service.page_url(tag) %>” target=”_blank”>'<% tag.word %>’ でSeesaa全体を検索する</a></div>
<% if:tag_service.service_key eq ‘articles’ -%>
<% loop:list_data -%>
<div class=”tag-article”>
<div class=”tag-article-title”><a href=”<% article.page_url %>”><% article.subject %></a> <span class=”tag-article-posted”>[<% article.createstamp | date_format(“%Y/%m/%d %H:%M”) %>]</span></div>
<!–<div class=”tag-article-summary”><% article.entire_body | text_summary(240) | tag_strip %></div>–>
</div>
<% /loop -%>
の部分を探して、青文字部分を追加赤文字部分を削除、数字部分を任意に変更。
↓   ↓   ↓
<% loop:list_service -%>
<div class=”tag-body”>
<div class=”tag-service”><% tag_service.title %>:初期表示は6件です。右下の「>>もっと見る」をクリックしてください。</div>
<div class=”tag-search”><a href=”<% tag_service.page_url(tag) %>” target=”_blank”>'<% tag.word %>’ でSeesaa全体を検索する</a></div>
<% if:tag_service.service_key eq ‘articles’ -%>
<% loop:list_data -%>
<div class=”tag-article”>
<div class=”tag-article-title”><a href=”<% article.page_url %>”><% article.subject %></a> <span class=”tag-article-posted”>[<% article.createstamp | date_format(“%Y/%m/%d %H:%M”) %>]</span></div>
<!–<div class=”tag-article-summary”><% article.entire_body | text_summary(75) | tag_strip %></div>–>
</div>
<% /loop -%>

(リンクではなく直接タグを紹介しているものは、私が編集したものです。間違いがないように気をつけてはおりますが、実行された場合のいかなる損失についても責任は負えません。アフターフォローとかもあんまりできません。)

記事検索のラジオボタンのチェックをはじめから「記事」のほうにする

編集箇所「デザイン>PC>コンテンツ>検索>コンテンツHTML編集」
サイドバーの検索のラジオボタン、デフォルトでは「Y!ウェブ」にチェックが入っています。何も考えずに検索窓にキーワードを入れて検索ボタンを押すと、ヤフーに行ってしまうということ。
でも多くの場合、わざわざブログについている検索窓を使う理由はそのブログ内を検索したいから。ということで、ブログ内を検索しようと思ったのにヤフーに行っちゃったというガッカリを防ぐために、チェックを「Y!ウェブ」ではなく「記事」にしました。

tnfuk [today’s news from uk+]: Seesaaさんのブログ内検索リニューアル&カスタマイズ方法

記事検索の結果が0件だったときのメッセージを表示する

編集箇所「デザイン>PC>HTML>追加したHTML」
記事検索して検索結果が該当なしだった場合、ただ記事スペースが空っぽのページが表示されます。何のメッセージもありません。記事スペースが空っぽなので、右サイドバーが左に移動してたりします。
これはさみしいので、せめてひとことメッセージを入れて、右サイドバーさんには右側でおとなしくしてていただくようにしました。

ヒット件数ゼロを表示 – ブログカスタマイズ

各記事に日付を表示する

編集箇所「デザイン>PC>コンテンツ>記事>コンテンツHTML編集」
1日に2つ記事を投稿することがありますが、その場合、日付は一つの記事にしかつきません。記事の境目がわかりにくく、「コメント入れるとこ間違えた」みたいなこともあるので、各記事に日付を表示することにしました。

全ての記事に日付を表示 – ブログカスタマイズ

自由形式を使う

編集箇所「デザイン>PC>コンテンツ>自由形式>コンテンツHTML編集」
自由形式を、簡単なカスタマイズで他のサイドバーコンテンツと同じ見栄えにすることができます。

「自由形式」を使う: Seesaaブログカスタマイズ&アフィリエイト

ページタイトル「記事タイトル:ブログタイトル」というのが今はデフォルトになっている様子

編集箇所「デザイン>PC>HTML>追加したHTML」
以前Seesaaブログのページタイトルは「ブログタイトル:記事タイトル」だったので、記事タイトルが前にくるようにカスタマイズをしていました。でも今はデフォルトで記事タイトルが前にくるようになっているらしいので、これについては手を加える必要はありません。
ただ、ブログタイトルを消し去って記事タイトルだけにする方法もリンク先の記事には併せて解説してありますので、お役に立つと思います。

タイトルバーの表示内容を変更: Seesaaブログカスタマイズ&アフィリエイト

カテゴリのツリー化

編集箇所「デザイン>PC>HTML>追加したHTML」
以前参考にさせていただいてたサイトさん「Des notes de KOHtan」「んー?( ̄ー ̄;)」がふたつともなくなってしまった様子なので、「Des notes de KOHtan」さんのタグを記事中に残してわかりやすくまとめてくださっている記事をご紹介します。

シス日記: カテゴリをツリー化

本来の設置場所は本体HTMLの一番下なのですが、「コンテンツ>PC>カテゴリ>挿入テキスト(下部)」に記述すれば表示が早いとの当時の情報を参考に、そのように設置して現在も使っています。

フッターにコピーライトを表示する

編集箇所「デザイン>PC>HTML>追加したHTML」
本体HTMLのいちばん下にあるfooter部分に、一行加えました。

<div id=”footer”>
<% content_footer -%>
</div>
の部分を探して、一行追加。
↓  ↓  ↓
<div id=”footer”>
<% content_footer -%>
<div class=”copyright”>Copyright (C) 2012 by <a href=”<% blog.page_url %>”><% blog.title %></a> All rights reserved.</div>
</div>

コピーライト部分の表示のしかたはご自由に。
デフォルトHTMLにはコピーライトが用意されてないのですが、デフォルトスタイルシートには「.copyright」というクラスが用意されています。たぶんユーザーがコピーライトを入れることを想定しているのでしょう。
(リンクではなく直接タグを紹介しているものは、私が編集したものです。間違いがないように気をつけてはおりますが、実行された場合のいかなる損失についても責任は負えません。アフターフォローとかもあんまりできません。)

ソーシャルボタンを設置する

編集箇所「デザイン>PC>HTML>追加したHTML」編集箇所「デザイン>PC>コンテンツ>記事>コンテンツHTML編集」、スタイルシート。

最近いろんなブログについているソーシャルボタン、なんだかカッコいいですね。このブログにもつけてみたい! でもこれが思ったよりも難関でした。

はじめに「設定>詳細設定>ソーシャルボタン」でいくつか設定してみました。するとイロイロ表示されました。ここで素朴な疑問。
どうしてまっすぐ一列に並ばないの?????散らかった靴みたい・・・

対処方法がサッパリわからなかったので、まあいいか、とやり過ごそうと一度は思ったのですが・・・やはりこの乱雑さは心が乱れる。そんなボタンつけなきゃいいじゃん、という潔さも持ち合わせがない(笑)。

結局Seesaaの設定は使わずに、各ソーシャルからボタンのタグをとってきて自分で設置という結果になりました。設置の段階でもわからないことが次々出てくるので検索しまくり、ようやく設置成功。しかし、firefoxなら普通に横並びになるのに、IEで見るとタテに積み重なっていて、これの対処に一苦労。

HTML+CSSによるウェブページ制作例-CSSの基本』の、メインメニューを横並びにするあたりを参考にしながら、どうにか横並びにすることができました。
(ul、liタグにidをつけて、スタイルシートでliにfloat:left;指定するという感じに。気をつけるのは、このリストタグのすぐ後に<div style=”clear:both;”></div>を入れること。入れないと後続のものの表示がおかしなことになります。)
とりあえず一列になったので、いいねボタンがずれてるとかは気にしないことに。

自分できちんと理解できていないことが多いので、間違いをさけるためにこの経過の詳細を書くのは差し控えます。思い出す元気も、出ないです。(+_+)

Seesaa独自のタグはどこで調べるのか

SeesaaのHTMLには独自のタグが使われているのですが、このタグの意味がわかれば、少なくとも、どのページに対する指示なのかくらいは見分けがつくようになります。

ブログのヒント』seesaaの公式ページです。カスタマイズはサポート外ということで詳しい解説はありません。


スタイルシートは見栄えを設定するだけなので、失敗しても自分のブログがカッコ悪くなるだけで済みます(?)が、HTMLの編集はそうはいきません。失敗したらブログが壊れるかもしれません。私が自力でやるなんて無理無理。何かをちょこっと追加するのが関の山です。

有難いことに、このHTMLカスタマイズの方法を公開してくださっている方が世の中にはたくさんいらっしゃるので、私もその親切に甘えさせていただきました。本当にありがとうございます。

*  *  *

この記事を書いた人
たまに、加賀 一
そだ ひさこ

子ども時代はもちろん、大人になっても昔話好き。
不調で落ち込んでいた30代のある日。記憶の底から突如、子ども時代に読んだ昔話の場面がよみがえる。その不思議さに心を奪われて、一瞬不調であることを忘れた。自分は昔話で元気が出るんだと気づいた。

そだ ひさこをフォローする
雑記帳
シェアする

コメント

タイトルとURLをコピーしました