Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

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

2006年11月26日

エントリ本文のカスタマイズ方法その2

今回は前回(エントリ本文のカスタマイズ方法その1)の続きです。エントリ部分カスタマイズの参考にしてみて下さい。

0.エントリ部分のHTML


<!--topentry-->
<div class="section" id="a<%topentry_no>">
<div class="mainbox">
<div class="maindate"><!-- 投稿日と時間 -->
<h2 class="maindate2">
<%topentry_year>年<%topentry_month>月<%topentry_day>日
<!-- 投稿時間を表示しない場合、ここから下を削除 -->
<span class="maintime">
(<%topentry_hour>:<%topentry_minute>)
</span>
<!-- 投稿時間を表示しない場合、ここから上を削除 -->
</h2>
</div><!-- maindate -->

<div class="mainentry"><!-- エントリ全体のボックス -->
<!-- エントリタイトル -->
<h3 id="a<%topentry_no>" class="maintitle"><%topentry_title></h3>
<div class="maincontent"><!-- エントリ本文 -->
<%topentry_body>
</div><!-- maincontent -->

<!--more_link-->
<div class="mainmore">
<a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->
<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->

<div class="maintag"><!-- タグ表示 -->
<!--topentry_tag-->
タグ : <%topentry_jointtag>
<!--/topentry_tag-->
</div><!-- maintag -->

<div class="mainfooter"><!-- エントリ下部 -->
カテゴリ : <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
| <a href="<%topentry_link>" title="<%topentry_title>のページ">記事のURL</a>

1.エントリ本文のカスタマイズ

個別に文字色などは指定していますが、あまり個別にごちゃごちゃ設定すると、統一感がなくなりますので注意してください。


HTML部分
<div class="maincontent"><!-- エントリ本文 -->
<%topentry_body>
</div><!-- maincontent -->

.maincontent{
padding: 0 10px;
margin-bottom: 10px;
color: #000;
font-size: 12px;
line-height: 150%;
}

重要なのはline-heightで、ここで行間を指定できます。地味ながら非常に重要で、ここで適度に行間をあけないと非常に見づらい文章が出来上がります。ここだけでなく、(テキストを複数行設定する)どの部分でもこのline-heightを指定して、適度な行間を指定するようにしてください。

2.続きを読むのカスタマイズ


HTML部分
<!--more_link-->
<div class="mainmore">
<a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">…続きを読む</a>
</div><!-- mainmore -->
<!--/more_link-->
<!--more-->
<a name="more"></a>
<div class="maincontent"><!-- 追記本文 -->
<%topentry_more>
</div><!-- maincontent -->
<!--/more-->


.mainmore{
text-align: right;
margin-bottom: 10px;
color: #000;
font-size: 12px;
}

追記部分を表示する、「…続きを読む」部分は好きな文字を使用できます。赤で囲んだ文章が表示する文字なので、好きな文字に変更してください。
また、CSS部分で文字を右寄せにしています。個人的には右寄せの方が好きですが、これを指定しなければ左寄せになります。その方がよければ削除してください。

3.タグの表示


<div class="maintag"><!-- タグ表示 -->
<!--topentry_tag-->
タグ : <%topentry_jointtag>
<!--/topentry_tag-->
</div><!-- maintag -->


.maintag{
margin-top: 14px;
text-align: right;
color: #000;
font-size: 10px;
}

タグの表示部分です。フッター要素としていますので、文字は10pxと小さめです。もちろん変更は可能です。また、「タグ : xx」という表記ですので、ここも好きな文字に変更できます。

4.フッター部分のカスタマイズ1


<div class="mainfooter"><!-- エントリ下部 -->
カテゴリ : <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
| <a href="<%topentry_link>" title="<%topentry_title>のページ">記事のURL</a>


.mainfooter{
margin-top: 4px;
text-align: right;
color: #000;
font-size: 10px;
}

エントリ下部のフッター部分1です。ちょっとごみごみしていてわかりにくいかと思いますが、変数(<%で囲んである部分>)部分以外なら簡単に変更できますので、表記を変えるのは問題ありません。ここで指定しているのはカテゴリと固定リンク(記事のURLとしている)部分です。
色を変えているHTML部分が表示する文字です。好きな文字に変更してみてください。
CSS部分も変更できますが、文字を大きくすると改行が入って綺麗ではなくなる可能性があるので、このままの方がいいかと思います。もちろん大きくしても大丈夫です。

5.コメント・トラックバックフッター部分


<!-- 下部コメント -->
<!--allow_comment-->
| <a href="<%topentry_link>#comment-top" title="<%topentry_title>へのコメント">コメント</a> (<%topentry_comment_num>)
<!--/allow_comment-->
<!--deny_comment--><!--/deny_comment-->

<!-- 下部トラックバック -->
<!--allow_tb-->
| <a href="<%topentry_link>#trackback-top" title="<%topentry_title>へのトラックバック">トラックバック</a> (<%topentry_tb_num>)
<!--/allow_tb-->
<!--deny_tb--><!--/deny_tb-->
</div><!-- mainfooter -->

CSSのコメント・トラック部分はフッター部分のCSSではありませんのでご注意下さい。ここは単なるエントリ本文のフッター部分内です。
こんなに長くなっているのは、コメントを許可している時としていない場合を表記しているためです。
カスタマイズとしては、「コメント」「トラックバック」の文字と、それぞれの数をカウントしている部分の「(0)」カッコ部分が可能です。好きな文字、好きな括弧を使用してください。

以上でエントリ本文のカスタマイズ解説は終了です。文字の種類や色、場所などは簡単にカスタマイズできますので、好みのカスタマイズを楽しんで下さい。

スポンサーサイト

コメント

質問です

欲張っていろいろ取り込めるテンプレートに良いものがないか探していたらこちらのテンプレを見つけました。今使っているテンプレとメインカラム等の幅が違うのですんなり移行はできそうにありません。よろしければ幅変更などの変更例などを記事にしてもらえまないでしょうか? 個別に返事を書いていたらキリが無いでしょうし、記事で書いておけばある程度イジれる人なら応用してやっていけると思うのですがいかがでしょう?

勝手なお願いですみません。

いかがでしょうか

racchi さん、こんにちは。

実はサイズ変更については記事で紹介する予定でした。
いかんせん時間が無いので後回しになってましたがw

変な指定はしていないので、サイズの変更はとても簡単
です。エントリを参考に、サイズ変更に挑戦してみてください。

ブログを拝見したところ、今お使いのテンプレのサイズさえ
わかれば、そのままサイズは再現できると思います。

「続きを読む」で見られる記事に広告や文字を挿入したいのですが

「続きを読む」をクリックしたあとに表示される記事の中に、
自動的に広告や文字を表示するようにしたいのですが、どうすればいいのでしょうか。
FC2ブログユーザーフォーラムに同じような質問があったのですが
うまくできませんでした。

よろしくお願いします。

遅くなりました

世界の動画管理人さん、お返事が遅れまして申し訳ありません。

ご質問の内容はエントリにてご紹介しましたのでご覧下さい。

http://templatetube.blog78.fc2.com/blog-entry-28.html

おそらく固定リンク画面(追記の後に表示する画面です)のエントリフッターの前に表示するようなカスタマイズだと思い
ますので、これで大丈夫だと思います。

何か問題がありましたら該当エントリの方へコメントをお願いします。

お返事ありがとうございます。

さっそくやってみようと思います。
ありがとうございました。

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://templatetube.blog78.fc2.com/tb.php/8-58340072
プロフィール

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


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