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

--年--月--日

スポンサーサイト

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

2007年04月03日

FC2ブログ用2カラムテンプレートのカラムサイズ変更方法

以前に、こちらで紹介していますFC2ブログ用テンプレートblogtube_basic3カラムの各カラムサイズの変更方法を説明しましたが、今回はblogtube_extraの2カラムテンプレートの各カラムサイズの変更方法を説明します。
前回は全般的に説明しましたが、今回は必要な箇所だけ説明します。細かく説明すると、逆にややこしいと思いますので。
ということで、FC2ブログ用テンプレート3カラムのサイズ変更は、ブログ全体のサイズをカスタマイズするブログ全体のサイズをカスタマイズしてみた例をご覧下さい。

(今回は左右のマージン(15px)とカラム間のマージン(10px)は標準のまま変更しないものとします。)

1.右メニューの2カラムテンプレートカラムサイズ変更


.layout-three-column #box,
.layout-two-column-left #box,
.layout-two-column-right #box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

まずは全体のサイズを決めます。width: 930px;の930pxを変更して下さい。この数字が基準となります。

左カラム(エントリカラム)


.layout-three-column #box-left,
.layout-two-column-right #box-left{
float: left;
width: 660px;
}

右カラム(メニューカラム)


.layout-three-column #box-right,
.layout-two-column-right #box-right{
float: right;
width: 230px;
}

ここで左右カラムサイズを決定します。左右マージンが計30px+カラム間マージンが10px=40pxが標準ですので、この左右カラムの合計+40px=全体サイズになります。
違う言い方をすれば、全体サイズ-40pxがこの左右カラムの合計サイズです。

全体サイズを830pxにした場合、830px-40px=790pxが左右カラムの合計になります。この合計を、左右好きなサイズに割り当てて下さい。(例えば610px+180px=790px)


.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}

ここはエントリカラムと同じサイズに変更して下さい。以上で左右カラムの変更は終了です。(フリーエリアを使用する場合、フリーエリアのサイズ変更に進んで下さい。)

2.左メニューの2カラムテンプレートカラムサイズ変更


.layout-three-column #box,
.layout-two-column-left #box,
.layout-two-column-right #box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

左メニューの場合も全体サイズはここで決めます。


.layout-two-column-left #box-left{
width: 900px;
}

ここは全体サイズ-30pxとして下さい。-30pxは左右マージンです。(例:830pxなら830px-30px=800px)

右カラム(エントリカラム)


.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}

左カラム(メニューカラム)


.layout-two-column-left #box-sub{
float: left;
width: 230px;
}

ここで左右カラムサイズを決定します。左右マージンが計30px+カラム間マージンが10px=40pxが標準ですので、この左右カラムの合計+40px=全体サイズになります。
違う言い方をすれば、全体サイズ-40pxがこの左右カラムの合計サイズです。

全体サイズを830pxにした場合、830px-40px=790pxが左右カラムの合計になります。この合計を、左右好きなサイズに割り当てて下さい。(例えば610px+180px=790px)

3.フリーエリアのサイズ変更


#kousin{
width: 900px;
margin: 10px auto 20px;
border: solid 1px #000;
background: #fff;
}

.topadfull{
width: 900px;
margin: 10px auto 20px;
background: #fff;
}

.topbox{
width: 900px;
background: #fff;
margin: 10px auto 20px;
}

#bottombox{
width: 900px;
margin: 10px auto 20px;
border: solid 1px #000;
background: #fff;
}

上記部分は全体サイズ-30pxとして下さい。-30pxは左右マージンです。(例:830pxなら830px-30px=800px)


.topleft{
float: left;
width: 445px;
}

.topright{
float: right;
width: 445px;
}

これは2分割のフリーエリアです。上で設定した、(全体サイズ-30px)-10pxをまず計算し、次にその合計になるように左右サイズを決定して下さい。左右違うサイズでも問題ありません。(例:(全体830px-30)-10px=790px。790px/2=395px。もし左右違うサイズにするなら、400px+390px=790pxなどにする。)

スポンサーサイト

コメント

テンプレートを使わせて頂いています。有難うございます。唐突ですいませんが、以前使っていたほかの人のテンプレートだと、日記を更新するたびに、最新記事としてヤフー検索(ブログ)で、出てきたのですが、今回利用させて頂いているものですと、更新しても出てこないのですが、出やすくする方法など、ご存知であれば教えて頂けますでしょうか?すいません。

Yahoo!ブログ検索ヘルプより

dondonさん、こんにちは。

