ヘッダーの余白を減らしました

ヘッダーの余白を減らして、パソコンで見るには、スクロールを減らせて都合よくなりましたが、
スマホなどで見るとタイトルが縦に並んでしまうことが分かりました。
うさぎのWPでのこの設定は取りやめました。(9/28)

このページを参考にスタイルシートでカスタマイズしました。twenty eleven です。
http://presentnote.com/header-css/    とてもいいです。

外観 → テーマ編集 で子テーマがひらきますので見ることができます。

★文字の上の灰色の線を消しました。
#branding {
border-top: 0px solid #bbb;   2pxを0pxにしました。
padding-bottom: 1px;
position: relative;
z-index: 9999;
}

★タイトル文字の上のパディングを少なくしました。
#site-title {
margin-right: 270px;
padding: 0.65625em 0 0;  この数値を減らしました。3.6・・だった
}
#site-title a {
color: #111;
font-size: 30px;・・・・ここで文字の大きさを変えられます。
font-weight: bold;
line-height: 36px;
text-decoration: none;
}

★サブタイトルの下のマージンを少なくしました。
#site-description {
color: #7a7a7a;
font-size: 14px;・・・・ここで文字の大きさを変えられます。
margin: 0 270px 0.65625em 0;  この数値を減らしました。3.6・・だった
}

★検索のフォームが兎の画像に乗っかってしまったので、
上にあげました。
/* Search Form */
#branding #searchform {
position: absolute;
top: 1.8em;  この数値を減らしました。3.8でした。
right: 7.6%;
text-align: right;

ヘッダーの余白を減らしました” への7件のコメント

  1. 小町です
    ソースを使えない私でも理解できる説明ありがとう!!
    これから先ソースを使えないのでとても不安だったのですが
    少し安心いたしました。早速試してみました。

  2. れんとです。
    上のスペースが気になっていましたので 早速試してみました。
    丁寧に書いていただいてあるので安心してソースが触れました。
    これからもよろしくお願いします。

    • ここでは、マージンやパディングが「em」で指定されていますね。ピクセルではきちんと反映されないブラウザがあるせいらしいです。多分、スマホとかへの配慮ね。で、今回のような独立したパディングやマージンの時は良いのだけど、フォントなどの設定は大変です。

      フォントは普通のブラウザように14pxとかの他に、もう一つ1.78●●●emみたいに書いてあるのね。で、変えるときは両方変えないといけないそうです。なので、12pxだったら9pxに変えて、emの数値を3/4にするとか。割り切れないときはどうするの?? ってね。すごく面倒みたい。

  3. この修正をすると、レスポンシブWebデザインに対応できなくなりませんか ^_^;;
    Webブラウザの幅を狭めたり、モバイル端末で確認できますよ。

      • WPで遊ぶならレスポンシブ対応は制約が厳しいですし、無理にレスポンシブ対応にする必要はないと思います。
        投稿するときにモバイル端末でどう見えるかは考えていないでしょ ^_^

        • これから作るページはレスポンシブ対応じゃなくちゃと思いますが、難しいですね。

          やっとブログを書くだけの人から、カスタマイズに足を踏み入れたばかりですから、スタイルシートのことなどゆっくりチャレンジしたいのに、足をすくわれるようです。

          今回、レスポンシブ対応に関しては、知っておくけど目をつぶるということにしたいです。知らないままでいたくないので、のぶさん、本当に助かります。これからもチェックしながら遊んでみます。

          iphonすぐ充電が切れるので、リクエスト来ても間にあいません。とほほ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です