FC2ブログのサブカラムの背景が途切れる

このQ&Aのポイント
  • FC2ブログのサブカラムがフッターまで伸びていない問題が発生しています。プラグインに関係なく自動的に伸びる方法を知りたいです。
  • FC2ブログのテンプレートを2カラムに変更した際に、サブカラムの背景が途切れてしまっています。フッターまで自動的に伸ばす方法を教えてください。
  • FC2ブログのサブカラムの表示が正しくない問題が発生しています。サイト全体にオレンジ色の背景があり、その上に白のコンテナがありますが、サブカラムがフッターまで伸びていません。解決方法を教えてください。
回答を見る
  • ベストアンサー

FC2ブログのサブカラムの背景が途切れる

私のブログ構造は下の画像のようになっています。色は適当です。 http://uploadingit.com/file/pr3f2j98nhyptzbt/ex.blog2.png サイト全体がオレンジ色の背景、その上に白の背景のコンテナ、 その上に紺色のメインカラムとサブカラムがあります。 さらに上にエントリにプラグインがあるよくある構造だと思います。 問題はサブカラムがフッターまで伸びていないことにあります。 ちょうど最後のプラグインで途切れているようです。 自分としてはプラグインに関係なく、フッターまで自動的に伸びて欲しいのですが、 どうもやり方がわかりません。 どなたかご教授くださると助かります。 テンプレートは下の3カラムを2カラムに変更したものです。 http://hiyokokun.blog2.fc2.com/blog-entry-656.html

  • CSS
  • 回答数2
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
noname#158634
noname#158634
回答No.2

>記事の長さはいつも決まっていないので >決まった値は使えません。 まあそう来るだろうなと思ってたけどわざと黙ってました。 なぜなら、その場合「HTMLとCSSでは無理だから」です。 どうしてもやりたかったらJavascriptでメインとサブの高さを取得して大きいほうにそろえてください。

参考URL:
http://www.sprouthead.com/blog/javascript/box_height.html
m7itaclor2
質問者

お礼

なるほど!HTMLとCSSでは無理なのですね equalbox.jsを使ってみようと思います。

その他の回答 (1)

noname#158634
noname#158634
回答No.1

そりゃあ中身が無くなったらボックスは終わるでしょうよ。 下まで行ってほしかったら高さを指定してください。

m7itaclor2
質問者

お礼

高さ指定はしたいですけれど、 記事の長さはいつも決まっていないので 決まった値は使えません。 height: auto;を追加しても無理です。

