注目タグ

ブログ、PC初心者集合~~~^^

トピック詳細

ブログのテンプレート自体を中央揃え(センタリング)する方法

HTML/スタイルシートを知っている方 or 多少でも知ってる方に質問です。

現在、私が使っているブログのテンプレートの表示が左寄せ固定になっており
中央揃え(センタリング)で表示しなおしたいのですが
自分で少しは調べて編集しなおしてみるのですが、左寄せから直りません。

HTML編集のほうでは、全体の「枠」であろう最初の<table>の中に
align="center" を入れてみましたが駄目でした。

スタイルシート編集のほうでは、marginの文字のある箇所すべてを
margin: 0 auto; に変更してみましたが駄目でした。

他に考えられるところがわからなくなってしまったので
教えてくださる方募集中です。宜しくお願いします。

2017年03月23日 13:31  by 加納 康

コメント一覧 8件中、1~8件表示

  • 加納 康さん、はじめまして。

    スタイルシートは、結構奥が深いですね。

    やる気になれば、
    かなりのことまで、出来てしまいますよね。

    私も
    もっとうまくなりたいと思っています。

    2017年04月16日 14:24 by Reon

  • Reonさん、こんばんは。はじめまして。

    テンプレートをわざわざ見て、さらには試してくださってありがとうございました!

    位置を動かすのが難しそうだなー…と思って、いじらないでいたのですが
    やはり大変そうですね。下手にいじって、元に戻せないのも困るので
    現行のままでいいかなぁ、とちょっと開き直っておりました。

    でも今回のことで、スタイルシートにもまだまだ知らないことが
    いっぱいあるなーとわかったので、個人的にはプラスでした。

    改めて、ありがとうございました。

    2017年04月16日 01:05 by 加納 康

  • さらに見た目をよくするには

    スタイルシート部分の
    bodyを

    body {
    font-family: "Verdana", "\30D2\30E9\30AE\30 CE\20Pro\20W3", "\FF2D\FF33\20\FF30\30B4\30B7\30C3 \30AF", "Osaka";
    background: #2a3f55;
    //background-image: url(http://templates.blog.fc2.com/temp late/flower/f_bg.gif);
    font-size: 12px;
    line-height: 180%;
    margin:0;
    color:#636363;
    }

    って感じにすると、ごまかせると思います。

    要するに、似た色で全部塗りつぶしました。

    2017年04月15日 21:47 by Reon

  • さっきの続きです


    結論として、中央寄せにはなるけど、
    背景を入れるのがむずかしい・・・

    #oowakuのところに
    height:100%;
    と入れれば、とりあえず、一画面分は何とか表示される

    でも、見えている以外は、
    やはり、表示されないので見た目が悪いです。

    修正部分
    --------------------------------------------

    <body>の下に

    <div id="container">
    <div id="oowaku">


    </body>の上に

    </div>
    </div>


    スタイルシートに

    #container {
    width: 770px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(http://templates.blog.fc2.com/templa te/flower/f_bg.gif);
    }

    #oowaku{
    position:absolute;
    height:max;
    width:770px;
    background-image: url(http://templates.blog.fc2.com/templat e/flower/f_bg.gif);
    }

    を、追加。


    -------------------------------------------------------
    で、中央寄せになりました。

    2017年04月15日 21:46 by Reon

  • 今日暇だったので、

    テストしていたら

    position: absolute;

    の部分をいじらないで
    もっと簡単に
    出来そうです。

    というか、

    position: absolute;

    無関係で実現しそうです。

    出来たら、ソースを書きます。

    2017年04月15日 18:45 by Reon

  • 初めまして!Reonといいます。

    テンプレートのファイル見てみたら、

    スタイルシートの

    いろいろなところで

    position: absolute;

    となっていて

    場所が固定になっているので

    単純にできないと思います。

    上部 (タイトル部分)

    中部左(プラグイン部分) 中部右(メイン部分)

    下部

    と分けて、

    absolute;を使わないで

    少し作り変えないといけないと思います。

    2017年04月14日 16:59 by Reon

  • ピースサインさん、こんばんはー。

    「やり方」はggりましたが、「原因」はggってませんでした。
    なかなか盲点ですね、ありがとうございます。

    特に2番目のリンクは、ためになりました。
    私のブラウザはIEなので。

    よく読み込んで、また修正してみます。
    きっと時間かかると思いますが…!(汗)

    2017年03月24日 21:18 by 加納 康

  • こんばんわ~^^ 多少とも知らない私がコメントして良いものかすごく悩みましたが、

    私にとっても今後の勉強になると思い色々探してみましたww

    頭がパンクしそうです(笑)

    firefoxやchromeでは問題ない事もIEじゃダメなときがあるみたいですね。

    何個かリンクを貼っておくので、参考になれば。。。。



    1・「左・右・中 央寄せが出来ない時の対処法」

    2・サイトレイアウト
    センタリング(中央配置)の仕方


    3・IEでmargin:autoが効かない(センターに寄らない)

    こんなトコでしょうか??

    これぐらいしか出来ずスミマセン。。。日々精進します。。。


    2017年03月24日 01:55 by ピースサイン