背景
記事も少しずつ増えてきたところで、ブログのコンテンツの幅が狭いのが気になってきた。
作業過程
ページのソースを表示し、修正対象の要素を調査する。
mac ✖️ chrome の場合はoption + command + iで表示できる。
mac ✖️ safari の場合はメニューバーの開発から表示する(事前に「環境設定」から開発メニューを表示するを有効化しておく)。
↑ の画像は chrome のもの。個人的には safari の方が確認しやすくて好み。
class=wrapperが怪しそうなので、.wrapperでソースを調べる。
_grid.scssファイルに定義を発見。ブログのコンテンツの横幅は最大 960px になってるみたい
だったので、これで間違いなさそう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| $grid_max_width: 960;
@if global-variable-exists(viewport_size) {
@if $viewport_size == widest {
$grid_max_width: 1600;
} @else if $viewport_size == wider {
$grid_max_width: 1440;
} @else if $viewport_size == wide {
$grid_max_width: 1280;
} @else if $viewport_size == narrow {
$grid_max_width: 800;
} @else {
$grid_max_width: 960;
}
}
$grid_max: $grid_max_width + $grid_max_unit;
$grid_main_main: $grid_main_main_width + $grid_main_main_unit;
$grid_main_side: $grid_main_side_width + $grid_main_side_unit;
$grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
.wrapper {
display: grid;
width: 100%;
min-height: 100vh;
max-width: $grid_max;
grid-template-columns: minmax(350px, $grid_main_main) minmax(250px, $grid_main_side);
grid-template-rows: $grid_navbar_height auto 1fr auto;
grid-column-gap: $grid_column_gap;
grid-row-gap: $grid_row_gap;
}
|
ソースを見るとviewport_sizeなる変数の値からコンテンツの最大幅が算出されるようなので、今後はこの変数の設定方法を確認する。params.tomlファイルに設定があった。
1
2
| # デフォルト値(normal)を好きな値に設定する
viewportSize = "wide" # widest, wider, wide, normal, narrow
|
最大 1280px もあれば十分なのでwideを設定した。
hugo server を再起動する。再起動するときは--ignoreCacheオプションをつけてキャッシュは利用しないこと。
表示が変わらない時はブラウザのキャッシュを削除してリロードする。
広くなった！
コンテンツの幅と一緒に目次の幅も広がってる。。。
目次はそんなに幅広くなくていいので修正する。
同じようにソースから対象のクラスを確認する。
対象はclass="single__side main-side"で main-side に設定されている値を修正すればよいみたい。
data/grid.tomlで設定していた。
1
2
3
4
5
6
7
8
9
10
| grid_max_width = "960"
grid_max_unit = "px" # "px", "\"%\"" Using% is limited to using full width.
grid_main_main_width = "5"
grid_main_main_unit = "fr" # "fr", "px"
grid_main_side_width = "2"
grid_main_side_unit = "fr" # "fr", "px"
grid_column_gap_width = "32"
grid_column_gap_unit = "px" # "px"
grid_navbar_height = "50px" # "px"
grid_row_gap = "0"
|
frという単位初めてみた。１行（１列）に設定する要素のサイズを割合で指定することができるらしい。
初期設定ではメインコンテンツ:サイドバー = 5:2での表示になる。
ソースを見てみたらちゃんと662px:265px ≒ 5:2で表示されてた。
メインコンテンツ:サイドバー = 4:1 くらいがちょうど良さそう。
data/grid.toml ファイルを作成して完成。
修正後のイメージと修正箇所
修正前後のブログレイアウト
メインページで修正前後のレイアウトを見比べてみる
修正前
修正後
全体的に見やすくなった！
描画の最大サイズと比率を変えただけなのでレスポンシブはそのまま、ウィンドウサイズが小さくなってもコンテンツの表示が崩れることはない（多分…ぱっと確認した感じは大丈夫そう）。
修正箇所
レイアウトを変更するのに修正/作成したファイル
コンテンツの最大表示サイズ(幅) 960px -> 1280px
params.toml ファイルの設定値を修正する。
各設定値での最大サイズは_grid.scssを確認する。
メインコンテンツ：サイドバー の表示比率 5:2 -> 4:1
data/grid.toml を修正（作成）する。
grid_max_width も一緒に修正した。
1
2
3
4
5
6
7
8
9
10
| grid_max_width = "1280"
grid_max_unit = "px" # "px", "\"%\"" Using% is limited to using full width.
grid_main_main_width = "4"
grid_main_main_unit = "fr" # "fr", "px"
grid_main_side_width = "1"
grid_main_side_unit = "fr" # "fr", "px"
grid_column_gap_width = "32"
grid_column_gap_unit = "px" # "px"
grid_navbar_height = "50px" # "px"
grid_row_gap = "0"
|
つぶやき
メインコンテンツの幅を修正するとレスポンシブ崩れちゃうんだろうな〜と思っていたが、
変数で柔軟に設定できるようになっていたので感動した。
レイアウトを修正した時のキャッシュ削除がsafariの開発ツールを利用すると結構楽でよかった。
chromeもweb開発用の拡張機能使えばもっと楽になったのかも。
