CocoonからAFFINGERへ移行した時、かなり焦ったトラブルがあった。
記事のH2・H3見出しが消えた。
本文は普通にある。
でも見出しがない。
最初は、「テーマ変えたら記事壊れた？」と思った。
ところがGutenbergの編集画面で、本来見出しがあるはずの場所をドラッグしてみると、
文字はいる。
いるのに見えない。
結論から言うと、俺の場合は見出しそのものが消えたわけではなかった。
H2・H3の文字色が白くなり、背景と同化していただけだった。
最初はAIを頼りながら追加CSSで無理やり文字色を変えて対処した。
でも後から調べると、AFFINGERにはちゃんと見出しの文字色を変更する設定がある。
最終的には追加CSSも削除して、AFFINGERの標準設定だけで直せた。
今回は、実際に俺がハマった流れも含めて残しておく。
なお、このトラブル自体はAFFINGER6 EXへ移行した時に発生したもの。
現在このブログはアップデートしてAFFINGER7 EX＋子テーマを使っているが、AFFINGER7でもH2〜H5の色やデザインはカスタマイザーの「見出しタグ（hx）/テキスト」から設定できる。
AFFINGERへ移行したらH2・H3が見えなくなった
当時の状態はこんな感じ。
- 本文は普通に表示される
- H2・H3だけ見えない
- Gutenbergの編集画面でも見出しが白い
- 見出しがある場所をドラッグすると文字は存在する
- 記事そのものが削除されたわけではない
つまり、
消えたんじゃない。白い。
CocoonからAFFINGERへテーマを変更した直後だったので、最初はテーマ移行で見出しタグ自体がおかしくなったのかと思った。
ただ、文字が存在している以上、「データが飛んだ」という感じではない。
そこで最初に疑ったのが文字色だった。
こんな感じでドラッグすると文字が現れる。
最初は追加CSSでH2・H3の文字色を直した
追加CSSに、こんなコードを入れた。
.entry-content .wp-block-heading {
color:#313131 !important;
}これで公開ページ上では見出しが表示されるようになった。
とりあえず直った。
勝った。
と思った。
ただ、これは根本的な解決ではなかった。
AFFINGER側に普通に見出しの文字色を設定する場所があったから。
つまり、必要のないCSSを一本増やしただけだった。
後から、「これ標準設定でいけるじゃん」
と気づいた。
正解は「見出しタグ（hx）/テキスト」の文字色設定だった
最終的に俺が直した場所はここ。
WordPress管理画面から、
外観
↓
カスタマイズ
↓
見出しタグ（hx）/テキスト
と進む。
ここには、
- 記事タイトル
- H2
- H3
- H4
- H5
などの色やデザインを設定する項目がある。
AFFINGER7の現在の公式マニュアルでも、H2〜H5などはこの「見出しタグ（hx）/テキスト」から一括でカスタマイズできると案内されている。
俺の場合はここで、
H2・H3・H4の文字色を #313131 に設定。
すると、
公開ページ。
Gutenberg編集画面。
両方で普通に見える状態へ戻った。
生きていた。
この記事で一番欲しい画像はこれ。
読者がそのまま設定画面へたどり着ける。
H2を一つずつ修正する必要はなかった
最初に見出しが消えた時、
一瞬、「これ過去記事全部修正するの？」と思った。
それはかなり嫌だった。
でも俺の場合、問題は記事ごとのH2ではなく、AFFINGER側の共通デザイン設定。
だから見出しの文字色を一度変更すれば、過去記事もまとめて反映された。
記事が何十本もある状態で、
H2を一個ずつ選択。
文字色変更。
次の記事。
みたいな地獄にはならなかった。
助かった。
H2・H3のデザインも一緒に確認した方がいい
文字が見えるようになって次に気づいた。
Cocoonの時と見出しの見た目が全然違う。
まあ、そりゃそうなんだけど。
Cocoon側で設定していたH2・H3のデザインが、そのままAFFINGERへ引き継がれるわけではない。
そこで文字色と一緒に、見出しデザインも設定し直した。
俺の場合は、
H2
→ しっかり目立つ
H3
→ H2より少し弱く
H4
→ さらにシンプル
という感じで階層を分けている。
H2とH3を同じくらい派手にすると、
どこが大見出しなんだよ。
となる。
AFFINGERではH2〜H5だけでなく、Gutenbergの見出しブロック側で個別にスタイル変更もできる。
なので基本デザインはカスタマイザーで作って、必要なところだけ個別設定するくらいが管理しやすいと思う。
一部の見出しだけ白いなら、ブロック側も確認する
俺の場合は共通設定だった。
でも、「ほとんどのH2は見えるのに、この見出しだけ白い」という場合は話が少し違う。
Gutenbergの見出しブロック自体に個別の色やスタイルを設定している可能性がある。
その場合は、
該当する見出しを選択。
↓
ブロック設定。
↓
文字色・スタイル。
あたりも確認する。
全体設定を直したのに一部分だけ変わらない場合は、
その見出しだけ独自設定されていないか
を見る。
CSSを追加する前にAFFINGERの設定画面を探した方がいい
今回かなり勉強になったのがこれ。
WordPressで表示がおかしくなると、
検索。
↓
CSSをコピペ。
↓
直った。
で終わらせたくなる。
俺もやった。
ただCSSを増やしていくと、そのうち、
「これ何のために入れたコードだっけ？」
となる。
さらに後からテーマ設定を変更した時、そのCSSが邪魔をすることもある。
AFFINGERは良くも悪くも設定項目がかなり多い。
だから表示がおかしい時は、
まず、
AFFINGER管理
と、
外観 → カスタマイズ
を探す。
そこで解決できない場合に追加CSS。
今はこの順番にしている。
昔の俺は逆だった。
CSSで殴ってから設定画面を探していた。
CocoonからAFFINGERへ移行すると、見出し以外も再設定が必要だった
ちなみに見出しだけではなかった。
CocoonからAFFINGERへ移行した時には、
- H2・H3・H4のデザイン
- 目次
- スマホのハンバーガーメニュー
- トップページのカテゴリー表示
- その他細かいレイアウト
なども調整することになった。
Cocoonは無料テーマなのに最初からかなり色々整っている。
だからテーマをAFFINGERへ変更すると、「Cocoonで普通にできていたものが消えた」ように感じることがある。
実際には、AFFINGER側で改めて設定する必要があるだけ、
というケースも多かった。
CocoonからAFFINGERへ移行した時に何をしたのかについては、別の記事でまとめている。
目次もCocoonからAFFINGERへ変えたら消えた
H2・H3が戻ったあと、
今度は、目次がない。
Cocoonでは標準で表示されていたので、完全に存在を忘れていた。
AFFINGER環境では、俺は現在SUGOI MOKUJI LITEを使っている。
これも、
有効化。
自動挿入。
対象見出し。
デザイン。
などを設定し直した。
さらに初期状態のデザインがかなりシンプルだったので、CSSも少し調整した。
テーマ移行って、
一個直す。
↓
次が出てくる。
モグラ叩きみたいになる。
AFFINGERでH2・H3が消えたように見えた時の確認順
俺なら今はこの順番で見る。
① 編集画面で文字そのものが存在するか確認
文字があるなら、データ消失より表示設定の可能性を疑う。
↓
② 外観 → カスタマイズ → 見出しタグ（hx）/テキスト
H2・H3の文字色を確認。
↓
③ 背景色と同化していないか確認
白背景＋白文字なら見えるわけがない。
↓
④ 個別の見出しブロック設定を確認
一部だけおかしい場合。
↓
⑤ 追加CSSを確認
昔入れたCSSが干渉していないか。
↓
⑥ キャッシュを確認
設定を変えたのに反映されない場合。
いきなりCSSで、
color: #313131 !important;と殴るのは最後でいい。
俺みたいに、
あとから消す仕事が増える。
まとめ｜H2が消えても、まず文字色を確認
AFFINGERへ移行したあと、
H2が消えた。
と思っても、まず記事そのものが残っているか確認した方がいい。
俺の場合は、
文字はあった。
ただ白かった。
原因はAFFINGER側のH2・H3文字色設定。
最初は追加CSSで応急処置したけど、最終的には、
外観 → カスタマイズ → 見出しタグ（hx）/テキスト
から文字色を設定するだけで解決した。
AFFINGER7でも現在、この場所からH2〜H5のカラーやデザインを設定できる。
だから同じ状態になった人は、
記事を書き直す前に、
プラグインを消す前に、
CSSを追加する前に、
まず文字色を見てみてほしい。
案外、
いる。
ただ見えないだけかもしれない。
AFFINGERをこれから使う人へ
ここまでAFFINGERのトラブルを書いておいてアレだけど、俺自身はその後も使い続けている。
最初はCocoon。
そこからACTION PACK3（AFFINGER6 EX対応）を購入。
アップデートを重ねて、現在はAFFINGER7 EX＋子テーマでこのブログを運営している。
設定項目が多いので、最初から全部分かりやすいテーマだとは正直思わない。
俺も普通に何回も詰まった。
ただ、ブログを続けるうちに、
AdSense。
Amazon・楽天。
アフィリエイト。
CTA。
カテゴリー導線。
トップページ。
この辺まで細かく触るようになって、今はAFFINGERの自由度が自分には合っている。
これから導入を考えている人はこちら。
