人さまのブログを見ていた時、「カテゴリー」や「マンスリー」をクリックすると記事のタイトルだけ一覧表示されるブログがあって、「これは見やすくていいなぁ」と常々思っていました。
タイトルだけではなくて本文も全部表示されると、すごく下に長くスクロールしなくちゃいけないし、一度に表示できる記事数も3～5つ位が限度になってしまう。
でもJugemのテンプレートはどれもその仕様。
うーん、なんとか改良する方法はないものか、と調べていたら見つけました。
javascriptで可能になるようです。
で、さっそく試行錯誤しながらHTMLとCSSをいじってこのブログを改良できました。
（カテゴリーメニュー等をクリックするとわかりまーす）
変更したのは主に3か所。
<body>
タグを
<body onload=”javascript:initval();” id=”{month}{cid}”>
に変更
タイトルタグ
<div class=”entry_title”>{entry_title}</div>
を以下に変更
<h2 class=”entry_title”><a href=”{entry_permalink}”>{entry_title}</a></h2>
CSSに以下を追加
/* タイトル一覧表示———————————————— */
body#month .entry_body {display: none;}
body#cid .entry_body {display: none;}
body#month .entry_more {display: none;}
body#cid .entry_more {display: none;}
body#month .entry_state {display: none;}
body#cid .entry_state {display: none;}
body#month .entry_author {display: none;}
body#cid .entry_author {display: none;}
body#month .entry_title {font-size: 13px;}
body#cid .entry_title {font-size: 13px;}
body#month .entry_date {padding: 0px 20px 3px 0px;}
body#cid .entry_date {padding: 0px 20px 3px 0px;}
body#month .entry_bottom {padding: 0px 20px 3px 0px;}
body#cid .entry_bottom {padding: 0px 20px 3px 0px;}
コメント
おぉ～、これはいい感じですね～。
さっそくやってみよ～。ってJUGEMは放置ぎみなんだけどｗ
周りにあまりHTMLとCSSやjavascriptの話できる人いないから
いくらさんが出来るのわかったの、うれしいなぁ～。
BBちゃん
CSSとか難しいよね（~_~）
私は全然素人なのだよー
日々勉強中です！