スマホ版でのボックスタイトルの横ラインが消えてしまいました

  • # ホームページ制作について
  • Eye56
  • Userあかね
  • Calender2020/08/03

解決
済み

たすけてください。初心者です...

PC版ではボックスタイトルの横ラインが出ますが、
スマホ版でのみ抜けてしまうようになりました。

原因がわかる方がいらっしゃいましたら、
ご教授いただけると嬉しいです。
よろしくお願いいたします。

※キャッシュはクリアしています。違うブラウザやアプリで閲覧しても同じ状態です。
※PC・スマホ版ともにCSSで少々編集していますが
まったく編集していないときに横ラインが出なくなりました。
(本登録したタイミングでもあり、通常時のCSSをバックアップしていましたが問題ありませんでした)
※以前もボックス編集やトップ編集時にバグ?が発生してフォーマット自体が総崩れしたことがありますが、そのときに行った操作を元に戻すと通常に戻りました。
※今回はなにも操作していないときのため、追って元に戻す手順がありません。


みんなの回答を見る

  • Userhiguita
  • Calender2020-08-05 14:47:20

テンプレートによってはPC版とスマホ版で若干デザインが違うことがあるので、試しにあかねさんと同じテンプレートにしたところ、PC版では記事タイトルの下に横ラインがありますが、スマホ版にはありませんでした。
恐らく、あかねさんが利用しているテンプレートの仕様(初期CSSでのデザインの違い)かと思います。

ただ、スマホ版でも記事タイトルの下に横ラインを表示する場合、【CSSの適用(スマホ版)】に以下の内容を追記したら表示されました。

-----------------追記内容-----------------
.articleBox .contTtl {
background: url(../../images/200/bgi-articleTtl_001.png) left bottom repeat-x;
padding-bottom: 20px;
}
-----------------------------------------

ただし、テンプレートによってCSSの内容が違うこともあるので、他のテンプレートに変更した場合は同じ内容を追記しても反映されないかもしれません。

すでにCSSの編集も行っているとのことなので、ご存知かと思いますが、CSSの編集方法は以下のページに記載されています。

○CSS編集機能を活用する(β版)
https://pr.toriaez.jp/navi/howto/1864.html

他に同じ部分のCSSを編集していると正常に表示されない可能性もあるので、事前に現在のCSSをメモ帳などにコピーしてとっておくといいと思います。

記事を編集する
  • Userあかね
  • Calender2020-08-06 17:58:54

質問本文に追記していましたが、
こちらに移しました↓

-----------2020.08.05.19:00追記-----------

higuita様

回答ありがとうございます!!
早速ですが教えていただいた内容を追記しましたが(記載場所いろいろ試しました)、
改善されませんでした...

諦めて使用している【plain2_black】の初期CSSに戻しましたが、横棒は見えず...

お手本帖にある、
https://types.toriaez.jp/case01/index.html

のように、スマホでも薄い灰色がいままでは出ていたのですが...


もしほかに改善方法の案があるようでしたら、
教えていただけると嬉しいです!

引き続きこちらでもいろいろ試してみます。

※なお、検索ロボットに見つかって検索にひっかかるようになってしまったため
一旦、当ホームページは非公開にしましたm(_ _)m


よろしくお願いいたしますm(__)m

記事を編集する
  • Userhiguita
  • Calender2020-08-07 11:46:32

改善されなかったのですね。
再度試してみたところ、以下のような状況だったので、参考になれば幸いです。

1)管理画面の「デザインの選択」>「色から選ぶ」>「黒・ブラック」にチェックを入れる>【plain2_black】の「このデザインを選択」
2)「デザインの選択」>「CSSの編集 β版」で編集したCSS(【CSSの適用(パソコン版)】と【CSSの適用(スマホ版)】の両方)をコピーして、メモ帳に貼り付けて保存
※念の為CSSのバックアップとして、この作業を実施しました。
3)「デザインの選択」>「CSS編集済み一覧」>【plain2_black】の「CSS編集機能を破棄」
※この時点でスマホでホームページを確認すると線はありませんでした。
4)「デザインの選択」>「CSSの編集 β版」>【CSSの適用(スマホ版)】の「初期CSSをコピーして編集を開始する」
※【plain2_black】はPC版とスマホ版でCSSが分かれているので、スマホ版の方に追記。
5)一番下に以下の内容を追記して、「上記の内容で保存」

-----------------追記内容-----------------
.articleBox .contTtl {
background: url(../../images/200/bgi-articleTtl_001.png) left bottom repeat-x;
padding-bottom: 20px;
}
-----------------------------------------

以上で、スマホでホームページを見たときにも線が表示されるようになりました。

もし、同じ手順でやっても線が表示されないときはキャッシュが影響している可能性がありますので、ページの再読み込みやキャッシュのクリアをしてみるといいと思います。

○スマホ版 Chrome のキャッシュ削除法
https://yaruzou.net/chrome-app-cache-delete

○【iPhone/iPad】ブラウザ(Safari)のキャッシュクリア
https://www.au.com/support/faq/detail/15/a00000000115/

それでも表示されないときは問い合わせてみた方がいいと思います。

○お問い合わせフォーム
https://www.toriaez.jp/form/index.php

記事を編集する
  • Userあかね
  • Calender2020-08-08 23:20:35

higuita様

回答ありがとうございます!!
編集済のCSSを破棄したところで、
横の棒線が出てくるようになりました!

バックアップをとっていた元々のCSSに問題があったようですm(__)m
お騒がせしました...

力を貸していただきありがとうございます(^^)

記事を編集する
次のページ