JetTheme 画面を右に寄せる方法
<!-- markdown-mode-on -->
## **概要**
JetThemeのデフォルトでは、主記事とサイドバーを合わせた要素が中央に配置される設定であって、主記事だけで見ると画面の左に寄った見栄えになっている。
これを主記事が画面の中央になるようにカスタマイズを行う。
<a name="more"></a>
## ✅ CSSコードの全体像
```css
/* 画面を右にずらす */
@media (min-width: 992px) {
/* 全体は右にずらす */
.container {
margin-left: calc((100% - 1140px)/2 + 60px) !important;
margin-right: auto !important;
}
/* copyright部分だけ中央に戻す */
#copyright.container {
margin-left: calc((100% - 1140px)/2 - 160px) !important;
}
}
```
これは `.container` クラス（通常ページ全体を囲む要素）を、**通常の中央配置の状態から右に60pxずらす**ためのコードです。
---
## 🔍 解説
### 🎯 通常の中央配置の仕組み
中央配置はふつう、以下のような CSS で実現されています：
```css
.container {
width: 1140px;
margin-left: auto;
margin-right: auto;
}
```
* `auto` により、左・右の空白（余白）が**同じ量**になるように計算され、**中央寄せ**されます。
* `100%` は画面全体の横幅（viewport width）。
* `100% - 1140px` は、**左右両側の余白の合計幅**。
* それを `/2` すると、**左側の余白の幅**が得られます。
---
### 🧮 今回の計算式の意味
```css
margin-left: calc((100% - 1140px)/2 + 60px);
```
これを分解して見ていきましょう：
| 部分 | 意味 |
| --------------- | ---------------------------------------- |
| `100%` | ブラウザ画面の横幅（= ビューポートの幅） |
| `1140px` | `.container` の最大幅（JetThemeではこの値が指定されている） |
| `100% - 1140px` | 両側の余白の合計 |
| `/ 2` | 左右均等に分ける → **左側の余白** |
| `+ 60px` | **左側の余白をさらに60px増やす** → 中央配置を**右にずらす** |
---
### 🎯 PCだけに限定しないと、スマホで画面が乱れる
スマホでは 100% - 1140px が「負の値」になる
たとえばスマホ画面の幅が 390px だとすると：
```text
100% = 390px
→ 390px - 1140px = -750px
→ (-750px) / 2 + 120px = -255px
```
つまり：
```css
margin-left: -255px;
```
になります。左に255pxもはみ出す！＝画像や内容が左に流れて見えない！
**🛠 修正コード例（幅992px以上のPCだけ適用）**
```css
@media (min-width: 992px) {
.container {
margin-left: calc((100% - 1140px)/2 + 60px) !important;
margin-right: auto !important;
}
}
```
---
## 📐 フッター・コピーライトの位置を調整（好みの問題）
全体が右寄りになったので、見かけが中央配置になった主記事に比べて、フッターのCopyrightが右寄りになってしまう。これを主記事の位置に合わせる調整を行う。
### 🔧 copyright.container だけ打ち消す対処用CSS
```css
@media (min-width: 992px) {
/* 全体は右にずらす */
.container {
margin-left: calc((100% - 1140px)/2 + 60px) !important;
margin-right: auto !important;
}
/* copyright部分だけ左に動かす */
#copyright.container {
margin-left: calc((100% - 1140px)/2 - 160px) !important;
}
}
```
## 関連リンク