ブログで小説！

テンプレート“View”で全記事表示すると、長いタイトルは切れてしまいます。
あれ？と思って、ソース拝見して、驚いたのですが。
長いタイトルを「途中で切ってコンパクトに表示する」ために、色んな設定がしてあったのですね。

それに感動^^する一方で、ですね。

モノカキは言葉フェチなので（え？あたしだけです？？）、自分でつけた作品のタイトルが切れてしまうのは、ちょっとカナシイ（あ？　あたしだけだったらいいんです、この先は読まなくて）

というわけで。「タイトルを途中で切ってコンパクトに表示するための、種々の設定を切る方法」、公開。（だーかーらー。タイトル切れてOKの方、あるいは切れないくらい短いタイトルばかり使う方は、読まなくていいんですってば）

（PCafeさん、ごめんなさいm(_ _)m）

下記変更導入後はこうなります。（ついでに、訪問済みリンクの色も“Odin”とカラーコーディネートして変えてあります）

---

変更点1
「テンプレート設定」→「View、修正」→「HTMLの編集…」の表示の下の枠の中、

<!--titlelist_area-->
<ul id="EL"><!--titlelist-->
<li id="a<%titlelist_year><%titlelist_month>c<%titlelist_category_no>e<%titlelist_eno>">
<span><%titlelist_year> <%titlelist_month> <%titlelist_day> <%titlelist_youbi></span>
<a href="<%titlelist_url>" title="<%titlelist_body>"
onmousedown="ed(<%titlelist_eno>)" onkeydown=""
onmouseup="clearTimeout(ED)" onkeyup="">
<%titlelist_title></a>
<em><%titlelist_category></em>
</li><!--/titlelist--></ul>
<!--/titlelist_area-->

の部分を下記のように変更

<!--titlelist_area-->
<ul id="EL">
<!--titlelist-->
<li id="a<%titlelist_year><%titlelist_month>c<%titlelist_category_no>e<%titlelist_eno>">
<a href="<%titlelist_url>" title="<%titlelist_body>"
onmousedown="ed(<%titlelist_eno>)" onkeydown=""
onmouseup="clearTimeout(ED)" onkeyup="">
<%titlelist_title></a><br>
<span class="num"><%titlelist_year>/<%titlelist_month>/<%titlelist_day> - </span>
<span class="cat"><%titlelist_category></span>
</li><!--/titlelist--></ul>
<!--/titlelist_area-->

変更点2
さらに、スタイルシートの編集 ……の枠の中にある

a {color:#898;text-decoration:none}
a:active {color:#f00;}
a:hover {color:#c00; }

の部分を下記のように変更

a {text-decoration:none}
a:link {color:#557;}
a:visited {color:#898;}
a:active {color:#f00;}
a:hover {color:#c00; }
span.num {font-size:smaller;font-family:'Courier New','Courier',sans-serif;color:#898;}
span.cat {font-size:smaller;color:#898;}

変更点3

#EL li {width:480px; height:1.2em; overflow:hidden; clear:both;}
#EL span {display:block; margin:0; width:120px; float:left; }
#EL a {display:block; width:240px; float:left; overflow:hidden; font-weight:bolder;}
#EL em {display:block;width:120px; overflow:hidden; float:left;}

の部分を下記のように変更

#EL li {line-height:1;margin:7px 0px 7px 25px;}
#EL span {}
#EL a {font-weight:bold;}
#EL em {}

関連記事

• “Odin”記事のあとに目次画面へリンク (2006/04/14)
• テンプレート“View”で長いタイトルを表示 (2006/04/17)
• “改造手順”の共通項 (2006/05/13)