【Simplicity2カスタマイズ】メインカラム・サイドバーの横幅を調節する

【Simplicity2カスタマイズ】メインカラム・サイドバーの横幅を調節する

当ブログのWordpressのテーマをWordpress公式テーマ「TwentyTwelve」から寝ログを運営しているわいひらさんという方が作ったテーマ「Simplicity2」に変更したので、「Simplicity2」のカスタマイズを備忘録がてら記事にしていきます。

この記事は「メインカラム・サイドバーのサイズを変更し、サイトの横幅を調節するCSS」を解説していこうと思います。

デフォルトでは少し幅が狭かったので、少しサイトの幅を大きくしてみました。

これはPCでの表示だけのカスタマイズです。モバイルでの表示は変わりません。

スポンサーリンク

サイトの幅を調節 Before After

カスタマイズする前とカスタマイズ後の変化を見ていきましょう。

・Before
サイトの幅 変更

PCで表示してみるとこのようになります。

中央にギュギュっと詰まってる感じがして窮屈だったので少し幅を広げていこうと思います。

・Afterサイトの幅 変更

カスタマイズ後はこのようにメインカラムとサイドバーの幅を広くしました。

こうしたことで窮屈な感じがなくなり、余裕を持たせることができます。

・記事と記事の境界に線を引くカスタマイズはこちらで解説しています

・上の画像のようにサムネイルを横長にしたいならこちら

・投稿日とカテゴリーを右にずらして背景色を変更したいならこちら

サイトの幅を調節 コード

外観 → テーマ編集 → Simplicity2 child → スタイルシート (style.css)

からこちらのコードをスタイルシート (style.css)に追加してください。

コードの中身を説明していきます。

こちらのコード↓は、ヘッダー・ナビゲーション・フッター・サイト幅全体のサイズを設定していきます。

ようするに、「1400px」が表示されるサイト幅全体になり、この幅の中にメインカラム・サイドバーが入っていきます。

次にこちらのコード↓はメインカラムの幅を設定していきます。

記事本文やトップページの記事一覧などの幅を設定することができる。

最後にこちらのコード↓はサイドバーの幅を設定です

コードを追加して、サイトを開いて確認してみてください。

モバイルでサイトを開いたとき、画面幅を超えるように大きく表示されていたらこのコードを「外観 → テーマ編集 → Simplicity2 child → mobile.css」に追加すると表示が崩れないです。

以上で実装完了です!

サイトの幅を調節 まとめ

この記事は、「メインカラム・サイドバーのサイズを変更し、サイトの横幅を調節するCSS」をご紹介していきました。

「メインカラムの幅 + サイドバーの幅」が「全体の幅」を超えてしまうと表示が崩れるので、数値を変えながら確認して実装していってください。

スポンサーリンク
次はこちら



シェアする

  • このエントリーをはてなブックマークに追加

フォローする