http://help.yahoo.co.jp/help/jp/blog-search/blog-search-18.html

上のヘルプを読んだ感じですと、PINGを送ることはできずに
推薦を受け付けているだけのようですね。
ですので、ブログの環境設定→ブログの設定画面で、
下の方のブログ管理の設定のPING送信先に

http://api.my.yahoo.co.jp/RPC2

を追加すればいいんではないでしょうか。

もしテンプレートを変更しただけで、ブログ自体は以前と同じ
場合には何とも言えませんが、その場合は以前利用していた
テンプレート名を教えていただけますと解決の糸口が見つかる
かもしれません。

あまりよく知らないので、調べた範囲では以上のようになります。

出るようになりました。ご丁寧にあいがとうございます。今後とも、テンプレートを活用させて頂きます。有難うございました。

テンプレートを使わせて頂いています。
ありがとうございます。

入力した文字が、うまく画面に繁栄されなくて、
困っています。

ページをご覧になっていただけると、
おわかりいただけると思うのですが、
常に下線が引かれる状態になっています。

どこを修正してよいのか、
教えていただけたら、
幸いです。
宜しくお願い致します。

uタグを閉じていません

のりとんさん、こんにちは。

ブログを見させていただきましたが、uタグの閉じ忘れです。

2分割のフリーエリア右ボックスの、永田農法部分を確認して
下さい。閉じるべき/uがuになっています。

おそらくこれで直るはずです。uタグ自体2箇所しか使用されて
いないようなので。

ありがとうございます☆
uタグを消したら、
元通りになりました。
とっても嬉しいです。
ありがとうございます。

また、質問させて頂いても、
よろしいでしょうか?

のりとんさん、こんにちは。

質問は答えられる範囲で対応しますので、お気軽にどうぞ。

ただタグの閉じ忘れなどはできるだけ自分で発見できると
カスタマイズがはかどるかと思います。

ちなみにこの見つけ方ですが、今回はソースを表示して、
テキストエディタにコピー。下線が出現した下の方を探して発見、という感じです。

ありがとうございます。
親切にしていただいて、
とても嬉しいです。
一つずつ、
学習していきます★

ひとつ、質問させてください。
個別の記事のページで、
トップやサイドのメニューが、
表示されないようにするには
どうしたらよいでしょうか?
記事だけを表示させることは、
可能でしょうか??

可能ではありますが、

のりとんさん、こんにちは。

記事だけ表示するのはできますが、サイトを見るとフリーエリア
も使用しているので、かなり記事の部分が大きくなってしまい
ますが大丈夫でしょうか。

あと1ペインは作っていないので、簡単にするなら3ペインの
まま左右メニューを単純にスペースにしてしまって何も表示させずに、
中央のメインカラムだけ表示する、という感じになります。

もし1ペイン(中央記事だけ)がやりたいのでしたら、この前
やった2ペインの応用で作成してみますが。

よろしければお返事下さい。ただし少しお時間を頂きます。

blogtubeさん。
いつもありがとうございます。

僕の勝手な意見です、すみません。
トップのフリーページから、
各記事へリンクするようにしているんですね。
リンク先へ移動したときに、
記事がすぐ見えるようになったら、
うれしいなって思っています。
今は、フリーページの次に表示されます。

知識がないので、
色々と教えていただけて、
とてもうれしいです。

また、何かありましたらご連絡ください。


フリーエリアの移動

のりとんさん、こんにちは。

>リンク先へ移動したときに、
>記事がすぐ見えるようになったら、

これだけでしたら、上にあるフリーエリアを、エントリの下に
あるフリーエリアの前にでも移動するだけで大丈夫ですよ。

この場合、タイトル→本文→フリーエリア上部→フリーエリア下部→フッター
という感じで表示されます。

まず今あるエントリ上部のフリーエリア部分を
<!--index_area-->
フリーエリア
<!--/index_area-->
で囲みます。

次に上部のフリーエリアをコピー(切り取りではない)して、
下部のフリーエリアの前に貼り付けますその後、
<!--not_index_area-->
貼り付けたフリーエリア
<!--/not_index_area-->
と囲みます。これで、トップページではフリーエリアが上部に、
それ以外のページでは、フリーエリアがエントリの下部に移動します。

これで大丈夫な感じがしますがいかがでしょう?

ありがとうございます~
やってみました。
思い通りになりました。
とっても嬉しいです。
ありがとうございます。

コメントの投稿

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

トラックバックURL

http://templatetube.blog78.fc2.com/tb.php/27-45e6ce85
プロフィール

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

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

Appendix


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