こんにちは、マサシです。
自社サイトに新しいサービスのページを追加した直後、以前からある別のページの見た目も見直していました。
すると、料金を示す小さな枠の中で、2行の数字が上下にぴたりと重なって、読めなくなっていました。
その枠は、ほかの2つのページでも同じ部品を使っている場所でした。
ホームページの一部のページだけ、急に文字が重なって読めなくなった。
そんな経験はありませんか。
私も以前は、直した場所だけを確認して、それで終わったつもりになっていました。
最初に起きたこと
新しく作ったページの横に、前からある2つのページを並べて見直していました。
どのページにも、料金を一目で伝えるための小さな枠があります。
その枠の中の、2行で書かれた料金の文字が、上下にぴたりと重なっていました。
数字そのものは読めますが、1行なのか2行なのかは、見ただけでは分かりません。
おかしいのはこの1ページだけだと、最初は思っていました。
ところが隣に並べた別のページも、同じ枠を使っていました。
同じような文字の重なりは、部品を共有しているホームページなら、どこでも起こりえます。
テーマやテンプレートの「共通パーツ」は、1か所直すだけで全ページに反映されるのが利点です。
その利点は、1か所の指定ミスが全ページに反映されるという欠点にも、同時に変わります。
最初に見るべき場所が分かるようになると、見た目が崩れたときの原因探しにかかる時間を減らせます。
結果から書くと、原因は別の場所のために作った装飾のCSSが、この料金の枠にも知らないうちにかかっていたことでした。
17分後に分かったこと
この枠がどの部品を使っているかを、もとのコードまでさかのぼって調べました。
もとの部品には、短いリンクの下に引く、高さ5pxの飾り線が指定されていました。
その指定が、クラス名が同じという理由だけで、料金を表示する2行のテキストにも、同じ高さでかかっていました。
高さ5pxの枠に2行分の文字を押し込もうとした結果、2行が重なって表示されていたのです。
記録を見直すと、気づいてから原因と直し方の両方が分かるまで、17分ほどでした。
同じ部品をいくつものページで使い回していると、片方の見た目のための指定が、もう片方では事故になります。
厄介なのは、この種の指定が「間違っている」わけではないことです。
リンクの下に飾り線を引くという指定そのものは、もとのページでは正しく動いています。
問題は、同じクラス名を持つ別の要素にまで、その指定が届いてしまうことでした。
見た目が決まっている部品を、違う内容の場所でも使い回すときは、高さや余白の指定が残っていないかを一度見直す必要があります。
直すまでにやったこと
直す手順は、次の順番で進めました。
まず同じ部品を使っている場所を全部調べた
同じ枠の部品が、サイトの中の何ページで使われているかを数えました。
サイト全体の8ページのうち、この枠を使っていたのは3ページでした。
自分でコードを書いているサイトなら、部品の名前でページ全体を検索すれば数えられます。
WordPressなどのCMSを使っている場合は、同じデザインのパーツ(ウィジェットや再利用ブロック)を、どのページに貼っているかを一覧で見られる機能があるか、まず確認するとよいと思います。
装飾の指定がどこから来ているかを確認した
文字が重なっていた箇所に当たっている指定を、順番にたどりました。
飾り線の高さを指定している行まで、たどって確認しました。
料金の部分だけ、装飾の指定を外した
リンクの下の飾り線はそのまま残しました。
料金を表示する部分にだけ、高さの指定と飾り線を外す指定を追加しました。
もとの部品そのものを書き換えると、ほかの使い方をしている場所まで変わってしまうためです。
3ページとも、本番の画面で撮影して、重なりが直っていることを確認しました。
パソコンの画面幅とスマホの画面幅、両方で見た目を確認しました。
回り道だったこと（やめたこと）
以前は、不具合を直した場所だけを確認して、それで作業を終えていました。
今回はそのやり方をやめて、同じ部品を使っている全部のページを先に数えてから、1つずつ画面で確認することにしました。
数えてみるまでは、この枠を使っているのは新しいページだけだと思い込んでいました。
実際には、気づいていなかった2つのページでも、同じ指定が効いていました。
直した場所だけを見て終わっていたら、残りの2ページの重なりには気づけなかったと思います。
いまの運用
この出来事のあと、共通の部品を直したときの確認の仕方を変えました。
直した場所だけを見て終わるのではなく、同じ部品を使っている全ページを先に数えてから、1つずつ画面で確認する。
これを自分のルールにしました。
ページの数が少ないうちは、1つずつ目で見て回っても大きな手間にはなりません。
ページが増えてくると、同じ部品を使っている場所を自分の記憶だけで把握するのは難しくなります。
数えるところまでを決まった手順にしておくと、記憶に頼らずに済みます。
下の表は、共通の部品を直したときに使っている確認の記録シートです。
「やったこと」と「結果」をそのときに書き込み、「次に見る日」を決めておくと、直したつもりで終わらずに済みます。
| 日付 | やったこと | 結果 | 次に見る日 |
|---|---|---|---|
| 記入例 | 共通パーツを直したあと、同じ部品を使う全ページを数えて確認した | 3ページ中3ページとも正常表示 | 1ヶ月後 |
ホームページの一部のページだけ見た目が崩れたときは、まず「その部品をほかに何ページで使っているか」を数えることから始めてみてください。
重なっている文字だけを見ていると、その場所の指定を直して終わりにしたくなります。
けれど、同じ部品を使っている場所を先に数えておけば、見えていない場所の事故にも先に気づけます。
自分でやるのが不安なときは
「ここだけ直したい」を、自分でやるのが不安な方へ。
フォームの不具合やスマホでの崩れなど、小さな修正を1か所からお受けしています。
スマホで文字が小さい・一部の表示だけ崩れている・フォームが届かないなど、直したい場所が決まっている方に向いています。
「これって直せる？」の一言からで構いません。
内容を伺って、金額と期日を先にお伝えします。
相談とお見積りは無料です。