Q&A
コードをご提示ください。
というか、その業者がおかしいと思うので検収してはいけないような気がします。
検収してしまっているならば、契約不適合責任が免責されてないのであれば1か月間の契約不適合責任が委託先にあると思うので、法務担当者などに相談して早めにその旨を通知しておいた方がいいような気がします。
wordpressのテーマVOGUEを使用しております。
HP業者委託にて作成いただいたのですが、
スマホ・タブレット画面で表示をすると左上の会社ロゴが
見切れてしまっており、テンプレートの仕様上修正不可と言われてしまいました。
同様のテーマを使用しているサイトでは
同じ事象が起きていないようです。
サイトで調べたCSS等も試してみましたが改善されません。
（会社ロゴもぼやけてしまっているのでそもそもの設定方法が誤っている気がします）
修正箇所がわからず事象が改善されませんので
ご質問させていただきました。
恐れ入りますがご回答いただけますと幸いです。
Lhankor_Mhy様
ご返信いただきありがとうございます。
ヘッダーのコードですが以下の通りです。
提示箇所が誤っている場合はご指摘ください。
</head>
<body class="home page-template-default page page-id-7 logged-in admin-bar no-customize-support eplus_styles">
<header id="js-header" class="l-header l-header--fixed is-active">
<div class="l-header__inner">
<h1 class="l-header__logo c-logo c-logo--retina">
<a href="弊社サイトURL">
<img src="ロゴURL" alt="会社名">
</a>
</h1> <a href="#" id="js-menu-button" class="p-menu-button c-menu-button"></a>
”その他メニュー選択コード”</a></li>
</ul></nav> </div>
</header>
大変お恥ずかしいのですが、こちらはサイトのソース表示にてコードをお伝えしております。
ワードプレス編集画面からのヘッダー編集画面（コード修正画面）が見当たらないのです…。
（テーマエディターのヘッダーとは別ですよね？）
固定ページ一覧より”トップページ-フロントページ”を選択しておりますが何もブロックが選択されていない画面となります。後日委託先に聞こうと思いますが、、
ど素人レベルの質問となり大変申し訳ございません。
なお、業者ですが修正箇所を伝えても”できない”の一点張りなので半分あきらめて検収した次第でございます。今後の対応については社内でも検討させていただきます。ご丁寧にありがとうございます…。
ご提示のコードだけですと、ご回答は難しいです。少なくともCSSが必要です。
早急な返信ありがとうございます。
ヘッダーのcssですが以下の通りです。（貼り付け内容が見当違いの場所でしたらご指摘ください）
.l-header { background: rgba(0, 67, 83, 0.8); height: 70px; line-height: 70px; width: 100%; position: absolute; top: -70px; z-index: 999; -webkit-animation: slideDown 1.5s ease-in-out 0s forwards; animation: slideDown 1.5s ease-in-out 0s forwards; }
.l-header--fixed { position: fixed; left: 0; }
.l-header__inner { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: auto; margin-right: auto; position: relative; width: 89.84375%; max-width: 1150px; height: 100%; }
.l-header__logo { margin-bottom: 0; }
.l-header__logo a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; line-height: 1; overflow: hidden; word-wrap: break-word; }
.l-header__logo--text a { width: 100px; }
@media only screen and (min-width: 1025px) { #js-global-nav{display:block !important;} }
@media only screen and (max-width: 1024px) { .l-header { height: 60px; line-height: 60px; }
.l-header__inner { display: block; margin: 0; width: 100%; height: 100%; max-width: none; }
.l-header__logo { padding-left: 5.55556%; } }
@media only screen and (max-width: 767px) { .l-header { top: 0; -webkit-animation: none; animation: none; }
.l-header__inner { width: 100%; }
.l-header__logo { padding-left: 20px; } }
恐れ入りますがご確認の程よろしくお願いいたします。
うーん、実物のイメージがつかないですね。
このヘッダ、なにかアニメーションがあるみたいですが、そのアニメーションに不具合があってロゴが表示されていないみたいな話ですか？
アクセスした際にヘッダーバーが上からスライドで降りてくるのですがそちらに関しては問題なく動作しております。（提示するcssコード場所が異なっておりますでしょうか）
PCで表示した際はロゴも問題なく表示されており、スマホやタブレット表示時のみ会社ロゴが拡大されて切れてしまっているような感じになっております。同様のテーマを使用しているサイトのロゴを確認しところそもそもの画像の形式やサイズが異なったので一旦そちらについても検証してみようと思います…。
モバイルサイズでもアニメーションするようなCSSになっていましたが、そのアニメーションに不具合があってロゴが表示されていないみたいな話なのかもしれないですね。
ご確認ありがとうございます。確かにモバイルでは同様のアニメーションは動作していないようです。
回答1件
0
自己解決
追加CSSに以下追加にて解消されました。
css
1.c-logo--retina img { 2 3 width: auto; 4 5} 6 7 8 9.c-logo img { 10 11 vertical-align: middle; 12 13 height: 100%; 14 15} 16 17 18 19.c-logo--retina a { 20 21 width: 100%; 22 23}
投稿2021/11/29 10:23
総合スコア0
あなたの回答
tips
プレビュー
