希望としては、この左右の余白のスペースを小さくするか、ブラウザのウィンドウの横幅を縮めるときにまずは左右の余白から小さくするような設定にしたいと考えております。
こういうのはスタイルシート (CSS) を編集すればよいです。たいていは style.css だけの編集で十分です。場合のよっては、印刷用／モバイル用の CSS が存在する場合があるので、こちらも適宜編集します。
で、このテーマは、style.css で layout.css, blueflavor.css を呼んでます。たぶん前者を編集すればいいでしょう。
そして、XHTML の方も見てみると、body 直下に div id=”wrapper” というのがあります。ページ全体に余白がついているので、この要素に対するスタイルを変更すればいいと当たりを付けてみます。layout.css を見てみると、
#wrapper {
padding: 20px 0;
width: 75%;
margin:0 auto;
}
というのがありました。どんぴしゃりです。確かに余白多すぎですね 😉 width: 95% ぐらいでよいと思います。もしくは width 指定をやめて、padding:20px; とする (上下左右すべて 20px) のがいいかもしれません。
いつも的確なアドバイスありがとうございます。今パソコンが手元にないため、明日早速挑戦させて頂きます。今後とも宜しくお願い致します。
lilyfanさん。ありがとうございます。教えていただいたとおり、layout.cssを書き換えて余白を小さくできました！また、ついでに上下の余白も20から10Pxへ変更し。メニューの縦幅も小さくすることに成功いたしました。
本当にありがとうございます。
ところで、http://www.treatneuro.com/
このサイトのブログの題名の下に、副題があります。ちいさなパソコンで見る目的のためこの副題を消して、Headerの縦幅を小さくしたいと考えております。
layout.cssのHeader調節項目の、Header #2の情報をすべて消したところとても大きな副題が現れました。この副題を表示しない設定にするにはどうしたらよろしいでしょうか？
いつも質問ばかりで申し訳ございません。ご負担にならない範囲で教えていただけると幸いです。
今回細かく手順を書いたのは、「以後自分でも作業できるように」という意味でノウハウを伝授するためです。なかなか1回では分からないと思いますので、今回も書いてみますが、今後はできるだけご自身で作業してみてください。
まず、副題がどういう XHTML 要素で書かれているか確認します。ブラウザーで XHTML ソースを出してみると、どうやら h2 要素で囲まれているようです。
そして、すべてのページで出てくるものなので、header.php に出力指示が書いてあるはずです。おそらく
<h2><?php bloginfo('description'); ?></h2>
みたいなコードになっていると思います。ということは、この行を消してしまえばいいわけです。
実際には記述が違う可能性があります。その場合は、XHTML 要素の対応や、php コードの開始／終了コードの対応が不正にならないように、注意深く確認しつつ、消してみてください。
ご親切にありがとうございます。lilyfanさんの意図も了解です！
徐々に飲み込めて来ました。このような方法が書かれているような本やサイトを探し、自分で把握できるように頑張り、できるようになったらフォーラムでも質問に答える側に回れればと思います。
よろしくお願いいたします。
