まとめ
ネットで調べた事を試してみたものの何故か上手くいかない。このスキンのパターンをうまく使えばいいような気がしたので、いじらないことにした。以下は詳細。
タイトルの通りだけど文字の入力幅が狭い。文字の大きさのように調整できないかスタイルシートを調べていく。CSSで画面の幅を指定するには[width]と書く筈なので、どこかにwidthがある筈。エディタにコピペして検索していると以下のような記述が沢山ある。
@media only screen and (max-width: 782px) {これは「画面の幅が 782px しかない端末だったらそれに合わせて設定を変えてね」みたいな記述だろうか。便利そうなので、これはこのまま使いたい。全体を決めているものは無いように思える。
それじゃあ書き足せばいいって事か。…どうやって書くんだっけ。と思ってGoogleで検索すると、みんな悩んでいるらしく分かりやすく紹介されているページが見つかった。その方法を試す。以下のコードを書き足せばいいみたい。以下は引用。
.post .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
max-width: 780px !important;
}一番下に追記。確かに書き込むと広がる。でもタイトルやその下の線が広がってない。タイトルも広げたい。以下のように説明があるので、無くすことにした。
cssのセレクタの先頭に「.post」がありますが、これを追加したのは投稿ページにのみこのスタイルを適用したかったからです。これを「.page」にすると、固定ページ（トップページとか）に適用されます。なくすと、投稿ページ固定ページ両方に反映されます。
「Twenty Twenty-One」タイトルサイズ、テキストの表示幅を調整してみた！
とあるので取って見る。以下のように書いた。
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
max-width: 780px !important;
}すると何も変わってない気がする。この記述の意味は何なのか、気になってきた。notが沢山ついているのが気になる。これを取ってみよう。
.entry-content > *{
max-width: 780px !important;
} これでも結果は同じだった。続いて「!important;」と言うのは優先順位を決めているらしい。通常CSSは後から入った方が優先されるけど、これを書いておけば真ん中の方に入っていても大丈夫って事？かな。一番下に書いているので、いらないだろう。取ってしまう。
.entry-content > *{
max-width: 780px;
} すると幅がまた狭くなってしまう。って事は、他のどこかで定義しているようである。次は「> *」が気になったのでこれまた取って見る。するとまた元に戻るので必要な記述らしい。
色々とページを読んでいるとCSSセレクタという言葉の意味を理解した方が良さそうなので、そちらを調べて見る。そうしたら分かりやすいサイトがあった。「*」というのは全ての要素という意味しらしい。「>」は何だろう？
自分の作ったページのソースを表示させると、文字幅が広がったところは<div class=”entry-content”></div>という記述で囲まれている。classを見て編集しているのか。何となく仕組みがわかった気がする。
タイトルの方は<h2 class=”entry-title default-max-width”></div>で囲まれているのでこちらも広げてしまえばいいのではないか。
.entry-title default-max-width > *{
max-width: 780px !important;
} こんな風に書き足してみたけどダメだった。うーん？
中途半端に広げても仕方ないので、元に戻す事にする。というより、このテーマのパターンが気に入ってきた。そっちを使えいう事らしい。