「使えて+いじれる」FC2ブログテンプレート

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

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など)は指定していませんので、お使いの方はご自分で設定してください。

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

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;

}

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

エントリ部分の画像の最大サイズについてですが、何もしない状態ならば、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に修正