プライベートモードで閲覧中です。

sugar pot : 【私家版・はじめてのFC2ブログカスタマイズ】#6 記事の部分

ほろ苦い夢のかけらのおすそわけ

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

trackback

【私家版・はじめてのFC2ブログカスタマイズ】#6 記事の部分

2005年07月03日(日) コメント:2 トラックバック:0

記事(エントリ)ヘッダ

さていよいよ記事の部分である。

オリジナル説明文
各記事はsectionブロックにて記事タイトル・記事本文・記事フッターを包含しています

┌─────────┐
│ │
│ entry-header │ 記事のタイトル
│ │
│ entry-body │ 記事本文
│ │
│ entry-footer │ 記事の作成日・カテゴリ名
│ │ コメント・トラックバック
└─────────┘



<!--
///
/// 記事部分ここから
///
-->

たいていのテンプレートにはこのような<!--と-->で囲まれたコメントアウトが存在する。コメントアウトはソースを分かりやすくするためにつけられる。ブラウザ上では見えないが、ソースを見るときには心強い手がかりとなる。

自分でブログツール(ブログペットなど)を設置する場合にも、必ずコメントアウトするように心掛けるとよい。後でほかのカスタマイズを加えたり、テンプレートを変更する場合などの作業が楽になる。

<!--topentry-->

さて記事部分である。<!--topentry-->~<!--/topentry-->で囲まれた部分に、複数の記事が表示される。表示される数は、環境設定>環境設定の変更>ブログの設定>最初に表示されるエントリーの数。ここで規定される。変更したい場合は、この数字を増減する(1~25)。

<div class="section" id="a<%topentry_no>">

ここからはsectionというclassが与えられている。<%topentry_no>はこの記事にふられた番号。URLで、http://bittersweetdreams.blog9.fc2.com/blog-entry-218.htmlと表示される、この番号の部分である。

<!-- 記事タイトル部分 -->
<h2 class="entry-header"><a href="<%topentry_link>" title="「<%topentry_title>」の永続的アドレス"><%topentry_title></a></h2>

entry-headerというclassが与えられたこの見出し部分は、この記事のタイトル(<%topentry_title>)を表示している部分。この記事のURL(<%topentry_link>)を開くようにリンクしてある。タイトルをクリックすると個別記事表示(記事、コメント、コメント投稿欄、トラックバック、が表示されたページ)になる。

<!-- 記事本文部分 -->
<div class="entry-body">
<%topentry_body>

entry-bodyというclassが与えられたこの部分が記事本文を表示している。<%topentry_body>に記事が「代入」される。ここでいう記事とは、管理者ページの新規エントリーで、「本文」と見出しのついたウィンドウに入力した部分である。

<!--more_link-->
<p class="entry-more"><a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む">続きを読む »</a></p>
<!--/more_link-->

新規エントリー記事で「詳細の設定>追記」の部分に記事の追記を記入した場合、は記事に表示される「続きを読む」の部分(テンプレートによっては「もっと読む」「...more」などと表示されている場合もある)。
そして、追記部分は以下(<%topentry_more>の部分)に表示される。

<!--more-->
<%topentry_more>
<!--/more-->
</div>

</div>は<div class="entry-body">に呼応。ここで記事の本文(追記含む)の表示が終了する。

次回は記事のフッタ部分。記事表示ひとつでも、結構な行数が費やされてるね。


【私家版・はじめてのFC2ブログカスタマイズ】を検索

※このシリーズは、FC2公式テンプレートsampleをカスタマイズするという目的で、現在その構造を読んでいるものです。htmlの基礎知識については、おサポ上手のcyaimiさんが乱暴大雑把なHTML講座」を展開中。
#219
カテゴリ:107 ブログカスタマイズ

trackback

<<【私家版・はじめてのFC2ブログカスタマイズ】#5  | 【my footprint】一眼レフとノートパソコンを常に持ち歩く若い放課後カメラマン>>

コメント(-2件)

CHOU-FLEUR:テンプレ解説

作った本人より詳しく解説されており、ホント頭が下がる思いです(ダメポ←自分)。
後日、納品時には気付かなかったバグが数点見つかっておりますので、解説の際にはお気をつけ下さい。
詳細はForumにまとめてあります。
http://blog.fc2.com/forum/viewtopic.php?t=958

  • 2005年07月04日(月)04:00:02
  • URL
  • 編集
sugar:ありがとうございます。

ご覧いただきありがとうございます。
「ひとに説明すると自らの理解も深まる」というところから解説のようなかたちを取っていますが、CHOU-FLEURさんのテキストを元に自学自習をしています。元々の知識が浅薄なので、分かりやすくなっているかどうか心配です。正確を期するように注意しておりますが、私の理解度によって、その都度加筆修正して、ほかの方にも読むに値するものになるようしていきたいと思っています。
Forumの方も拝見しておりましたが、5月の記事なので、その後修正版が上がっているかと思っていたため、まだチェックしていませんでした。うっかり者なので、注意していただいて良かったです。
sampleは公式テンプレートですし、カスタマイズして共有に登録しているケースもあるようですね。Forumはすべての方が見ておられるとも限らないので、修正版がダウンロードできるようにしていただけると、皆さん嬉しいかと存じます。

  • 2005年07月04日(月)06:31:22
  • URL
  • 編集
コメントの投稿

トラックバック(-0件)

http://bittersweetdreams.blog9.fc2.com/tb.php/219-e0cf31b0

Bookmarked

Blog Battler

ブログバトラー

Twitter

    フリーエリア

    上部の説明

    下部の説明

    Utilities

    Ad

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