top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_526

リスト表示頁:ちゃんと本文抜粋つきのリスト頁じゃなきゃな。 ・・・ 【FC2ブログカスタマイズ】

 2008-12-04
 2日前から、ブログのカスタマイズが Myブームだ。
 やりたいこと、(先ほどのパンくずリストに続いて)
 もうひとつ 片付ける。

  ・検索結果や、カテゴリ別の頁 月別の頁
   リスト表示がしたい!

   通常のサイトの感覚なら、これらは
   当たり前で(?) そうなる。

   この「リスティング」の頁において、
   だらだらとすべての記事が表示されるのをなんとかしたい!

 でも、
   ・タイトルだけのリストでは面白く無いな
   ・本文の抜粋を実現したい!
    (HTMLタグとんなきゃ)

で、それから、どうした・・・
 ◎創るmetaboy で、リスト表示頁を考える

 追記に ▼

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more**************************************************
創るmetaboy で、リスト表示頁を考える
**************************************************

 リスティング自体は、これも
 FC2ブログの 強力な変数群で
 いとも簡単。
 ちょっと考える必要があるのは、
  ・本文抜粋 ・・・ だな。
   (HTMLタグ とんなきゃ)

【顛末記録】
 ■2008年12月4日
  ◇情報の収集

   参考になったのは
    □Supprimer les tags html dans un texte (StripHTML)
     ( いろんな言語でのHTMLタグ削除例 )
   非常に勉強になりました。ありがとうございました。
   (いや、違うな)
   Thank you for verymuch!

  ◇変数の理解と整理

   ・FC2ブログで利用できる変数
    >>> FC2ブログ:テンプレート中で使える変数一覧

    ●利用するもの

     [<!--category_area-->~<!--/category_area-->]
      ・カテゴリーアーカイブ画面に表示する時
       ※どの場所でも有効

     [<!--not_category_area-->~<!--/not_category_area-->]
      ・カテゴリーアーカイブ画面 以外 に表示する時
       ※どの場所でも有効

     [<%topentry_no>]
      ・エントリーの番号
       ※頭に付けよう

     [<%topentry_link>]
      ・記事へのリンク

     [<%topentry_title>]
      ・記事のタイトル

     [<%topentry_body>]
      ・記事本文
       ※最初の100文字を切り出すぞ


  ◇設置

   □(まず)ボディ部分を
    大きく2つに分ける
    ・カテゴリ表示 の場合
    ・カテゴリ表示 ではない場合 だ。
<!--category_area-->
<!--/category_area-->
<!--not_category_area-->
<!--/not_category_area-->

 今まで記述していた 本文の
 ・エントリー部分は
  <!--not_category_area--><!--/not_category_area-->
  に、移動だ。

   □(次に)
    <!--category_area--><!--/category_area-->
    に、単に情報を取得して基礎HTMLを書き込む

    ※テーブルタグは使いたくないので、div でボックスレイアウト
     したが、結構手こずった。
<div class="no_cates"><a id="<%topentry_no>" name="<%topentry_no>"></a><%topentry_no> <img src="(星のアイコンを作った)" width="14" height="14" border="0" alt="" style="vertical-align:middle;"></div>
<div class="title_cates"><a href="<%topentry_link>"><%topentry_title></a></div>
<div id="body_cates<%topentry_no>" style="float:right;height:30px;width:440px;padding: 0px 5px 10px 5px;text-align: left;vertical-align:top;font-size:10px;"><%topentry_body></div>
<div style='clear:both;'></div>


   □その下に
    本文値を取得して、JavaScript で
     ・まず、HTMLタグ取り除き
      (プレーンなテキストにして)
     ・最初の200文字にする
<script type="text/javascript"><!--
if( document.getElementById ) {
var temp_body = document.getElementById('body_cates<%topentry_no>').innerHTML;
temp_body = temp_body.replace(/<\S[^><]*>/g, "");
temp_body = ">> " + temp_body.substring(0,100) + ".....";
document.getElementById('body_cates<%topentry_no>').innerHTML=temp_body;
}
--></script>


   □それぞれのスタイルシート
    書き上げて・・・
/* カテゴリー頁用              */
.no_cates{
float:left;
height:30px;
width:60px;
padding: 0px 5px 10px 5px;
text-align: right;
vertical-align:top;
}
.title_cates{
float:right;
height:30px;
width:430px;
padding: 0px 5px 10px 5px;
color: #02b300;
font-size:14px;
font-weight:bold;
;text-align:left
vertical-align:top;
}


  ◇調整
   (ここで またもや)少々、はまった。
   ・またブラウザ互換で、
    IEFirefox で、動きが変わるのだが
    (いろいろ試行錯誤して)対応

 ふぅ~。

 これで、
  ・カテゴリ頁は リスト表示になった。
   ※管理画面から、表示件数を10件にする

  ご興味あれば、右サイドバーの
  どれかの「カテゴリ」をクリック
  してみてください

  後は
  ・検索結果頁
  ・月別頁 だな。(後日にしよう)
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/526-c3fa6102
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。