関連するQ&A

  • fc2ブログのカスタマイズ

    fc2ブログを普段使っているのですが、 ちょいとわからないところがあるので質問させていただきます。 何がしたいのかというと ○トップページのメインカラムに、最新記事ではなく、記事一覧を表示させたい。 ○その記事一覧は、タイル状に配置したい。 こんな風に。 http://harapekoandhighfly.blog106.fc2.com/ ○テンプレートは http://birith.blog84.fc2.com/blog-entry-5.html?template=Fons03_2c&i... を使っている。 分かりにくいかもしれませんが 詳しく教えてください。お願いします。

  • fc2ブログのプラグイン

    すみません。 ほとんど、HTMLはわかりません。 fc2のブログで下記のプラグインを使っているのですが ttp://pcafe.blog3.fc2.com/blog-entry-304.html このままだと、新しい記事が小さな数字になり 古い記事が大きな数字になります。 これを逆にしたいのですが出来ますでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • FC2ブログのテンプレートについてなのですが、

    FC2ブログのテンプレートについてなのですが、 FC2のブログテンプレートを背景など自分で変更して、使用しております。 何がきっかけかわかりませんが、ある日突然カラムの位置がずれていました。 ↓こちらなのですが ttp://missyhome.blog57.fc2.com/ 3カラムでセンターだけが、左に少し、下に少し寄ってしまっております。 記事を非公開にしてみたり、プロフィール画像を小さくしてみたりと、 自分でいろいろ試行錯誤してみたのですが、どうしても直すことができません。 思い当たる方法があればご教授くださいm(_ _"m) 情報に補足があれば、ご指摘くださいませ。

  • FC2ブログのタグをプルダウン化

    記事中の語をリンクさせるタグをプルダウン化させたいのですが プラグイン周りに知識が乏しいので質問させて頂きました。 FC2ブログでタグをプルダウン化するには どういった記述をすれば出来ますか? 何か足りない部分がありましたら すぐに補足しますので宜しく御願いします。 ■FC2ブログ-タグについてhttp://fc2blogmanual.blog60.fc2.com/blog-entry-28.html

  • fc2ブログのカスタマイズについて

    fc2ブログで初期設定の公式テンプレート「basic_white」を使用しているのですが、左側にもサイドメニューを設置したいと思い、 http://help.fc2.com/blog/manual/Home/pccustomize/pccmlayout.html こちらの「3カラムレイアウトの作成」により、左側に空白部分を作りました。 ですが、この空白部分にプラグインを貼り付ける方法がわかりません。 左側にプラグインを設置する方法を初心者にも分かりやすく説明していただけると有難いです。

    • 締切済み
    • CSS
  • [CSS]リキッドレイアウト上で、floatさせたサイドバーの背景画像を高さ100%で敷き詰めたい

    今ヘッダフッタ付きの3カラムブログデザインを作っています。 leftnaviとrightnavi(サイドバー/メニュー)の間にmaincontents(ブログのメイネントリ)が挟まるような、まあ一般的なブログデザインです。 で、質問なんですが、leftnaviとrightnavi(サイドバー/メニュー)に背景画像を敷き詰めたいんです。 ブログですので、基本的にはmaincontents(エントリ)の方がサイドバーよりもheightが大きくなってしまいます。 その際、サイドバーの背景が、記述されたメニューの部分までしか反映されません。これについて、エントリ部分の高さまで敷き詰める方法を教えて頂けませんでしょうか? 色々調べたところ、(http://css-happylife.com/log/css-template/000028.shtml)こちらで、width固定デザインの際にcontainerに背景画像を指定する方法が紹介されていました。 ただ、今回お伺いしたいのは、containerのwidthを%指定するリキッドデザインの場合、です。左右のサイドバーにはそれぞれ別の背景画像を指定したいと考えているのですが、それは可能なのでしょうか?

  • FC2ブログの背景に写真を使いたい

    FC2ブログを使用して まだ1ヶ月位の初心者です ただ、ブログは初心者ですが パソコンとネットの知識は中級と自己判断してます それでOSはビスタで ブラウザはFirefox3.5なんですが ブログの背景に、現在はテンプレートを使用してます しかし、ここに自分の写真を入れられる事を知って 変更したいと考えました ただ、入れるとしても 画像の大きさから考えて 1枚で…は厳しいと思うんで、2~3枚を横に並べて 設定しようと思います そこで聞きたいんですが 下記HPで変更方法の解説を見ました 『背景の色を変更』 http://blog.fc2.com/custom_manual/#m004 そこには、こういう↓書き方で解説してましたが -------------------------------------------------------------------------------- body { background-image : url("画像のパス"); /* 背景画像の設定 */ background-repeat : repeat; /* 背景画像を横縦タイル状に並べる */ background-position : left top; /* 開始位置を画面左上に設定 */ background-attachment : fixed; /* 背景画像の位置を固定 */ ------------------------------------------------------------------------------- これが私のブログです↓ ------------------------------------------------------------------------------- body { background-color: #3F3F3F; color: #333333; font-family : Verdana, "MS Pゴシック", sans-serif; font-size: x-small; background-image: url(http://blog-imgs-41.fc2.com/t/m/p/tmpllabo/tmpl013_bg.jpg); background-repeat: repeat-x; background-attachment: fixed; background-position: center top; } ------------------------------------------------------------------------------------- 解説から考えると、私のブログ内の 「background-image: url(http://blog-imgs-41.fc2.com/t/m/p/tmpllabo/tmpl013_bg.jpg);」 内の“http://blog-imgs-41.fc2.com/t/m/p/tmpllabo/tmpl013_bg.jpg” の部分に写真のURLを入れれば良いんでしょうか? それと、以前、私が読んだ本の中には 「写真は予め、タイトル部分の大きさ780×200ピクセルに 合わせてリサイズしよう」 と書いてありました しかし、添付した写真が私の現背景写真なんですが 枠で囲んだ部分が、そのサイズなんでしょうか? もし、そうだとしたら このサイズ、どうやって測るんでしょうか? ちなみに右クリックでプロパティを見ようとしても 画像では無いからだと思いますが 右クリックの項目にプロパティの項目が出て来ません もし違うとしたら、どの様に解釈すれば良いんでしょうか? 又、何か気を付ける事は、あるでしょうか? 宜しく御願いします

  • フッターの背景に色を指定したいのですが、

    フッターの背景に色を指定したいのですが、 下記内容でフッターを記述し、 "#"には任意の画像またはテキスト等を指定しています。 <div id="footer"> <img src="#" /> </div> CSSで footerにheight:100%;や、 height:autoを試しましたが無理でした。 下記サイトのような感じで、ブラウザの一番下までフッターの背景の色を指定したいのですが、教えていただけないでしょうか? 宜しくお願いいたします。 http://www.nattoku.jp/ http://www.lets-co.com/

    • ベストアンサー
    • HTML
  • FC2ブログ テンプレートのCSS編集について

    こちらのテンプレート http://labyrinth2014.blog.fc2.com/ 記事が長くなると、右サイドメニューの背景が 下部のフッターから離れてしまいます。 この背景は画像になっていますが、記事の長短に関わらず、 フッターまで伸ばすには(繋がるように)どうしたらよいでしょうか。 /* 全体の幅 -------------------------------------------------*/ #container{ text-align: left; width: 950px; padding: 0px; border-right:1px solid #ddd; border-left:1px solid #ddd; margin:0 auto; line-height: 110%; background-color: #fff; } /* 右カラムの幅 -------------------------------------------------*/ #right{ float : left; width : 280px; overflow: hidden; background-color: #eee; background-image : url(http://blog-imgs-35.fc2.com/w/e/b/weboook/gray3.png); background-repeat:repeat; } /* メインの幅 -----------------------------------------------*/ #main { float : left; width : 670px; margin:0px; padding: 0px; overflow: hidden; } ・ ・ ・ 中略 ・ ・ ・ /* サイド右側*/ .sidetitle{ color: #333; font-size:16px; font-weight : bold; text-align: left; background: url(http://blog-imgs-35.fc2.com/w/e/b/weboook/whiteline.png) repeat; padding: 5px 5px 6px 8px; margin : 0px 0px 0px 0px; } .sideblock{ font-size:12px; line-height: 150%; padding: 10px 5px 10px 5px; margin-bottom:15px; } .side ul { padding: 0px; margin : 0px; } .side li { list-style-type : none; display:block; text-align: left; font-size: 12px; color:#333333; line-height: 130%; } .side li a { padding:6px 5px 5px 10px; display:block; border-bottom:1px solid #ddd; } .side li a:hover{ background-image : url(http://blog-imgs-35.fc2.com/w/e/b/weboook/bgGray.png); background-repeat:repeat; text-decoration:none; padding:7px 4px 4px 11px; } よろしくお願いします。

  • FC2ブログでランダムに表示される画像の下にコメントを入れたいのですが

    FC2ブログでランダムに表示される画像の下にコメントを入れたいのですが方法がわかりません。 ブログ初心者です。下記で画像をランダムに表示させることはできました。 (http://q.hatena.ne.jp/1182622592を参考) <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); img[0] = "http://blog57.fc2.com/a/adobeurawaza/file/aboutlogo.gif"; img[1] = "http://blog57.fc2.com/a/adobeurawaza/file/barlogo.gif"; img[2] = "http://blog57.fc2.com/a/adobeurawaza/file/columnlogo.gif"; img[3] = "http://blog57.fc2.com/a/adobeurawaza/file/linklogo.gif"; img[4] = "http://blog57.fc2.com/a/adobeurawaza/file/tecniquelogo.gif"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' alt='・'>"); //--> </SCRIPT> 各画像の下にその画像についてのコメントを入れたいのですがどのようにしたらよいのか わかりません。 どうぞよろしくお願いします。