ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
コメント  変数  FC2ブログ  

title="" で記事やコメント冒頭文を表示する

2008/09/18 (木)  カテゴリー: ブログカスタマイズ中級

FC2ブログの 変数 を使って、リンクにカーソルを合わせた時に表示されるヘルプチップ (title="" ) で 記事の冒頭文 や コメントの冒頭文 を表示させる方法について記事にしてみました。
ありのごとくあつまりて の トップページ で使っている title="<%recent_body>"title="<%rcomment_body>"(※後者は現在のテンプレートでは未使用です) について。 意外と使えると思うので載せてみました 

例えばトップページの ↓ のような部分 (カーソルを合わせて) 

1. 最近の記事に title="<%recent_body>"

【 参照 : 直接編集OK 整形済みコピー用ソース
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_body>">[<%recent_year>/<%recent_month>/<%recent_day>] <%recent_title></a></li>
<!--/recent-->
</ul>

トップページの 最近の記事 で使用。
記事投稿の際、自動改行はOFFにして 記事上部 を <br /> だけで編集するようにすると 見た目もキレイです。 (気にならなければ、改行を入れてもOKですが)

2. 最近のコメントに title="<%rcomment_body>"

【 参照 : 直接編集OK 整形済みコピー用ソース
<ul id="cview">
<!--rcomment-->
<li>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_body>">記事 「<%rcomment_etitle>」 へのコメント</a>
<div style="text-align:right"><%rcomment_name> <%rcomment_year>/<%rcomment_month>/<%rcomment_day></div>
</li>
<!--/rcomment-->
</ul>

<script type="text/javascript">
// <![CDATA[
var A=document.getElementById("cview").getElementsByTagName("a");
for (i=0;i<A.length;i++){
A[i].title=A[i].title.replace(/¥<br ¥/¥>/g," ")
}
// ]]>
</script>

以前、使っていたものです。 (このテンプレートでは未使用)
最近のコメント一覧で カーソルを合わせると コメント冒頭文 を表示させるように title="<%rcomment_body>" を使います。 ただ、title="<%rcomment_body>" のままだと <br /> がそのまま表示されてしまうので...スクリプトを使ってそれを防いでいます。

アクティブスクリプトが無効 (noscript) の場合でも、問題なく使えます。
ちなみに...以前は title="<%rcomment_body>" が普通に <br /> が表示されることもなく 使えていたようなので、この設定が改善されれば このスクリプト部分は必要なくなるかもしれません。

追記 : 2009/06/10 
W3C などでの 構文エラー (title="・・・<br />・・・" → ×) 回避のため、現在は スクリプト document.write を使用して全てを書き出しています。

さらに追記 : 2009/09/17 
現在のテンプレート (上のナビゲーション部分) では、title="" ではない部分で 単純に <%rcomment_body> を使っています。 本当は改行を入れたくないのですが。。。

3. おまけ : title="<%recent_body>" の応用

右側の ピックアップ View で使用。
ただのHTMLでの記述ですが、 ↑ 最近の記事 で実際に表示される HTMLソースを利用することで 作業を簡略化しています。

<ul>
<li> 該当箇所を この部分に貼り付けているだけです </li>
</ul>

私は、トップページを ソース表示 → 該当箇所を コピーして それを 貼り付けています。 初めて作る時には、ブログの設定 → 記事の設定 で 最新記事一覧 の表示件数を 一時的に増やせば簡単です

<!--recent--> <!--/recent--> などのような 繰り返しの変数 を使う場合、テンプレートやプラグインで使用する ソースの改行位置を工夫すると コピーし易くなることがあります。 お試しください


[ 参考 : テンプレート用 変数一覧|FC2ブログ公式マニュアル ]

キーワード検索 : コメント  変数  FC2ブログ  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-35.html

2008/09/18 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

0 Comment

コメントを投稿する 記事: title="" で記事やコメント冒頭文を表示する


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback