サポート » 使い方全般 » CSSのカスタマイズ

  • 解決済 nice-guy

    (@nice-guy)


    みなさん、こんにちは。
    CSSの書き方が色々やってもわからず煮詰まってしまったので、教えてください。
    テーマはWordPressの教科書 Ver4対応をカスタマイズしたものです。
    (1)http://www.itotekkin.co.jp/1.png
    サイドバー
    下の枠がずれているので、もう少し右にずらしたい

    (2)http://www.itotekkin.co.jp/2.png
    「詳しく見る」の文字だけ、もう少し左に寄せたい

    (3)http://www.itotekkin.co.jp/3.png
    フッター部分、このようにしたい。背景画像としてbg_footer-containeorgr.pngを指定している。

    これらの3点、教えて頂けませんか。よろしくお願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • こんにちは。
    数値の設定で直ると思います。
    以下、変更・追加部分を記します。

    (1)
    common.css 275行目
    paddingの左を 0 にすると左は揃いますが、右がずれます。
    画像bg_sidebar_primary_column_shadow.pngのサイズを調整する必要があると思います

    #primary aside {
    padding: 20px 5px 10px 0px;
    }

    (2)
    common.css 410行目
    a要素の幅、背景画像の位置を指定してpaddingの値を調整

    .continue-button a {
    background-position: right bottom;
    width: 80px;
    padding: 9px 12px 7px 12px;
    }

    (3)
    #footer-containerにボーダーの指定、paddingの調整
    別のスタイルシートに同じセレクタの指定がありますが、特に理由がなければ
    まとめてしまったほうがよいかと思います。

    common.css 381行目
    #footer-container {
    border-top: 30px solid #0000f6;
    }

    layout.css 65行目
    #footer-container {
    padding-top: 10px;
    }

    トピック投稿者 nice-guy

    (@nice-guy)

    bujin450 さん、親切にどうもありがとうございました。返事が遅くなってすみません。
    大変助かりました。
    2点目はうまくいきました。
    1点目、左は揃いました。画像を修正したのですが、右が微妙にずれています。これは画像の方で修正するしか無いのでしょうか?横幅は同じ250pxにしているのですが。
    3点目、
    layout.css 65行目
    #footer-container {
    padding-top: 10px;
    はcommon.cssの方へ移動させました。
    しかし、まだ思ったように一番下に太い青い線が行きません。すみません、もう少し教えて頂けませんか。よろしくお願いします。

    こんにちは。

    下に青い線があったのですね。左にもあるようですが。
    以下でどうでしょうか。

    #footer-container {
    margin-bottom: 15px; ← 線の下にスペースができるのでなしか値を0に
    border-top: 30px solid #0000f6;
      border-bottom: 5px solid #0000f6; ←下のボーダー 値は適当に変更してください
    border-left: 5px solid #0000f6; ←左のボーダー
    padding-top: 10px;
    }

    #footer {
    height: 16px; ←この指定をしていると下のボーダーが上がってしまいますので無しか数値変更
    }

    トピック投稿者 nice-guy

    (@nice-guy)

    bujin450 さん、親切にどうもありがとうございました。返事が遅くなってすみません。
    大変助かりました。
    何度もすみません、まだ空間が空いてしまいます。
    すみません、どうか教えて頂けませんか。
    また、1点目、右が微妙にずれてしまうのは、画像ファイルそのものの修正が必要なのでしょうか。
    どうぞよろしくお願いします。

    >何度もすみません、まだ空間が空いてしまいます。

    空間があく、というのはどこになりますか?
    フッターの絵と最下部ラインの間であればこれで無くなります。

    p#copyright {
    margin-bottom: 0;
    }

    >また、1点目、右が微妙にずれてしまうのは、画像ファイルそのものの修正が必要なのでしょうか。

    2つの背景画像の横サイズは同じ250pxですね。
    このボックスの幅が微妙に250pxより広いので背景がリピートしてずれて見えているようです。
    背景画像をY方向のみリピートすると見た目上は一致します。
    余白があるので何かの時に悪さするかもしれませんが。

    #primary ul, #primary div {
    background-repeat: repeat-y;
    }

    • この返信は6年、 5ヶ月前にbujin450が編集しました。
    トピック投稿者 nice-guy

    (@nice-guy)

    bujin450 さん、ご親切にありがとうございます。
    なんとか再現できました。
    本当に助かりました。
    本当にありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「CSSのカスタマイズ」には新たに返信することはできません。