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

--年--月--日

スポンサーサイト

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

2007年04月03日

エントリ部分の画像のマージンを削除する

何人かの方から質問を受けています、エントリ部分の画像のマージンについて説明しておきます。
まずは、記事を投稿する時に使用するタグのエントリをご覧下さい。こちらで説明しているように、画像は標準で右に16px、下に16pxのマージンが入ります。ですので、どの種類の画像(絵文字含む)を貼り付けたとしても、上のスペースが入ってしまいます。
個人的に、画像は先ほどのエントリで紹介しているような使い方しかしないため、私自身は問題ないんですが、画像を連続して貼り付けたり、絵文字を使用したりする場合には問題がでるようです。
このような、エントリ部分に画像を隙間無く貼り付けたい場合は以下のようにして下さい。

1.テンプレートのスタイルシート修正


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

上記箇所がエントリ部分で画像を貼り付けた場合にマージンを設定している部分です。これを丸ごと削除してください。これだけで大丈夫です。

2.画像にマージンを設定する場合

画像によってマージンを個別に設定するには、以下のようにしてみて下さい。(まずは上の標準マージンを削除してから)


<img style="margin: 10px;" src="" width="" height="" alt="" />

styleで直接マージンを設定します。marginのサイズや場所(margin-topなど)は個別に指定してください。

スポンサーサイト

2007年01月23日

FC2の新しく記事を書く機能を使って強調文字を使用する場合

今回はコメントで質問をいただいた返答を元に、FC2ブログで用意されている、新しい記事を書くの本文欄で使用できる、strong(強調)とi(斜体)タグを使用する場合向けのカスタマイズです。

1.スタイルシートのカスタマイズ


* {
margin: 0;
padding: 0;
font-style : normal;
font-weight: normal;
word-break: break-all;
font-family: Verdana, Arial, sans-serif;
}

上記の抹消線を削除してください。


#box-right{
float: right;
width: 230px;
}

#box-right h3{
font-weight: normal;
}

#box-sub{
float: left;
width: 150px;
}

#box-sub h3{
font-weight: normal;
}

今度は赤色の部分を追加します。できたらこの場所に追加してください。
これで本文に強調文字、斜体文字が設定でき、左右カラムのh3タグ部分も標準フォントで表示されるはずです。(後ほどこのようにFC2ブログ用のテンプレートを変更するかもしれません。この方がよいかも。)

2.FC2ブログ本文で文字のサイズ変更を使用する

大・小の文字設定機能ですが、文字の指定方法が異なるため、うまくは機能しません。どうしても使用したい場合は、以下のようにFC2ブログ用テンプレートを変更してください。


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

上記のスタイルシート抹消線部分を削除して、替わりにfont-size: small;font-size: x-small;を追加してください。
これで大文字・小文字も設定できますが、本文の文字サイズはコントロールできなくなります(ブラウザなどにより異なるサイズで表示される)。

2007年01月03日

背景画像を使用するブログカスタマイズ方法

今回は背景画像を使用するカスタマイズの解説です。多少クセがあるので、説明を参考にしてカスタマイズしてみてください。(背景画像はリピートさせる、標準指定を想定しています)

1.ボックス外部の背景画像


body{
text-align: center;
background-image: url(背景画像のアドレス);
}

#bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}

#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
background: #fff;
}

カスタマイズ
抹消線のbackground: #fff;は削除してください。
左右に背景画像が表示されます。大きいモニタだと、意外に横にスペースがありますので、意味はあります。

2.背景画像をボックス内にも適用

背景画像を、コンテンツが無い部分に対して全体的に使用します。コンテンツがある部分は背景色を適用させます。


body{
text-align: center;
background-image: url(背景画像のアドレス);
}

#bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}

.mainbox{
width: 100%;
margin: 0 auto 10px;
border: solid 1px #000;
background: #fff;
}

.mainnavi{
margin-top: 10px;
text-align: center;
font-size: 12px;
background: #fff;
}

.comment-entry{
font-size: 12px;
color: #000;
width: 100%;
background: #fff;
}

カスタマイズ
抹消線のbackground: #fff;は削除してください。
変更箇所は離れていますので、検索などを使用して該当部分を見つけて下さい。エントリ部分やフリーエリア、左右カラムメニューなどの背景色は指定していますので、それ以外の部分には背景画像が適用されます。

以上が基本的な背景色を使用する際のカスタマイズ方法です。ちょっと簡単とまではいかないので、これ以外のカスタマイズをする場合は少々面倒かもしれません。

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)」カッコ部分が可能です。好きな文字、好きな括弧を使用してください。

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

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;に変更しましょう。

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

プロフィール

templatetube

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

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

Appendix


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