[Blogger #007]　1カラムレイアウトを真似する、余白を調整する

かっこいいフッター部分を真似たので、サイドバー側に表示するものがなくなっている。最新とか置いてみたものの、しっくりこない。で、結局、サイドバーをなくした１カラムレイアウトを真似することにする。参考にしたのは、もちろん、ふじろじっくさんのとこ。

小細工でなく全消し

記事を参考にするとしても、消し方は、サイドバーセクション消し去ったよって書いてあるのみ。じゃあ、まずは、サイドバーのセクションを探さねばということで、テーマのhtml編集内で、”サイド”で検索。ありました。CSS部分だと、

全体設定の #sub-content、@media内の#sub-content
サイドバーってとこの、#sub-content ~ #sub-content .widget h2 

のところです。HTML部分だと、

<div id='sub-content'> ~ </div>

どちらも、コメントアウトして、テスト。無事、セクションが消え去りました。確認は、レイアウト画面にいって、記事とフッター１の間にあったサイドバーってのが消えたので確認できます。こんな感じ。

左右の余白調整

ワンカラムにする前から気になってたサイドの余白とか、ブラウザの横幅いじると、結構、左寄りになっちゃう。余白関係も真似していかねば、バランスが悪すぎる。とりあえず、CSSの中から、#main-content  #single このあたりから真似して、本文の位置を調整。

#main-content {margin: 3em auto 0;max-width: 950px;}

#single{
    padding: 1em 2em 1em;
    border-radius: 5px;
}

ナビバーとか、その他、個別に調整していかないといけないので、ちょっと時間がかかりそう。もういっそのこと、CSSエリアの丸ごとコピペしたくなる衝動にかられる。でも、しっかり一つづつ調整しないと、わけわからなくなりそうなので、じっくり調整していこうと思います。

この調整は細かくなりすぎるし、CSSのお作法をググってもらえばいい話なので、基本は割愛。何か特筆することあったら、記事に書くことにします。

今日は、ここまで