![見出し画像](https://assets.st-note.com/production/uploads/images/44233927/rectangle_large_type_2_b5a30cb0a164c69723e0c256d6172303.jpeg?width=1200)
Photo by
brandkojo
[Blogger #007] 1カラムレイアウトを真似する、余白を調整する
かっこいいフッター部分を真似たので、サイドバー側に表示するものがなくなっている。最新とか置いてみたものの、しっくりこない。で、結局、サイドバーをなくした1カラムレイアウトを真似することにする。参考にしたのは、もちろん、ふじろじっくさんのとこ。
小細工でなく全消し
記事を参考にするとしても、消し方は、サイドバーセクション消し去ったよって書いてあるのみ。じゃあ、まずは、サイドバーのセクションを探さねばということで、テーマのhtml編集内で、”サイド”で検索。ありました。CSS部分だと、
全体設定の #sub-content、@media内の#sub-content
サイドバーってとこの、#sub-content ~ #sub-content .widget h2
のところです。HTML部分だと、
<div id='sub-content'> ~ </div>
どちらも、コメントアウトして、テスト。無事、セクションが消え去りました。確認は、レイアウト画面にいって、記事とフッター1の間にあったサイドバーってのが消えたので確認できます。こんな感じ。
左右の余白調整
ワンカラムにする前から気になってたサイドの余白とか、ブラウザの横幅いじると、結構、左寄りになっちゃう。余白関係も真似していかねば、バランスが悪すぎる。とりあえず、CSSの中から、#main-content #single このあたりから真似して、本文の位置を調整。
#main-content {margin: 3em auto 0;max-width: 950px;}
#single{
padding: 1em 2em 1em;
border-radius: 5px;
}
ナビバーとか、その他、個別に調整していかないといけないので、ちょっと時間がかかりそう。もういっそのこと、CSSエリアの丸ごとコピペしたくなる衝動にかられる。でも、しっかり一つづつ調整しないと、わけわからなくなりそうなので、じっくり調整していこうと思います。
この調整は細かくなりすぎるし、CSSのお作法をググってもらえばいい話なので、基本は割愛。何か特筆することあったら、記事に書くことにします。
今日は、ここまで
この記事が気に入ったらサポートをしてみませんか?