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

--年--月--日

スポンサーサイト

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

2006年11月20日

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

今回はエントリ部分のカスタマイズについて説明します。どこが何の部分を設定しているかがわかれば、あとは入れ替えれば大丈夫です。好みの並びにカスタマイズしてみてください。

1.エントリ部分の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>

2.エントリ上部のカスタマイズ

以降の説明ではかっこ<>(半角)部分を削除して表記しています。実際には半角のかっこが必要です。


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="mainbox"

ここでエントリ部分のボックスを指定しています。ボックスのボーダーサイズや色はカスタマイズ可能です。


.mainbox{
width: 100%;
margin: 0 auto 10px;
border: solid 1px #000;(エントリ全体を囲むボーダー)
}

この色部分を変更すればボーダーをカスタマイズできます。

div class="maindate"

ここが最上部、エントリの日付が表示される部分のボックスです。背景色やテキストの位置、ボーダーは変更できます。


.maindate{
padding: 3px;
text-align: left;(テキスト位置)
background: #ebebeb;(背景色)
border-bottom: solid 1px #000;(下部のボーダー)
}

説明を付加した項目を変更してみてください。日付をセンタリングしたり、背景色を変更するとイメージが変わります。

h2 class="maindate2"~/h2

ここが日付と投稿時間を表示しているHTML部分です。この中にエントリのタイトルを入れれば、エントリのタイトルを最上部に表示することができます。(後述)
また、投稿時間の削除もできます。必要ない方は「ここから~」の部分を削除してください。


.maindate2{
font-size: 12px;
font-weight: bold;(太字に)
color: #000;(文字色)
}

ここでは文字を太く、色を黒にしています。ここも変更可能です。


.maintime{
font-size: 10px;(文字の大きさ)
font-weight: normal;(文字の太さを標準に)
color: #000;(文字色)
}

投稿時間表記は文字を小さく(10px)して太さも通常です。ここも変更可能です。

3.エントリ上部と本文


HTML部分
<div class="mainentry"><!-- エントリ全体のボックス -->

<!-- エントリタイトル -->
<h3 id="a<%topentry_no>" class="maintitle"><%topentry_title></h3>

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

div class="mainentry"

エントリ部分のボックスです。上部のマージン部分は変更可能です。


.mainentry{
font-size: 12px;
margin-top: 6px;(日付部分とのマージン)
padding: 3px;
text-align: left;
}

日付部分のマージンを増減しても雰囲気が変わります。適度に離して下さい。

h3 id="a<%topentry_no>" class="maintitle"~/h3

メイン部分(中央部)全体のh3に対して指定しているため、CSSは上の方に表記してあります。


#box-main h3{
font-size: 12px;
color: #000;(文字色)
font-weight: bold;(太字に)
margin-top: 5px;
}

ここがh3のCSS部分です。ここも変更は可能です。色を変更してもいいかもしれません。

<%topentry_title>

h3に挟まれているこの部分がタイトルを表示させる変数です。例えばタイトル部分に記事の固定リンクを設定する場合には以下のようになります。


<h3 id="a<%topentry_no>" class="maintitle">
<a href="<%topentry_link>" title="<%topentry_title>のページ"><%topentry_title></a>
</h3>

リンク変更
このように変更すれば、タイトルにリンクが設定されます。ただし文字色もリンクの色に変更されます。

投稿日とエントリタイトルの入れ替え

投稿日はh2で挟まれた部分、エントリタイトルはh3で挟まれた部分なので、そのままそっくり入れ替えれば実現できます。実例はこちら。(無駄なタグが見つかりましたので削除しました。あっても問題はないとおもいます)


<div class="maindate"><!-- 投稿日と時間 -->

<h2 class="maindate2">
<%topentry_title>
</h2>

</div><!-- maindate -->

<div class="mainentry"><!-- エントリ全体のボックス -->
<!-- エントリタイトル -->
<h3 class="maintitle">
<%topentry_year>年<%topentry_month>月<%topentry_day>日
<!-- 投稿時間を表示しない場合、ここから下を削除 -->
<span class="maintime">
(<%topentry_hour>:<%topentry_minute>)
</span>
<!-- 投稿時間を表示しない場合、ここから上を削除 -->
</h3>

入れ替え
色分けしてあるのでわかりやすいかと思います。これをそのまま使用しても大丈夫です。この場合、時間を右揃えにしたほうがいいかもしれません。text-align: right;に変更しましょう。

長くなるのでここまで。続きは次回にエントリします。

2006年10月11日

記事を投稿する時に使用するタグ2

前回のエントリはこちら。記事を投稿する時に使用するタグ

1.h3タグを使用する

<h3>0.見出しを設定する</h3>

0.見出しを設定する

こちらで説明しているような文章を投稿する場合は、見出しにh3タグをお使い下さい。通常で上に5pxのスペース、太字で表示されます。カスタマイズはこちら。


#box-main h3{
font-size: 12px;
color: #000;
font-weight: bold;
margin-top: 5px;
}

2.リストを表示する

<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
  • リスト1
  • リスト2

リストの標準は黒丸です(左右カラムとメイン部分のリストは別設定)。画像を使う場合は多少カスタマイズが必要です。例として、7px x 7pxサイズのリスト画像を使用してみます。

  • リスト

リストに画像を使用しました。今はclassで変更しましたが、標準の設定を変える場合は以下のようになります。


#box-main ul{
margin: 10px 0 10px 16px;
line-height: 175%;
}

