トップ > ブログカスタマイズ > シーサーブログにパン屑リストは付くか?
07. 24. 2005

シーサーブログにパン屑リストは付くか?

一応付くんですけどね・・・



8/15追記
3カラムのSeesaaBLOGにパン屑リスト取り付け成功しました。
近日中に取り付け方の解説を投稿します。
基本的には、ここでの説明の延長線的なやり方なのです。興味のある方は、このページも目を通しておいてください。



シーサーブログの3カラム表示仕様だと、見栄えが整わないんです。
それに、このブログはアメブロの”まねっこ”デザインにこだわってるので、ちょっとパスしました。

・・・でも、右サイドバーで2カラム表示なら、それなりの見栄えが実現できますョ!(^_^;)

参考:実際にパン屑リストを付けているシーサーブログがこちらにあります。

パン屑リストって何?

ブログ(blog)とかホームページ(HP)を見てて、今見てるページがサイトのどの辺なのか解かりづらい時ってないですか?

また、他のページも見たいのに、サイトの概要が判りにくかったり、移動の手段に困ったりする時もあるんですよね。

そこで、【トップページ(リンク)】 > 【カテゴリやアーカイブ名(リンク)】 > 【記事タイトル】・・・のように、現在のページがサイト内でどの位置にあるかを視覚的に表したのが「パン屑リスト」と呼ばれるようです。


例えば、このページのパン屑リストなら・・・


トップページ > ブログカスタマイズ > シーサーブログにパン屑リストは付くか?


・・・っという階層のリンクリストをヘッダー下部に表示することで、現在位置の認知性や上位ページへの移動が楽になり、訪問者のサイト閲覧ストレスを軽減することができる訳ですね。

※「パン屑リスト」は「訪問者へのサイトナビゲーションを補助する」目的の他、「検索エンジンのサイト内クロールの道しるべ」としての役割を担っている場合もあります。

シーサーブログ(SeesaaBLOG)にパン屑リストを付ける

・・・苦しいんですが、一応何とかなります。

でも、シーサーブログ(SeesaaBLOG)のシステム変数仕様から、パン屑リストの実装は案外厄介です。
何しろ、シーサーでパン屑リストを付けてる人を見たことないですから…♪

人がやってないと言うことは、やおらやる気が出てくる変人へと僕は変化(へんげ)するんです!(^。^)

 

A君:「・・・犬夜叉かおまえは!?・・・」


・・・


・・・「ガルルルルッ・・・」


・・・



本来なら、ブログヘッダー最下部へ付けたい所なのですが、どうやっても無理でした。
(CSSで絶対配置も試みたけど、このブログは「ゆうこと」聞いてくれないので/(-。-)\ こまった〜)

※カテゴリやアーカイブ(年月)などは、該当するシステム変数がローカルのため、ヘッダー部に付けると期待値を返しません。これらのシステム変数が、HTMLテンプレートのどの位置でも、期待する値を返すグローバル変数ならOKなんですけどね。

※どなたか、カテゴリ名、カテゴリURL、アーカイブ名、アーカイブURLをグローバルに返す変数名をご存知の方、ご教授ください。または解析したらおしえてね・・・(^_^;)

※隠し変数や隠し関数の探し方:

  1. 公開されてる関数や変数名から、シーサーシステム担当者が使いそうなキーワードを列記します。
  2. ブログのHTMLテンプレートにそれらのキーワードを用いた独自タグを埋め込み、保存、再構築し動作を確認する。
  3. ラッキーにも目的の変数が見つかったらめっけもん!
  4. 僕にこそっとおしえる(これが大事!)

 

そこで、この変数の有効範囲への配置を余儀なくされます。
具体的には「メイン記事のHTML上部」となります。

すると次なる問題が発生します。左にサイドバーがあると、「かっこわり〜」んです・・・。
結論として【2カラム右サイドバー表示】テンプレートのみ、イメージを崩さず【パン屑リスト】が付けられることになりますね。

※それ以外の表示パターンは、『へんてこ』なパン屑リスト表示になります。・・・っていうか、みっともないのでお奨めしません。

パン屑リストを付ける位置を確保する

※実施する場合、あなた個人の自己の責任と判断で行ってください。僕の誤った記述、及び、勘違いなども含め、旧に復せなくなっても一切責任を持てません。(…っていうか、面倒見切れません…)

1.ブログの管理画面から、【デザイン】→【コンテンツ】→【記事(ページコンテンツ)の設定】と移動します。

2.更に右側上部の【コンテンツHTML編集】をクリックすると、記事コンテンツのHTMLテンプレートが表示されるので、これを編集する訳です。

3.HTMLテンプレートの上から初めに・・・

 

<% content.header -%>
<!-- Content -->

・・・という記述があると思います。

さらに、下を見ていくと・・・

 

〜 中略(ナビゲーションリンクのコード) 〜

<% loop:list_article -%>

・・・っという記述があります。

