↑トップへ

スポンサーリンク
スポンサーリンク
2015年08月01日

Seesaa独自タグを使った記事一覧(タイトル+本文冒頭)表示

はろーわーるど。


このブログの記事の表示方法が変わりました。
今まではページに1記事、本文を全文表示していたのですが、それがページに5記事の記事タイトルと本文冒頭のみのリストになりました。


記事一覧.gif

サムネイルを付ける方法はわからなかった

プラグインも使ってなければJavaScriptとかも使ってません。
HTMLとCSS、それとSeesaaの独自タグのみでこの表示を実現する方法をご紹介したいと思います。
もちろん、記事を書くときに本文と追記を分ける必要もありません。
ただ、私自身自分のHTMLを改造しまくってデフォルトの状態がわからなくなってしまったので、具体的にどこにコードを挿入すればいいのかの案内が難しいのですが(テンプレートによっても違うかもしれませんし…)、理論だけでも何とかお伝えをすることができればと思います。


改造をする前に必ずバックアップを取る


詳しくは後述しますが、私、今回の改造中に一回やらかしてHTMLがおかしくなりました。
バックアップを取っていなかったらこのブログはそのまま閉鎖となっていたでしょう…。


いじるところは必ずバックアップを取ってから編集しないと、後悔しますよ!
私も責任とれませんし。笑


この記事を参考にされる際には一度最後まで読んでから作業に取り掛かられることをお勧めします。


参考にさせていただいたサイトや記事


今回、こちらの記事を参考にさせていただきました。



これらの記事を読んで実際のHTMLコードを見れば、多少どういう処理をしているのかが理解できると思います。


個別記事のみの設定と、それ以外の場合の設定を行う


今回いじるのは、デザイン→コンテンツ→記事のコンテンツHTMLです。


HTMLは長く、そのままだとすぐ自分がどこにいるかわからなくなってしまうので、できれば色分け等のできるエディタに張り付けてインデントやコメントを駆使して整理をしたほうが編集がやりやすくなります。


作業風景.gif

今回の作業風景(エディタはAtom)

その中に、<% if:page_name eq 'article' -%>という記述があります。
これが「もし個別の記事のページだったら以下のHTMLを有効にする」というタグです。
複数個所にこの記述がありますが、すぐ下に<div class="text">がある方です。


よく整理してみてみると、この部分は下記のような構造になっているのがわかります。


<% if:page_name eq 'article' -%>
〜(1)
<% else -%>
〜(2)
<% /if -%>

(1)の部分が個別記事ページの場合にのみ有効になる記述で、elseを挟んだ下部(2)は逆にそれ以外のページの場合に有効になる記述です。


ここを発見できたら、else以下の記述内の独自タグに手を加えます。


<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% /if -%>

↓変更

<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog)| tag_strip | shorten(100)%><% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% /if -%>

赤字が変更部分です。
tag_stripはHTMLタグを抜く命令で、shortenは指定バイト以降を省略する命令です。
これを<% article.first_body | bodyfilter(article_info,blog) %>の中に|で繋いで記述することで、「記事本文を(HTMLタグを抜いて)(指定バイト以降を省略して)表示」という命令にしています。
今回はshorten(100)とし、100バイト以降を省略させています。
ちなみにarticle.first_bodyとは記事投稿画面での「本文」のことで、「追記」は含まれません。
もともと追記を使っていない方は気にしなくても問題ありませんが、参考まで。


個別記事ページにのみ欲しいコンテンツを移動させる


さて、これで本文を丸めて冒頭のみ表示させる処理は出来ましたが、このままだとコメントフォームとかは残ったままだと思います。


記事一覧画面に表示させたくないものは、個別記事ページのみの場所へ移しましょう。
<% if:page_name eq 'article' -%>と<% else -%>の間、(1)の部分ですね。


ifとかdivとかの構造を見誤って移動させるとバグるので、ここは注意が必要です。
常にバックアップを残しつつ、コメントを駆使して少しづつ移動させるといいでしょう。


そして、ここでもう一度リマインドです。
今編集しているのは、デザイン→コンテンツ→記事→コンテンツHTMLです。
デザイン→HTMLではないので注意しましょう!

私はこのタイミングで編集したHTMLコードをデザイン→HTMLの方に張り付けてしまい、当然のことながら大きなエラーが発生しました。
プロでない方は何度も確かめながら保存を繰り返すことになる方が多いと思うので、バックアップは両方のHTMLを取っておきましょう。
貼り付けミスをしても取り返しがつくようにです。


デザインを整えて完成


HTMLが完成したらCSSでデザインをそれっぽく整えてあげれば完成するはずです。
各記事は記事タイトルをクリックしたら個別記事ページに行けるようにデフォルトでなっていると思うので、これで記事タイトルと本文冒頭のみの記事一覧リストを作成することができたかと思います。(テンプレートにもよるかもしれませんが。)


まとめ


Seesaa独自タグのif文の構造さえ理解できれば、追加の記述はほとんどないのでそんなに難しくないと思います。
むしろバグらないようにいろいろタグを移動させる方が私は大変でした…。


間違いや漏れがあった場合はご容赦ください。
ご指摘あれば修正いたします。
繰り返しになりますが、自己責任で、手に負えると判断された場合のみカスタマイズをお願いします。
Seesaa側でも技術的サポートはされていませんので、コードを消してしまったりしたら悲惨です…。


以上、ご興味があればやってみてください!


スポンサーリンク

スポンサーリンク
にほんブログ村 小遣いブログ SOHO・在宅ワークへ
posted by あらいぐま at 00:39 | Comment(0) | TrackBack(0) | Seesaaカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

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