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

--年--月--日

スポンサーサイト

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

2007年01月29日

FC2ブログ用テンプレートの、コメント欄の投稿者リンクを修正

ひばりさんよりご指摘いただいて気が付いたんですが、コメントフッター部分の投稿者リンクの方法が間違っていたようです。もちろん表示などには問題ありませんが、気になる方は、FC2ブログテンプレートの修正をお願いいたします。

1.FC2ブログテンプレートの修正部分

修正箇所は次になります。


<div class="comment-footer">
投稿者:<a href="<%comment_url>"><%comment_name></a>
| 投稿日:<%comment_month>月<%comment_day>日(<%comment_hour>:<%comment_minute>)
| <a href="<%comment_edit_link>" title="コメント編集のページへ">編集</a>
</div><!-- comment-footer -->

次のように変更して下さい。


<div class="comment-footer">
投稿者:<%comment_url+name> 
| 投稿日:<%comment_month>月<%comment_day>日(<%comment_hour>:<%comment_minute>)
| <a href="<%comment_edit_link>" title="コメント編集のページへ">編集</a>
</div><!-- comment-footer -->

FC2で使用できる変数をよく理解できていなかったようです。また、この変数自体がFC2のブロック変数一覧にも載っていなかったりします。機能はしますので、これで問題は無いと思います。(メールアドレスリンクもあるんですが、メールアドレスを記入することはまず無いと思いますので設定していません)

2.FC2テンプレート変数一覧表

検索して見つけた隠し変数はこちらで紹介されています。公式のFC2変数一覧よりも便利で使いやすいので、本格的にカスタマイズする場合や、FC2ブログ用のテンプレートを作成する際にご利用下さい。

FC2テンプレート変数一覧表 ( それは仕様?様 )

スポンサーサイト

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年12月02日

ブログ全体のサイズをカスタマイズしてみた例

前回の、ブログ全体のサイズをカスタマイズするの続きです。実際にブログ全体のサイズを変更した例を紹介します

このテンプレートの左右カラムは非対称です。基本的に、左が記事やリンク、コメントなどで、右カラムに画像などの広告やランキングを貼り付けることを想定しています。
ただ、使用目的によって最適なサイズは異なると思いますので、このエントリを参考に最適なサイズで運用してみて下さい。

1.左右カラムが190pxで、エントリ部分が500px

最初は簡単な変更で。左右カラムのサイズを揃えてみましょう。それ以外は標準です。

15
a
190
b
10
c
500
d
10
e
190
f
15
g

構成はこのようになります。計算してみましょう。

15+190+10+500+10+190+15=930px
930-(15+15)=900px(左右マージンを引く)
190+10+500=700px(=左ボックス)
900-700=200px(=右カラム+スペース)
最初に計算してみて、サイズに間違いがないか必ず確認してください。

2.スタイルシートの変更

変更しているのは、左ボックス、左カラム、右カラムですので、その部分のスタイルシートを変更すればいいことになります。


#box-left{
float: left;
width: 700px;
}

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

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

カスタマイズ
変更した画面です。ちょっとわかりにくいですが、ちゃんと変更されています。実はサイズの変更なら、こんなに簡単です。ただしサイズを変更した場合、HTML部分に変更したサイズよりも大きいもの(画像など)が無いようにしてください。特にエントリ部分のサイズを変更すると、修正はエントリ本文になりますので注意してください。

3.その他の変更例

ちょっと変なサイズにしてみます。計算さえあっていれば、サイズの変更はどのようにでもなります。

左カラム300px、エントリ部分400px、右カラム180px

スペースは変更無しです。変更箇所はこちら。


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

#box-margin{
margin: 0 15px;
}

#box-left{
float: left;
width: 710px;
}

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

#box-main{
float: right;
width: 400px;
}

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

カスタマイズ
画像はこのようになります。エントリ上部のボックスも変更されますので、フリーエリアはそのままで大丈夫です。変更箇所はこれだけで済みます。

4.変態なカスタマイズ

極端な例であって、止めた方がいいですよw


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

#box-margin{
margin: 0 15px 0 25px;
}

#box-left{
float: left;
width: 400px;
}

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

#box-main{
float: right;
width: 300px;
}

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

カスタマイズ
計算があっていれば、このようなことも可能です。

5.カスタマイズの注意点

  • 全体のサイズも変更できますが、上部のフリーエリアのサイズも変更しないと小さくすることは出来ません。
  • エントリ部分を小さくした場合、コメントなどのフォームが崩れるかもしれません(未確認)
  • エントリ本文やHTML部分に、スタイルシートで変更したサイズ以上のもの(画像など)がある場合には、カラム落ちやサイズの変更不良がおこります。

以上でサイズ変更の解説は終わりです。計算さえ合っていれば、数箇所の変更だけでブログ全体のサイズを好きにカスタマイズできます。好きなサイズに変更してみてください。

2006年12月02日

ブログ全体のサイズをカスタマイズする

今回はブログ全体のサイズカスタマイズする方法を説明します。ブログ構成は、全体のボックス、左右カラム、エントリ部分はもちろん、忘れてはならないのは、それぞれに隣接するスペース部分です。これらが組み合ってサイズは決まっていますが、計算の仕方と、該当するスタイルシート部分がわかれば、それぞれのサイズ変更は意外と簡単です。
左右カラムやエントリ部分のサイズが変更できれば、更に使いやすくなると思いますので、是非挑戦してみてください。

