公式テーマEmporioでは、トップページ（ホーム画面）の幅をカスタマイズで変更できます。
ただ、記事の画面での幅はHTMLの編集でしか変更できません。
本記事では、そんな記事画面の幅の変更方法を解説します。
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
幅変更方法
幅の変更は３か所あります。
メイン（記事）の幅とサイドバーの幅、そして全体の幅です。
メインとサイドバーの間には隙間があるので、メイン幅 + サイドバー幅 ≠ 全体幅です。
メインの幅とサイドバーの幅を決めて、最後に全体幅を調整するとやりやすいかと思います。
サイドバーの幅
HTMLの編集画面で.item-view .sidebar-container{を検索をします。
その数行下にあるmax-widthとwidthの数値を変更します。
この２つの数値は同じ値にしてください。
自分はホーム画面のサイドバーの幅と同じにしたかったので、数値ではなく$(sidebar.width)で指定しました。
この指定で、カスタマイズでのサイドバーの幅変更が反映されるようになります。
margin-$startSide:0;
box-sizing:border-box;
margin-top:15px;
max-width:$(sidebar.width);
padding:10px;
width:$(sidebar.width)
}
メイン（記事）の幅
HTMLの編集画面で.item-view .main-container{を検索をします。
その数行下にあるmax-widthの数値を変更します。
自分はサイドバーの幅を広げたのでこちらの数値は下げました。
全体の幅
HTMLの編集画面で.item-view .centered-bottom{を検索をします。
その数行下にあるmax-widthの数値を変更します。
サイドバーの幅とメインの幅を指定してからブログを確認すると、サイドバーがメインの下に移動していることがあります。
これは、全体幅をオーバーしているから起こる現象です。
対策はメインの幅とサイドバーの幅を狭く指定するか、全体幅を広く指定するかになります。
当ブログでは全体幅を広げました。
margin-left:auto;
margin-right:auto;
max-width:1200px;
padding-right:0;
padding-top:0;
width:100%
}
実際のブログを確認しながら数値を決めよう！
参考に当ブログの数値を載せましたが、自由に変更してください。
繰り返しになりますが、サイドバーがメイン（記事）の下にまわってしまったら
- メインの幅とサイドバーの幅を狭く指定する
- 全体幅を広く指定する
で対処してください。
自分好みの幅にしてみてくださいね！