これにはさまれたコードは、シーサーブログ(SeesaaBLOG)特有の「個別記事」、「アーカイブ」などで表示されるナビゲーションリンクです。
このままでは、パン屑リストナビゲーションリンク2段表示になります。
見た目も、またまた「かっこわり〜!」ので、ページ下部へ移動するなどの処理が必要になります。

※ナビゲーションリンクは「トップページ」と「カテゴリ」では表示されません。

このブログ(当ブログ)では、ページの最下部(または、コメント表示の上部でもOK)へ移動しています。

※この個別記事ページの最下部を見てください。シーサー標準のナビゲーションリンクがあるでしょ♪ これを移動するか、削除しないとパン屑リストと2段表示になってしまうと言うことです。

具体的には、以下のように該当するHTMLコードを移動します。

/* 上部省略 */

</div>
<% /if -%>

<% /if -%>

/* ここにナビゲーションのコードを移動 */

<!-- F_navi ・・・以下は移動するナビゲーションコード -->
<% if:page_name eq 'article' -%>
<div class="navi">
<% if:previous_article -%>&lt;&lt;<a href="<% previous_article.page_url %>"><% previous_article.subject | tag_break %></a>| <% /if -%>
<a href="<% blog.page_url %>">Main</a>
<% if:next_article -%>| <a href="<% next_article.page_url %>"><% next_article.subject | tag_break %></a>&gt;&gt;<% /if -%>
</div>
<% /if -%>
<% if:page_name eq 'archive' -%>
<div class="navi">
<% if:previous_archive -%>&lt;&lt;<a href="<% previous_archive.page_url %>"><% previous_archive.createstamp | date_format("%Y年%m月") %></a>|<% /if -%>
<a href="<% blog.page_url %>">Main</a>
<% if:next_archive -%>|<a href="<% next_archive.page_url %>"><% next_archive.createstamp | date_format("%Y年%m月") %></a>&gt;&gt;<% /if -%>
</div>
<% /if -%>
<% if:page_name eq 'category' -%>
<% /if -%>
<!-- F_navi end -->


<!-- /Content -->
<% content.footer -%>
/* コンテンツHTMl最下行 */


※これでパン屑リストの表示位置が確保できました。でも、判りずらい時はコメント欄にご質問くださいね。

いよいよ、パン屑リストを取り付ける

1.ここまで来たら、次にパン屑リストのコードを書きます。入れる場所は前述で場所をあけた「ナビゲーションリンク」位置になります。

/* コンテンツHTML最上部 */
<% content.header -%>
<!-- Content -->

/* パン屑リストのコードを挿入(元ナビゲーションリンクがあった場所) */

/* ここまで */

<% loop:list_article -%>

/* ・・・ 以下略 ・・・ */

JavaScriptで実現困難な部分を「ばか」にして実装してるので結構苦しいですね。。。(^_^;)

※個別ページはHTMLで直接リンクされますが、カテゴリとアーカイブページではJavaScriptで苦しくもループ書き出しを回避してます。

2.保存して、ブログ全体を再構築したら出来上がり♪

うまく出来ましたか?
これまで、だいぶ解かりずらい記述だったですが、本日(2005/08/07)思いっ切り、文面の見直しを実施しました。

※それでも、説明しきれてない部分があると思います。なので、ご意見、ご要望などあればコメント欄へ足跡どぉ〜ぞ。

※ページ内の再更新で、できるだけお答えしたいと思います。



posted by seoblog | | Comment(1) | TrackBack(2)
この記事へのコメント
ブログ開設おめでとうございます!

アクセス数を上げるために当コミュニティサイトに登録しませんか?
http://profile.zmapple.com/cgi-bin/profile.cgi
より多くのひとに貴方のブログを見てもらえます。

参加するにはこちらからが便利です
http://profile.zmapple.com/cgi-bin/profile.cgi?mode=edit&title=%3F%3F%3FS%D2%3F%3F%3F%3F%3F%3F%3FG%3F%3F%3FW%3F%3F%3F%3F%3F%3F%3F%7D%3Fj%3F%3F%3FA%3F%3F&address=http%3A%2F%2Fseoblo%2Eseesaa%2Enet%2F


お問い合わせはコチラから
http://profile.zmapple.com/cgi-bin/fmail/cmfmail.cgi
Posted by みんなのプロフィール at 2005年07月24日 13:34
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/5317976

シーサーブログのカスタマイズ実施中です。
Excerpt: デザインと色づかいは気に入ってるのですが、今一つ使いづらい・・・。 「もうちょっと見やすく、使い易くなるとうれしいな!」っと言うことで、今日はブログをいじってます。 シーサーブログのカスタマイズの..
Weblog: おとりよせグルメマップ(別館)
Tracked: 2005-07-24 13:56

Seesaa擬似サブカテゴリ化(1)
Excerpt: ひさしぶりにJavascriptイジってると驚くことばかりです。 WinXP上でなぜかローカルにあるスクリプトが実行されなくなってるし(汗 セキュリティ上しょうがないんでしょうけどねぇ・・・。 ..
Weblog: ASURAA EX
Tracked: 2006-02-11 01:19
×

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