Wordpressの固定ページをCSS手打ちしたい。

なぜそんな無駄なことを？自分でもわからない…

あ、初学者の混乱吐き出しメモなんで何かの参考にと思ってきた人がいれば読まない方がいいです。

・HTML/CSSの勉強のためにサイト作りましょう

・せっかくだから自分の好きな作品についてのサイトを作りましょう。

・固定ページの他にブログ形式での更新もしたい。だったらWordPressだ！。

・でもせっかくだから自分の思う通りのレイアウトを作りたい…固定ページにCSSを追加してやればいいんだ！

何が目的で何が手段か自分でもわからなくなっています。

WordPressはLightningというフォーマットを採用しました。なぜなら「いちばんやさしいWordPressの教本」という本にそれがおすすめされていたからです。

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教える本格Webサイトの作り方 「いちばんやさしい教本」シリーズ

んで、VK All In One Expansion Unitというプラグインもインストール。なぜならダグラス浜田もとい「いちやさ」にそう書いてあったから。

固定ページにはHTMLを書き込めるし、VK All In One Expansion Unitの機能に「カスタムCSS」というCSSを追加する機能もあるので、まぁ行けそう。

WordPressのプレビュー画面では微妙に画面見にくいのでVS CodeでHTML/CSSを書いて、それを固定ページにぶち込む。

想定したものと当然ズレるので、「WordPressの元々のCSS」のうち「自分で打ったCSS」を邪魔するものを順次打ち消していく。

こうやってコードのサクラダファミリアは作られていくのだろうか、と地図のない街をさまよう作業。ただ、「デベロッパーツールでどういうコードが打たれてるか探る」という、僕のような初心者にオススメされる勉強法になってるので結果オーライでは、と自分に言い聞かします。

marginやらは最初ゼロにしてから継ぎ足していけばいいんですが、困ったのが横幅・width。せっかくCSSグリッド勉強して、画面いっぱいのサイズを活かすやり方調べたからそれを実践してみたいのに、どうもデフォでは記事の範囲がbodyの66.6％に設定されてるみたい。横に置きたいものもないし、幅広く生かしていきたいなぁ、と。

んで、その「記事の範囲」に該当するCSSなんですが、デベロッパーツールで確認すると、<div class="section siteContent">という大枠があり、その中に<div class="container">があり、その中に更に<div class="row">があり、さらにその内側に<div class="col mainSection mainSection-col-two baseSection" id="main" role="main">…

全部いるのかこれ？いや、いるんだろうけど。熟練者が用意したであろうテンプレートのCSSに対して、よくわかってねー初心者が好きかってやりたいからってイジる。どっかの絵画の修復みたいなことを今自分がやろうとしてるんだなと。

これがそれぞれメディアクエリも絡むもんだからもんだから混乱してきます。

@media (min-width: 768px)
.container, .container-md, .container-sm {
   max-width: 720px;
}

@media (min-width: 576px)
.container, .container-sm {
   max-width: 540px;
}

@media (min-width: 768px)
.container {
   max-width: 720px;
}

@media (min-width: 576px)
.container {
   max-width: 540px;
}

どれがどれでどういう意図の幅設定なの?いや、意図はわかるんですが、かなり細かに幅を変えるたびに様々なdivが巧みに幅を変えてきて、理解が追い付かない…

これ、いったん全部１００％にしちまえばいいのだろうか…ということで、脱線もいいところな作業がまだ続いていく。

・デフォの幅は100％で上書き

・その中ではみ出したりしたいようにグリッドを調整

とりあえずこんな感じでやってみればいいのかな。

1200px↑→上限。広々と。

1200～992px→はみ出さないように

992～768px→さらに縮小

768px↓→1カラムで幅広に。

こんな感じ？

語尾そろえるのとかめんどくさくなってきたね。いい感じ。