まずは上の標準リスト設定を削除して下さい。それから下のコードを削除した場所に貼り付けて下さい。


#box-main ul{
}

#box-main li{
padding-left: 12px;
background: url(http://blog-imgs-11.fc2.com/t/e/m/templatetube/list.gif) no-repeat 0px 0.4em;
list-style-type: none;
}

もちろん画像のアドレスは変更してください。また、この画像でよければお使いいただいても構いません。ただし、必ずダウンロードして、お使いのブログ上でアップロードしてからお使い下さい。リンクはご遠慮下さい。
リスト画像のダウンロード

3.文字の色を変える

<span class="tubered">文字の色1</span>
<span class="tubeblue">文字の色2</span>
<span class="tubespan1">文字と背景の色</span>

文字の色1
文字の色2
文字と背景の色

文字の色を変える設定として、標準で上にようなものを用意しています。単純に色指定と背景指定をしているだけですので、お好きな色に変更してお使い下さい。


.tubered{
color: #e51717;
}

.tubeblue{
color: #1785e5;
}

.tubespan1{
color: #000;
background: #ffb2d4;
}

4.引用部分の設定

<blockquote>
ここに引用文を記述
</blockquote>
ここに引用文を記述

特に変更する必要はありませんが、タイトル部分の色を変更した場合に合わせてもいいかもしれません。


blockquote {
width: auto;
margin: 16px 10px;
padding: 10px;
font-size: 12px;
line-height: 150%;
background: #ebebeb;
border: solid 1px #000;
}

以上がエントリ部分のタグ解説です。インデントも用意してあります。また、これ以外のタグ(preなど)は指定していませんので、お使いの方はご自分で設定してください。

タグ : エントリ

2006年10月09日

記事を投稿する時に使用するタグ

記事を投稿する場合、以下のような状況を想定してタグを設定してあります。ということは、それ以外のパターンで投稿をする方は、テンプレートを修正した方がいいかもしれません。
また、タグを使わずに記事を投稿すると、スペースが空きませんので、非常に読みづらい投稿になります。以下を参考にタグを使用してみて下さい。

1.Pタグを使用する

<p>記事の文章をここに入れる</p>
<p>Pタグを使って段落を表す</p>

記事の文章をここに入れる

Pタグを使って段落を表す

グレーの部分が投稿する場合に使用するタグで、下がその表示結果です。Pタグを使用することで、上に10px、下に16pxスペースが入ります。スペースを調整したい場合は以下のCSSを変更してください。


#box-main p{
margin-top: 10px;
margin-bottom: 16px;
}

2.画像を貼り付ける

<img src="http://blog-imgs-11.fc2.com/t/e/m/templatetube/001.gif" width="60" height="60" alt="画像" /><br />
画像の下、左にはスペースが入る
画像
画像の下、左にはスペースが入る

画像を貼り付けると、自動的に右に16px、下に16pxスペースが入ります。右にスペースが入るのは、画像の右に文章を回りこませる状況を想定しているからです。
多少空き過ぎかもしれませんので、調整される場合は以下のCSSを変更してください。


#box-main img{
margin-right: 16px;
margin-bottom: 16px;
}

3.画像の右に文章を回りこませる

<p>
<img src="http://blog-imgs-11.fc2.com/t/e/m/templatetube/001.gif" width="60" height="60" alt="画像" align="left" />
文章が右に回りこむ。
</p>
<div style="clear: left;"></div>

画像 文章が右に回りこむ。

画像の右側にスペースがあるのは、この状況を想定しているためです。逆に言うと、画像が右で文章が左、画像を上下に重ねる、などの状況には対応できません。常にその投稿スタイルならばスペースの設定を変更、状況によって複数のパターンがある場合には、新規に追加して対応して下さい。
また、align属性を使用する方法は推奨要素ではありませんが、floatで指定できる方はそちらをお使い下さい。気にしない方はこの方法でも大丈夫です。回り込みの解除も他の方法がありますが、この方法でも解除できます。
つまり、img align="left"で文章を右に表示して、<div style="clear: left;"></div>(<と>は半角)で回り込みを解除しています。いずれの方法でも構いませんが、回り込みの解除を忘れないで下さい。


#box-main img{
margin-right: 16px;
margin-bottom: 16px;
}

今日はここまで。次回は続きです。

タグ : エントリ

2006年10月08日

エントリ部分に貼り付けできる画像の最大サイズ

エントリ部分の画像の最大サイズについてですが、何もしない状態ならば、454pxまでカラム落ちせずに貼り付けられます。
そしてimgタグにstyle属性を使用することで、最大470pxまで貼り付け可能になります。バナーサイズの468pxを貼り付ける可能性は高いため、このサイズを貼り付ける場合は以下のようにして下さい。


<img src="url" width="" height="" alt="" />通常のimgタグ

<img style="margin-right: 0;" src="url" width="" height="" alt="" />style属性追加

imgとsrcの間に、styleを挟む形になります。通常画像の右側には16pxのスペースが設定されています。このスペースを無くすことで、最大サイズの貼り付けが可能になります。つまり、何も設定しないと右側にスペースが入るので、画像サイズ+16pxとなるわけです。

エントリ部分の標準設定と、こちらで考えている基本のエントリ方法については後ほど解説したいと思います。

10/09訂正。マージンのサイズを12pxから16pxに修正

タグ : エントリ
プロフィール

templatetube

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

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

Appendix


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