Seesaa BLOG カスタマイズ
検索結果のページをカスタマイズ : PERSONA@BLOG
http://persona-blog.seesaa.net/article/2864490.html
上記の記事では、私が試行錯誤のあげく、このBLOGのカスタマイズに成功したという記事が書かれていますが、実際のカスタマイズの方法については詳しく書いていません。
本来でしたらカスタマイズ方法の記事も書きたかったのですが、なぜ書かなかったのか?!
答えは、10個のBLOGがあったら、おそらくカスタマイズ方法は10個別々のものになるからです。
厳密に言うと、おおまかなカスタマイズ方法は同じなのですが、細部が各BLOGの今までのカスタマイズの状態によって異なってきます。
・今までにカスタマイズをした事が少ないBLOGでは、楽チン♪
・今までにカスタマイズをした事が多いBLOGでは、苦痛・・・。(笑)
今回は、記事のページと検索結果のページのレイアウトを統一するためのおおまかなカスタマイズ方法を紹介させていただきます。
HTMLの知識の有無によって、難易度は大きく変わってくるカスタマイズになると思います。
カスタマイズに慣れていない方の場合、BLOGがぶっ壊れる可能性も大です。
管理画面 > デザイン > HTML
と進み、適用にチェックの印が付いている()HTML名をクリックします。
HTML内の下記の部分が、検索結果の表示部分にあたります。
※下記の部分を、この記事内において今後『A』と表現します。
<% if:page_name eq 'search' -%>
<% loop:list_article %>
<div class="blog">
<h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></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="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%></div>
</div>
</div>
<% /loop %>
<% /if -%>
今表示されているページの上部に、下記のような部分があると思います。
テンプレート | コンテンツ | スタイルシート | HTML | モバイル |
『コンテンツ』の上にマウスカーソルをあわせて、右クリックで『新しいウィンドウで開く(N)』をクリックします。
※上記はIE(Internet Explorer)での方法であり、要は別のウィンドウやタブで『コンテンツ』を開いていただければOKです。
新しいウィンドウで開いたページを、
記事 > コンテンツHTML編集
と進みます。
HTML内の下記の部分が、記事の表示部分にあたります。
※このページのHTMLを、この記事内において今後『B』と表現します。
<% loop:list_article -%>
<div class="blog">
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:Trackback="http://madskills.com/public/xml/rss/module/Trackback/"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
rdf:about="<% article.page_url | xml %>"
trackback:ping="<% article.tb_url | xml %>"
dc:title="<% article.subject | nl2br | tag_strip | xml %>"
dc:identifier="<% article.page_url | xml %>"
dc:description="<% article.get_excerpt | nl2br | tag_strip | xml | text_summary(240) %>"
dc:creator="<% article.nickname | nl2br | tag_strip | xml %>"
dc:subject="<% article_category.name | nl2br | tag_strip | xml %>"
dc:date="<% article.createstamp | date_format("%Y-%m-%dT%H:%M:%S+09:00") %>"
/>
</rdf:RDF>
-->
<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>
<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %></div>
<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %></div>
<% /if -%>
<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%>
<% if:article_weather -%>
| <% article_weather.state %> <% article_weather.weather_emoji -%>
<% /if -%>
<% if:diet_log -%>
| <% if:diet_log.condition == -2 %>絶不調<img src="<% site_info.blog_url %>/img/icon/5.gif" width="16" height="17" border="0" alt="絶不調" /><% /if -%>
<% if:diet_log.condition == -1 %>不調<img src="<% site_info.blog_url %>/img/icon/4.gif" width="16" height="17" border="0" alt="不調" /><% /if -%>
<% if:diet_log.condition == 0 %>普通<img src="<% site_info.blog_url %>/img/icon/3.gif" width="16" height="17" border="0" alt="普通" /><% /if -%>
<% if:diet_log.condition == 1 %>好調<img src="<% site_info.blog_url %>/img/icon/2.gif" width="16" height="17" border="0" alt="好調" /><% /if -%>
<% if:diet_log.condition == 2 %>絶好調<img src="<% site_info.blog_url %>/img/icon/1.gif" width="16" height="17" border="0" alt="絶好調" /><% /if -%>
<% /if -%>
<% 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 -%>
<% if:style.disp_category %>| <a href="<% article_category.page_url %>"><% article_category.name %></a><% /if %>
</div>
</div>
</div>
<% /loop -%>
Aの の部分を、Bと同じ内容にします。
Aの の部分を、Bと同じ内容にします。
Aの の部分を、Bと同じ内容にします。
Aの の部分を、Bと同じ内容にします。
Aの の部分を、Bと同じ内容にします。
※特にカスタマイズが行われていない場合は、上記内容はすでに同じ内容になっています。
その場合は、そのままでOKです。
さて、Aの の部分なのですが、どう記事を書いたものか。。。(爆)
検索結果のページのレイアウトに関して、この部分を説明するのが一番めんどうなのです。。。(笑)
だから、あまり他のBLOG様でも検索結果のページのレイアウトの記事を書かないのだと思います。
書いても絶対に、この黄色の部分の説明がめんどうで、説明しにくく、
「よくわかりません。。。(;_;)」
「前よりも変になりました。。。(;_;)」
「どうしてくれるのよ。。。BLOG壊れたじゃん。。。(;_;)」
のようなコメントが多発しそうだからです。(爆笑)
とりあえず・・・、Aの の部分は・・・、
下記のどれかにして下さい。(ややこしいから私が決めちゃいます。(爆笑))
※もちろんご自分でカスタマイズできる方は、お好きなようにカスタマイズして下さい。
1)あえてカスタマイズせずにこのまま。
<% article.entire_body | text_summary(240) %>
【参考リンク】
ブログ・よくある質問と回答: 代表的な関数
http://blog-faq.seesaa.net/article/2413154.html
2)記事内容をすべて表示する。
<% article.entire_body %>
3)『続きを読む』の前の部分の記事内容までを表示する。
<% article.first_body %>
以上で、おわりです。
XHTML対策
XHTML対策
Seesaa BLOG カスタマイズの最新記事
XHTML対策
いろんな方法があり目移りしそうですが、参考にさせていただき自分なりのブログを作りたいと思います。
BLOGが自分の好きな形になっていくのって、楽しいし嬉しいですよね!
お役に立てる記事があれば、私も嬉しく思います!
頑張って下さいね!
ご訪問、コメントありがとうございました!(^o^)ノ
検索結果のデザインをどうしても変えたくて検索していたらこちらにたどり着きました。
たくさんのカスタマイズ法が紹介されていて、しかも他では紹介されていないようなこともあってとても参考になります。
で、本題の検索結果のカスタマイズなのですが、こちらで紹介されているように「続きを読む」の手前までの表示にしてみたのですが、それでもちょっと文が長く表示されてしまうので、もう少しすっきりと1記事5,6行程度だけ表示出来るようにさせたいのですが、そのようなことってできるのでしょうか?
「続きを読む」の文言を使っていない記事もあるので、そういう記事だと全部表示されてしまい、なんだか見づらくなってしまって・・・。
現在は
<div class="text"><% if:article.convert_breaks %><% article.first_body | nl2br %><% else %><% article.first_body %><% /if %>
というふうにしています。
こちらのサイトだととてもきれいに結果が出ますよね?
「続きを読む」の前までが短いのかな??
もし何かお分かりでしたら助言をいただきたいのですが(@_@;)
私は最近カスタマイズから遠ざかっているので、このBLOGで扱っている内容は、かなり古い時代のSeesaaに対してのカスタマイズの紹介になってしまっている部分も多々あると思います。
<% if:article.convert_breaks %>という変数も私の知らないものでしたので、ネットをさまよい調べたのですが、結局何の変数かわからずじまいでした。(;_;)
でもお力になりたいので、がむばります!
まず私のBLOGでは、
<% if:article.convert_breaks %><% article.first_body | nl2br %><% else %><% article.first_body %><% /if %>
の部分は、
<% article.entire_body | tag_strip | shorten(200) %>
となっています。
ただ、私のやつはオススメしません。
古いカスタマイズ方法を使うと、今後Seesaaがバージョンアップした際に、新機能等に対応できずに、自力で何とかするか、結局一番最初の状態に戻さなければならない状態になる事が大半だからです。
どういうものがお好みなのか、微妙な部分がわかりかねましたので、下記にいくつかのパターンを記述します。
たださっきも書きましたが、私自身が<% if:article.convert_breaks %>の振る舞いを把握できていないために、ひょっとしたら上手くいかない場合があるかもしれませんので、もし上手くいかなかった場合のために、元に戻せるように、現在の状態をメモ帳等に保存した後に、試すようにして下さいませ。
基本的にすべてのパターンにおいて、(20)の数字を(10)とか(50)とか好きな数字に変更して下さい。
この数字がどれだけの容量の文字数を表示するのかを意味する部分となります。
最初は(20)のままで、カスタマイズが上手くいくようだったら、その後に変更するのをオススメします。
1)『続きを読む』が必要で、改行や画像やリンクや文字の装飾も反映させたい場合
<% if:article.convert_breaks %><% article.first_body | nl2br | text_summary(20) %><% else %><% article.first_body | text_summary(20) %><% /if %>
2)『続きを読む』が必要で、改行や画像やリンクや文字の装飾は反映させない場合
<% if:article.convert_breaks %><% article.first_body | tag_strip | shorten(20) %><% else %><% article.first_body | tag_strip | shorten(20) %><% /if %>
3)『続きを読む』は不要で、改行や画像やリンクや文字の装飾は反映させたい場合
<% if:article.convert_breaks %><% article.entire_body | nl2br | text_summary(20) %><% else %><% article.entire_body | text_summary(20) %><% /if %>
4)『続きを読む』は不要で、改行や画像やリンクや文字の装飾も反映させない場合
<% if:article.convert_breaks %><% article.entire_body | tag_strip | shorten(20) %><% else %><% article.entire_body | tag_strip | shorten(20) %><% /if %>
上記のパターン内に出てくる
article.first_body とか、
article.entire_body とか、
text_summary とか、
shorten とかは、
http://persona-blog.seesaa.net/article/3095041.html
を参考にしてみて下さい。
基本的に『半角スペース + | + 半角スペース』の繰り返しで、命令文をつなげている形となります。
上記のパターン以外のお好みのカスタマイズに辿り着けるかもしれません。
上手くいくといいのですが。。。
上手くいかなかったら、ごめんなさい。。。
その時は、また声をかけて下されば、がむばります!(・▽・)
とっても丁寧な解説で感激してしまいました(≧θ≦)
<% if:article.convert_breaks %>〜<% else %>〜<% /if %>は記事の自動改行を判別するタグのようです。
text_summary()が文字数だろうというのは想像していたのですが、どうしてもうまくいかなくて。
改行はされるのですが表示がうまくいかなかったんですよね(:_;)
こちらで説明していただいた方法ですが、2番目と4番目は問題なく表示されました^^。
ただ、1番目と3番目は、()の数値によってはレイアウトがかなりおかしくなってしまいました。
数値(20)でもダメでした。
途中まではきちんと表示されるのに後半いきなりサイドバー落ちしてしまったり。
それからちょっと文字では説明のしにくい状態になってしまったりなども・・・。
改行を入れたかったので希望とすれば3番目なのですが、とりあえず4番目の方法で表示させてみたらキレイに表示出来ましたし、
「あ、これでも問題なくイケるな。」と思ったのでこれでいこうと思います☆
とっても助かりました!
ありがとうございました☆
> <% if:article.convert_breaks %>〜<% else %>〜<% /if %>は記事の自動改行を判別するタグのようです。
なるほど!
ありがとうございます!
こういう知らない事を教えていただけると、すごく嬉しいです!
情報のご提供、ありがとうございました!
前回の返信時に、私自身のBLOGでも1)〜4)を試して確認はしたのですが、1)と3)のようにタグを有効にさせると、どうしても見た目が定まらない感じでした。。。
とりあえずではあるのですが、お気に入りの状態になったようですのでよかったです!(^o^)ノ