ども。U235です。
WEBCOACHのWEBデザインについての学習の一環で、WordPressのオリジナルテーマ開発を行っています。
参考書としている（なぞっている）のは以下の書籍です。
前回に引き続き、CHAPTER3から6まで終了したので、そこまでの覚え書きを記していきます。
また、42日目には6回目のコーチングがありましたのでその所感も。
CHAPTER3
CHAPTER3では、グーテンベルグ（WordPressのエディター）のCSSを整えていきました。
グーテンベルグに必要なCSS
グーテンベルグを機能させる・見栄えを良くするために複数のCSSが働いています。
なぜ複数あるのかというと、グーテンベルグ導入前のエディター・CSSをグーテンベルグに引き継ぐにあたり、このような形式になった……とか。
グーテンベルグでは以下のようなCSSが働いています。
- load-styles.php・インラインスタイル
- style.min.css
- theme.min.css
- style.css
- editor-style.css
上3つ（緑文字）はもともとWordPressが用意しているCSSです。
これらを読み込むことで、基本的な動作はクリア。
テーマ開発者が作成するのは、style.cssとeditor-style.cssの2つ。
style.cssはフロント（他の人が目にするページ）のCSSで、
editor-style.cssはエディター（管理者が記事を作成する画面）のCSS。
フロントとエディターを近づけることで、フロントで出力される見た目を想定しながら記事を書くことができます。
カテゴリーリストの中央揃えについて
もともと入っているCSSでは、画像・ボタン・ファイル等のブロックの中央揃えはできても、他ブロックはエディターで中央揃えを選択しても中央揃えになりません。
選択肢があるのになんでやねん、と思うところではあるのですが、これらはstyle.cssに設定を追加する必要があります。
その中のひとつである、「カテゴリーリストの中央揃え」について。
カテゴリーリストのclassは「wp-block-categories」で、エディターで中央揃えを選択すると「aligncenter」というclassが追加されます。
そのため、カテゴリーリストの中央揃えを可能にするには、style.cssに以下のコードを記載します。
.wp-block-categories.aligncenter {
text-align: center;
}まあコード自体はそんなに違和感がないのですが、疑問に思った点が2つ。
疑問① 参考書とリストマーカー（・）の位置が違う
参考書では、上記CSSを追加した場合、文字のすぐ左にリストマーカーが来ていました。
しかし実際に実装してみると、リストマーカーは左端に固定され、中の文字だけが中央揃えになりました。
【参考書】
- いちご
- オレンジ
- パイナップル
【実際】
- いちご
- オレンジ
- パイナップル
伝わるかなあ。こんな感じになっちゃって。
これを解決するためには、list-style-position: inside;を追加すればOKでした。
しかし、そこで次の疑問が生まれたのです。
疑問② そもそもリストを中央揃えするってどんなタイミングよ？
リストマーカーって縦に揃ってないと気持ち悪くないですか。
リストマーカーだけ左端にあるのもおかしいけど、参考書のようなリストマーカーのつき方もおかしい。
やるとしたら、リストの左揃え・中央寄せ、かな？
【理想】
- いちご
- オレンジ
- パイナップル
これをやるにはこんなかんじ。
<div class="list-parent">
<ul class="list-child">
<li>いちご</li>
<li>オレンジ</li>
<li>パイナップル</li>
</ul>
<div>.list-parent {
text-align: center;
}
.list-child {
text-align: left;
display: inline-block;
}リストを2つのセレクタに分ける必要があります。
親要素でリスト全体を中央寄せにして、子要素で中身を左揃えにする。感じ、だと思う。
結局どのように実装したか
結論：無視！保留！
リストマーカーは左端に寄ったままですが、カテゴリーリストを中央揃え使うタイミングが出てきたらまた考えればいいや！と思い、そのままにしました。
結局そのあとカテゴリーリストを中央揃えで表示させるフェーズはあったのですが（記事のトップに、記事のカテゴリーを横並びで表示させる）、横並びの表示でリストマーカーは非表示にする設定だったので問題ナシでした。
ちなみにこのブログで採用している「てがきノート」スキンでは、カテゴリーリストの中央揃えは実装されてはいましたが、リストマーカーは左端でした。プロが作ってもコテ入れされてないってことは、いらねえ。多分。
変数の設定
変数の設定というのは、各サイトのソースコードをデベロッパーツールで確認していたときに目にしたことはありましたが、実際に設定をするのは初めてでした。
書き方は普通のCSSと一緒だけど、先頭にハイフン（ダッシュ）を2つつけるのが変数だよという指定になるみたい。
:rootで変数を宣言すればどこでも使用可能だし、セレクタで変数を宣言すればそのセレクタ内だけで使用可能。
呼び出すときは、var(–変数名);。なんて簡単なんだ！
これから多用しようと思いました。楽すぎる。
CHAPTER4
CHAPTER4では記事ページのデザインを整えました。
ここで初見だったのは「スクリーンリーダー」の存在。
スクリーンリーダーとは
スクリーンリーダーは、パソコンやスマートフォンの画面に表示されているテキストや要素を音声で読み上げてくれる機能のこと。視覚障害者や、画面を見ないで耳で聞いて操作したい人のための機能です。
WordPressでは、screen-reader-textクラスを付与することで、目には見えなくなるけれど、コード上では文字が残り、読み上げのときにわかりやすくなるんだと。
ここに引っかかったのは、CHAPTER4-3で前後の記事を表示させるために、<?php the_post_navigation(); ?>をindex.phpに追加したとき。
参考書では「投稿ナビゲーション」という見出しが表示されていたけど、実際には表示されませんでした。
参考書ではscreen-reader-textクラスは非表示になるようstyle.cssに設定を書いていましたが、きっと最新のWordPressではWordPress側でそのCSSが組み込まれたのだろうなと想像。
スクリーンリーダーについて知識がなかったので、いい勉強になりました。
Flexboxで横並びにしたときのmarginの設定
Flexboxで横並びにしたときに、それぞれがビタッとくっついている設定ではなく、margin-rightを設定してそれぞれに間隔を作ると思います。
そのときに最後のアイテムにはmargin-rightが必要ないですよね。
そこで、:not(:last-child)をつけることで、最後の兄弟要素（:last-child）以外（:not）に設定することができます。便利！
例えば親要素がpost-categoriesクラスのカテゴリーリスト（li要素）を横並びにするとき。
.post-categories {
display: flex;
justify-content: center;
padding: 0;
list-style-type: none;
}
.post-categories li:not(:last-child) {
margin-right: 10px;
}こうすることで、最後のカテゴリーだけ右にマージンが入らなくなります。
結構多用できそうなので覚えておきたいと思いました。
flex: 1;について
flexプロパティを初めて使った気がするので調べました。何が1なんだ。
まずflexプロパティはFlexboxで使用します。
親要素でdisplay: flex;を設定し、中身になる子要素をflexプロパティで整える。
で、flex: 1;というのは、flexプロパティであるflex-grow、flex-shrink、flex-basisをひっくるめる省略形なんですって。
例えばこんなFlexboxを例に見てみます。
<div class="flex-parent">
<div class="flex-child item1">アイテム1</div>
<div class="flex-child item2">アイテム2</div>
</div>.flex-parent {
display: flex;
background-color: #17949D;
}
.flex-child {
padding: 30px 10px;
margin: 10px;
background-color:#72C9D2;
}flex-growプロパティとは
アイテムを二つ横並びにしたとき、右に空きスペースができています。
この余白をflex-growプロパティで割り振ることができます。
.flex-parent {
display: flex;
background-color: #17949D;
}
.flex-child {
padding: 30px 10px;
margin: 10px;
background-color:#72C9D2;
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}例えばこんな感じで、アイテム1とアイテム2でflex-growを1:2で設定すると、
こんな感じで余白が1:2で割り振られます。
flex-growの初期値は0です。設定して初めて余白をもらえます。
そのため、item1はflex-grow: 1;を設定し、item2には何も設定しないとこんな感じ。
flex-shrinkプロパティとは
growは余白を分配するプロパティでしたが、逆にはみ出してしまうときに調整するのがshrinkプロパティ。
親要素からはみ出した分をもとに、子要素を縮めてくれます。
.flex-parent {
display: flex;
background-color: #17949D;
}
.flex-child {
width: 500px;
padding: 30px 10px;
margin: 10px;
background-color:#72C9D2;
}
.item1 {
flex-shrink: 0;
}
.item2 {
flex-shrink: 0;
}子要素の幅が500pxで、二つ並べるとはみ出してしまうときにを想定します。
アイテム1,2にそれぞれflex-shrink: 0;が設定されているため、そのまま500pxずつ表示されます。
ここでアイテム1にのみflex-shrink: 1;を設定するとこうなります。
.flex-parent {
display: flex;
background-color: #17949D;
}
.flex-child {
width: 500px;
padding: 30px 10px;
margin: 10px;
background-color:#72C9D2;
}
.item1 {
flex-shrink: 1;
}
.item2 {
flex-shrink: 0;
}アイテム1だけがうまい具合に縮み、アイテム2は元の幅のまま（500px）で表示されました。
ちなみにflex-shrinkの初期値は1なので、あえて設定しなければはみ出すことなく親要素内におさまるように調整してくれます。
.flex-parent {
display: flex;
background-color: #17949D;
}
.flex-child {
width: 500px;
padding: 30px 10px;
margin: 10px;
background-color:#72C9D2;
}flex-basisプロパティとは
flex-basisはアイテムの大きさを決めるプロパティ。
横並びならwidth、縦並びならheightと同じような意味。
pxやemなどの単位付きの数字でもいいし、%でもいい。
.flex-parent {
display: flex;
background-color: #17949D;
}
.flex-child {
width: 500px;
padding: 30px 10px;
margin: 10px;
background-color:#72C9D2;
}
.item1 {
flex-basis: 25%;
}
.item2 {
flex-basis: 75%;
}こんな感じで、子要素は500pxと設定したとしても、flex-basisの数字が優先されて25%:75%の大きさになりました。
flex-basisの初期値はautoで、コンテンツの幅に応じて自動で調整してくれます。
flex: 1;の意味
この3つを紹介したところで、flex: 1;とは何ぞやという話。
flex: 1;というのは、flexプロパティであるflex-grow、flex-shrink、flex-basisをひっくるめる省略形なんですって。
と冒頭で述べましたが、指定する数値が1つの場合はflex-growのみを指定するようです。
つまり、flex-grow: 1; flex-shrink: 1; flex-basis: 0;の省略形です。
flex-shrinkの初期値は1だったので良いのですが、flex-basisの初期値はautoでした。
でも省略形にすると初期値が0になるんですって。（なんで？）
とりあえず意味としては、子要素の幅が0（flex-basis: 0;）、つまり全てが余白。それをflex-grow: 1;で分配するよってことみたいです。
参考書内では、前後の記事のナビゲーションリンクとして登場しました。
前の記事タイトル、次の記事タイトルにそれぞれflex: 1;を設定することで、これらを1:1のボックスにすることができました。
CHAPTER5
ここはあまり目新しいことはなく。
object-fit: cover;って便利だなあ！って思い出した程度かなあ。
コーチング6回目
このまま頑張れよ、参考書通りでなくても自分の良いと思ったデザインにアレンジしてね。とのことでした。
提出物がないので添削はなく、世間話をしながら短時間で終了。
短時間でもコーチとお話しすることでモチベーションが保てるのでありがたいです。
今後のこと
残すはCHAPTER6～9です。
参考書通りのテーマは作成できるとして、「独自テーマ」は作れるのでしょうか。
というかそれをするにはそもそもデザインからな気もしますが……。
とりあえず進めていきたいと思います～。
ブログ書くの2時間とかかかるんだけど！ひえー。
コメント