※この記事にはアフィリエイト広告を含みます。
AFFINGER7にしてから、トップページを少しずつ触っている。
今回は「記事をもっと回遊してもらいたい」ということで、ヘッダーにあるカテゴリーを整理することにした。
もともとは、
- 映画・ゲーム・作品
- ガジェット・サービス
- 暮らし・節約
- 独り言コラム
- ブログ運営
この5つ。
ここにマウスを合わせたら、
「映画・ゲーム・作品」
→ 映画
→ アニメ
→ 特撮
→ ドラマ
→ VOD
→ 小説
→ ゲーム
みたいに、タグまで出せたら便利じゃない？
と思った。
思っただけだったんだけど、ここから普通に沼った。
最終的にはちゃんと、
- PC：カテゴリーにマウスを乗せるとタグが出る
- スマホ：カテゴリーを横1列でスライド
- ハンバーガーメニュー：タグ一覧
- 「よく読まれている記事」も少しコンパクト化
まで持っていけたので、同じところで詰まった人向けに残しておく。
なお、これは俺の環境での話。
AFFINGER7＋子テーマを使用し、過去に追加CSSもかなり触っている。
まずやりたかったこと
PCでは、今までの5カテゴリーをそのまま残したかった。
ただし、たとえば「映画・ゲーム・作品」にマウスを乗せると、
- 映画
- アニメ
- 特撮
- ドラマ
- VOD
- 小説
- ゲーム
が下に開くようにする。
ゲームのさらに下には「PS Vita」も入れた。
AFFINGER7ならWordPressの
外観 → メニュー
から、子項目としてタグを入れていけばいい。
ここまでは簡単だった。
問題はそのあとである。
サブメニューが全部出っぱなしになった
設定してトップページを見ると、
何かがおかしい。
本来は、
映画・ゲーム・作品
だけ見えていて、マウスを乗せたときに映画やアニメが開いてほしい。
ところが実際は、
映画 アニメ 特撮 ドラマ VOD……
が最初から全部横に出てきた。
しかも他のカテゴリーのタグまで続くので、ヘッダーの下がタグだらけ。
ど、どゆことだ。
最初はAFFINGER7のメニュー設定を疑った。
「ヘッダーメニュー（横列）」を使うのか？
「下層メニューにも反映する」なのか？
カスタマイザーの横幅か？
最大幅220pxが悪いのか？
いろいろ触った。
そして余計におかしくなった。
犯人はAFFINGER7ではなく、昔の追加CSSだった
結局、原因はここだった。
以前、PCのヘッダーメニューを白いボタンっぽくするために、こんなCSSを入れていた。
#st-menuwide nav ul {
display: flex !important;
}#st-menuwide nav li {
width: auto !important;
}#st-menuwide nav li a {
display: block !important;
}
この書き方だと、
一番上のカテゴリーだけじゃなく、その下にある子メニューまで対象になる。
だからAFFINGER側がサブメニューを作ってくれていても、俺のCSSが
お前らも全部flexな
と上書きしていたらしい。詳しいことはわからない。
ただ、AFFINGERは悪くなかった。
俺だった。
>を入れて、親メニューだけにCSSを当てた
直したのは意外と小さい。
たとえば、
#st-menuwide nav ulだったところを、
#st-menuwide nav > ulに変更した。
同じように、
#st-menuwide nav liを、
#st-menuwide nav > ul > liへ。
リンク部分も、
#st-menuwide nav li aから、
#st-menuwide nav > ul > li > aにした。
ホバーも同じ。
#st-menuwide nav > ul > li > a:hover {
color: #7027d8 !important;
border-color: #7027d8 !important;
background: #f8f4ff !important;
}要するに、
「メニュー全部」ではなく「一番上の階層だけ」
にCSSを当てるようにした。
これだけでAFFINGER標準のサブメニュー表示が復活。
「映画・ゲーム・作品」にマウスを乗せれば、下に映画やアニメが出るようになった。
こういうとき、大量にCSSを追加するより、昔書いたCSSを疑った方がいい。
俺は危うくさらに100行くらい足すところだった。
PCは直った。今度はスマホからメニューが消えた
よし。
終わった。
……と思ったら今度はスマホだった。
PC用にメニューを整理していたら、スマホで使っていたカテゴリー一覧が消えた。
AFFINGERには、
- ヘッダーメニュー（PC）
- ヘッダーメニュー（横列）
- スマホスライドメニュー
- スマホミドルメニュー
などがある。
名前が似ている。
そして俺は途中から完全に混乱した。
横列をONにしたらPCにも同じメニューが増え、
スマホミドルを使ったら5カテゴリーが2列でデカデカと表示され、
また横列に戻したらPCにも出てくる。
一時期は同じ5カテゴリーがPCに3回くらい並んでいた。
何のサイトだよ。
最終的にPCとスマホでメニューを分けた
最終的には、PCとスマホで役割を分けることにした。
PC
PCは、ヘッダーメニュー（PC※960px以上）に対して「トップカテゴリー（1番上のやつ）」を設定。
ここには親カテゴリー＋子タグを入れている。
つまり、親カテゴリーにホバー → タグが出る
という構成。
PC側の「ヘッダーメニュー（横列）」は使わない。
スマホ
スマホは別で、
「スマホ横列カテゴリー」
というメニューを作った。
こっちは、
- 映画・ゲーム・作品
- ガジェット・サービス
- 暮らし・節約
- 独り言コラム
- ブログ運営
だけ。
子タグは入れていない。
これをスマホでは1列の横スクロールにした。
スマホにはホバーがないので、PCとまったく同じ作りにしようとしない方がいいらしい。
PCは細かく探せる。
スマホは横にスッと流せて、タグ検索は下の画像のハンバーガーメニューとかいう３本線から見れる。
その方が自然だった。
ハンバーガーメニューにはタグ一覧を残した
ハンバーガーメニューを押すと、映画、Apple、PS Vita、イヤホン……みたいなタグから記事を探せるやつ。
これはそのまま残した。
結果、
横スライド
→ 大きなカテゴリーから探す
ハンバーガー
→ タグから細かく探す
という分担になった。
これは結構気に入っている。
スマホヘッダーの無駄な空白も詰めた
途中で気になったのがスマホのヘッダー。
ハンバーガー、ロゴ、検索アイコンがある部分の上下が妙に広かった。
見てくださっている方はスマホで記事を読んでくれていることが多い。
それを考えると小さなことだけど放っては置けない。
AFFINGERの設定を見ると、スマホヘッダーの高さを指定できる。
俺は48pxに設定。
48pxが設定上の最低ラインだったので、それ以上無理に小さくはしなかった。
実機で見ても、ヘッダー → 横スクロールカテゴリー → メイン画像とかなりスッキリした。
「よく読まれている記事」も長すぎたので少し縮めた
メニューとは別だけど、トップを触っていてもう一つ気になった。
「よく読まれている記事」が長い。
画像、タイトル、本文抜粋が3記事分並ぶので、なかなかの存在感だった。
最初は本文を全部消そうとして、
body.home .widget_st-pvm-ranking .st-pvm-ranking-item p {
display: none !important;
}とした。
すると、消えすぎた。
必要なところまで消えた。
最終的には本文を3行だけ残すことにした。
body.home .widget_st-pvm-ranking .st-pvm-ranking-item p:not(:has(a)) {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}これで、画像 → タイトル → 本文3行くらいになった。
ランキングなら、このくらいでいいかなと思ってとりあえず完成。
AFFINGER7の設定がおかしいと思ったら、追加CSSも疑った方がいい
今回一番の教訓はこれ。
AFFINGERの設定をいくら変えても直らない。
キャッシュを消しても直らない。
PC用、横列、スマホミドルを行ったり来たりしても直らない。
そんなときは、昔自分で入れたCSSが新しい機能を上書きしていないかを確認した方がいい。
特に、
nav ul
nav li
nav li aみたいな広い指定に !important が付いていると、あとから子メニューを作ったときまで巻き込む。
今回まさにそれだった。
キャッシュも忘れずに消した
CSSやメニューを触ったあと、「変わってないじゃん」となった場面も何度かあった。
俺の環境では、
- AFFINGER側のCSSキャッシュ
- LiteSpeed Cache
- ブラウザの強制再読み込み
も挟んだ。
特にAFFINGERの管理バーにある「CSSキャッシュ」を消しただけで表示が直ったこともあるので、設定変更後に表示がおかしいなら一度試していいと思う。
結局どうなったか
最終的にはこうなった。
PC
カテゴリー5つをボタン表示。
マウスを乗せると、そのカテゴリーに関連するタグが開く。
スマホ
カテゴリー5つを横1列で表示。
画面に入りきらない分は横スワイプ。
細かいタグはハンバーガーメニューから探す。
トップページのランキングも少し短くした。
もともとは回遊しやすくしたいだけだった。
それが気付けば、
メニューを増やし、
消し、
PCに3個出し、
スマホから消し、
CSSを疑い、
また設定を戻し。
だいぶ遠回りした。
ただ、終わってみれば前よりはかなり使いやすくなったと思う。
AFFINGER7は触れるところが多いぶん、昔のカスタマイズとぶつかると急に分からなくなる。
だから、「設定は合ってるはずなのに何かおかしい」というときは、テーマだけじゃなく、自分の追加CSSも見た方がいいみたい。
俺みたいに数時間メニューと格闘する前に。
