• 締切済み

リキッドレイアウトについて

現在MTでブログを作成しています。 ３カラムのため、閲覧者がたとえば 「お気に入り」ボタンを押した時など、 右側のサイドバーが端に追いやられてしまい、 半分くらいしか表示されません。 そこで、リキッドレイアウトで、 左右のサイドバーが真ん中に集約されるように したいと思っています。 ですが、リキッドレイアウトに変更するやり方がわかりません。 「どのタグを、どの部分に埋め込めばいいか」、 ご存知の方おられたら教えてください、お願いします。

みんなの回答

  • aqucent
  • ベストアンサー率39% (78/200)
回答No.1

以前、回答した内容の流用ですが、参考にどうぞ。 OKWave ホームページのWindowsに表示される画面サイズ http://okwave.jp/kotaeru.php3?q=2286929

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • リキッドレイアウトについて疑問です。

    スマホ用のサイトと1本化もできるので、最近はリキッドレイアウトで組んでいるサイトも 多いですが画像を多用しているサイトの場合は向いていないような気がしています。 ウィンドウの幅によりコンテンツ枠も増減しますが、モニタのサイズや解像度によって 最初の見え方って違いますよね？ 左カラム(サイドバー)が30%で右カラム(メインコンテンツ)が65%だとしてもあくまでも %指定なので画像は何pxで作成すればいいのか？と疑問になります。 自分の環境では、右カラムに画像を配置するには650pxでジャストだとしても他の 環境で見れば必ずしもジャストではないでしょうし、min-widthで650pxを指定すれば 問題ないですが、今度はスマホだとフィットしなくなります。 基本的に、テキストベースのサイトで画像は背景画像のみ使用しかつrepeat-xで 見栄えに差支えないものじゃない限りリキッドレイアウトできれいに見せるのは 無理なのかと思っているのですがいい方法ってあるんでしょうか？ 仮にimgにwidth:100%としても作成したサイズより大きくなれば荒く見えますし overflow:hiddenにすると全てが見せれなくなってしまうので、どうすればいいのか 悩みどころです・・・

    • ベストアンサー
    • HTML
  • [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ブログにてテンプレートの設定を弄っているのですが、上記の方法がどうしても分かりませんでした。 現在の設定は全体の幅を98％として設定し、各カラムも適した値の％で設定しています。 しかしこれでは、ワイドサイズのモニタの場合、広くなりすぎてしまい、非常に見づらくなってしまいます。 そういう状態を避けるためにも、ある程度の幅で自動調整をストップさせたいのですが、その方法が分かりません。 どうかよろしくお願いします！

    • ベストアンサー
    • HTML
  • ＭＴで3カラムレイアウトの中心の部分に・・・

    いつもお世話になります。 ＭＴをカスタムしてブログを作成中なんですが、超初心者なもんですから宜しくお願いします。 3カラムレイアウトの真ん中の部分、自分でエントリーした内容が表示される部分を四角い枠で囲みたいのですけどもどのように記述すればよいでしょうか？宜しくお願いします。 2点目の質問 メニューバーを作成し、そのメニューからリンクさせたページを3カラムの中心部分に表示させたいのですが、可能でしょうか？ 以上2点よろしくお願い致します。

  • 3カラムのサイドバーの右側が表示されなくなり,左側の一番下に表示される

    3カラムのサイドバーの右側が表示されなくなり,左側の一番下に表示されるようになりました 色々試しているのですが、全く解決しません どなたか助けてください MT4.2を使っています よろしくお願いします！

    • ベストアンサー
    • CSS
  • gooブログで時々レイアウトが変になります。

    gooブログを利用しているのですが、急にレイアウトが変になってしまう時があります。 カレンダーやブックマーク、トラックバックなどのサイドバーなどは全て左側に表示されていて、細長い形のテンプレートのはずなのですが、たまにサイドバーが左右に分割されて表示され、テンプレートの上部の模様が表示されず、題名も真っ白になってしまう時があります。 次の日にアクセスすると直っていたりするのですが。。 何が原因なのでしょうか？

  • ブログのレイアウトを両サイドバー三段組にしたいのですが・・・

    こんばんはlivedoorブログのレイアウトに関して質問をさせてください。 現在自分のブログのレイアウトを両サイドバーの三段組にしようと思っております。毎日コミュニケーションズの『ポータル、ブロバイダ別　blogデザインカスタマイズ辞典』には document.write('</div><divide="links2">'); というタグを作成し、side2.jsの名でそれを保存し、アップロードするように書いてあります。しかしlivedoorブログでアップロード可能なファイルは GIF, JPG, PNG, BMP のみらしく、何度試みてもエラーが発生してしまうのです。それとも僕のやり方が間違っているのでしょうか？ ご回答はお時間がある時で結構です。よろしくお願いします。

  • windowsのIEだけレイアウトが崩れます。

    ブログをMT-3.32で作っていますが、windowsのIEで閲覧した場合、レイアウトが崩れて見れません。 ※他、firefoxの場合、macのIEは見れます。 何が原因か分かりますでしょうか？ よろしくお願いします。 Internet Explorerエラーメッセージ ーーーーーーーーーーーーーーー ライン:101 文字:1 エラー:オブジェクトを指定してください コード:0 URL:http://www.**********.ne.jp/

  • ブログのレイアウトの崩れの原因が分かりません

    livedoorのブログのレイアウトをカスタムしているんですが、どうしてもレイアウトの崩れを回避出来ずに困っています。 具体的な症状ですが、記事本文にjavascriptタグを記入するとサイドバーの位置がおかしな場所にズレてしまいます。 本文のタグを消すと元通り、正常な表示になります。 レイアウトは２カラムで、本文の位置、内容共に問題無く表示されますが、本来本文の真横にサイドバーが来るハズなのに、本文が終わった最下部の位置からようやく表示されます。 参考イラストがこちらにあります。 【https://www.dropbox.com/s/3j1lwr40klm949i/%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%BA%E3%83%AC%E3%80%80%E8%B3%AA%E5%95%8F.jpg?dl=0】 ※参考イラストでは『次の記事　前の記事のボタン』が崩れている場面においても記事本文下に正常表示されていますが、これは色々試している中で正常な表示になる事もあった位の話で、これらのボタンも位置がおかしく、サイドバーの部分に表示だったりとおかしくなっています。　 試した事は以下です。 (1)cssに記述されている『#main-inner』や『#sidebar』の箇所のwidthやpaddingの数値を変更。 （以前スクリプトを本文に記述していない頃、レイアウト決めで今回と同じようにサイドバーが正常位置に表示されない事があり、その際は単に横幅が足りなかっただけのようで、数値を調整する事で正しい元の位置に表示できましたが、今回は以前のそれとは関係ない模様） (2)htmlの</div>の位置や書き忘れ 原因を調べている段階でこちらのサイトを見つけ、 【https://sagadylan.com/blog-layout-fix/】 今回の原因はコレと同じ原理なのではと色々試してみましたが、何分cssやhtmlに詳しい訳ではないので解決までのイメージがイマイチ理解出来ていません。 とりあえず物は試しとhtmlの怪しそうな箇所に</div>を記入しては戻し記入しては戻しと試してみたりもしました。 今回のレイアウトはlivedoorが用意しているテンプレートを使用していますが、 ちょこちょこ色を変えたりボーダーラインを四隅にひいたりと変更しているので、 知らないうちにDivタグを付け忘れてしまった、或は本来あるべき位置ではなく別の場所に終了タグを置いてしまっているのか… もし解決に必要な情報が他にあれば、回答の際に教えて頂けるとお礼欄にて追記させて頂きたいと思います。

    • ベストアンサー
    • CSS
  • ページのレイアウトについて（素朴な疑問）

    素朴な疑問です。 ブログだけでないのですが、レイアウトでページの左右両側が空白で真ん中だけに縦長で本文やその他の情報が表示されるページってありますよね？ PCでみていると非常に表示効率の悪いと思えるのですが、このレイアウトにはどの様な利点があるのでしょうか？ 携帯等での表示用かとも考えたのですが、携帯での表示では、また専用のフォーマットで表示されているので違うのかと思いました。 ご教示をいただければ幸いです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する