1.ブログの標準サイズ指定

まずは標準で指定しているサイズを確認します。ここで重要なのは、スペースもサイズ計算に含まれる、という点です。忘れがちなので注意してください。(説明するテーブルは、実サイズと比率が異なります)

標準のブログサイズ

15
a
150
b
10
c
500
d
10
e
230
f
15
g

数字は指定しているピクセルサイズ(px)です。カスタマイズする前のブログを確認してみて下さい。このようなサイズになっているはずです。
下のアルファベットは計算の際に使用します。サイズは自由にできますが、合計が合っていなければなりません。

2.指定しているスタイルシート部分

サイズを指定しているのはスタイルシートです。ですので、スタイルシートの指定部分だけ変更すれば、ブログのサイズは変更できます(変更したサイズよりも大きい画像などをHTML部分で指定していればカラム落ちします)。
それぞれのサイズをしている部分だけ抜粋します。


全体のボックスサイズ(930px = a+b+c+d+e+f+g)
#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

全体のボックスの左右スペース(各15px = a+g)
#box-margin{
margin: 0 15px;
}

左ボックス(左カラムとエントリ部分。計660px = b+c+d )
#box-left{
float: left;
width: 660px;
}

右ボックス(=右カラム。230px(+10px) = f+(e))
#box-right{
float: right;
width: 230px;
}

エントリ部分(500px = d)
#box-main{
float: right;
width: 500px;
}

左カラム(150px = b)
#box-sub{
float: left;
width: 150px;
}

カッコ内が指定しているサイズで、=以降は前記した計算用のアルファベットです。実際に計算すれば、そのサイズになりますね。
ある程度知識があれば、これでサイズの変更ができるかもしれませんが、もう少し説明します。計算さえ間違えなければ、サイズの変更は簡単です。

3.2カラムを作成する

3カラムというのは、2カラムをまず作成して、その片方のカラムの内部を更に2カラムにする、という構成です。ですので、まずは2カラムを作成します。

2カラムの構成

15
a
660
左ボックス
b+c+d
240
右ボックス
e+f
15
g

これが最初に作成する2カラムです。左ボックス内部を更に2カラムにして、左カラムとエントリ部分を作成しています。
このような構成になっているのがわかれば、あとは計算したサイズをそれぞれ変更すればブログのサイズ変更は完了です。

4.2カラムの計算

まずは準備です。指定しているスタイルシート部分と、色が赤の部分が指定している箇所です。実際に計算してみてください。

全体のボックスサイズ(a~g)は930pxです。


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

全体のボックスに左右のマージンを指定することで、左右カラムのスペース(a g)になります。(930-(15+15)=900px)


#box-margin{
margin: 0 15px;
}

左カラム(b)とエントリ部分(d)とスペース部分(c)の合計が、左ボックスのサイズになります。(150+10+500=660px)


#box-left{
float: left;
width: 660px;
}

結果的に、全体のボックスから左右のスペースを引き、そこから左ボックスのサイズを引いたサイズが右ボックス+スペース部分になります。
930-(15+15)-(150+10+500)=240px
ここが少し紛らわしい部分ですが、メインボックス内部で、左ボックス(b+c+d)をfloatを使用して左に寄せて、右ボックス(fだけ)を同じくfloatを使用して右に寄せています。
右ボックス(f)のサイズが230pxで、これを右に寄せているので、結果的に右ボックスの左に10pxのスペース(e)ができます。
計算する上で、ここが一番間違えやすい部分ですので、よく注意してください。右カラム(f)の横のスペース(e)は結果的にできるスペースで、スタイルシートで直接指定するスペースではありません(もちろん計算してスペースができるようにします)。


#box-right{
float: right;(このfloatで右に寄せる)
width: 230px;
}

これで左右スペース、左ボックス、右ボックス(右カラム)が作成できました。次は左ボックス内に2カラムを作成し、左カラムとエントリ部分を作ります。

4.左ボックスに2カラムを作成する

左ボックスを先に作成しましたが、計算上は左カラムとエントリ部分とスペース部分のサイズを先に決定しないと作成できません。合計が結果的に左ボックスのサイズになるわけです。

左カラム(b)は150pxです。floatで左に寄せています。


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

エントリ部分(d)は500pxです。floatで右に寄せています。


#box-main{
float: right;(右に寄せる)
width: 500px;
}

先ほどと同じですね。左カラム(b = 150px)を左に寄せ、エントリ部分(d = 500px)を右に寄せます。結果的に10pxのスペース(c)が間にできます(660-(150+500)=10px)。
このスペースも、直接的に指定するのではなく、結果的にできるスペースになります。
ちなみに3カラムを作成する方法はいくつかあるので、このカスタマイズは、この方法を使用したテンプレートでないと使用できません。

これでサイズ変更の説明は終わりです。次回は実際にサイズを変更してみましょう。

2006年10月07日

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

「使えて+いじれる」FC2ブログテンプレートにお越しいただきましてありがとうございます。
こちらでは、FC2ブログ用のテンプレートの配布、及びカスタマイズの方法についてご紹介していく予定です。フリーエリアを多く含むテンプレートのため、カスタマイズし易い反面、カスタマイズ初心者の方には多少難しい部分もあるかと思います。

後ほど、フリーエリアのサイズ変更やタグの貼り付け方法、リンクやタイトル部分の色の変更方法などについて解説していきますので、しばらくお待ち下さい。

プロフィール

templatetube

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

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

Appendix


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