Q&A
.site-name-textがかかっているhtmlのソースコードも記載してください。
wordpressのテーマ「cocoon」を使用しています。
サイト名：https://mini-owl.com/
こちらの携帯サイトとパソコンサイトでヘッダーを「サイト名（ミニフクロウの知恵袋）+ロゴ」で表示しようと考えております。
cocoonの設定では、ロゴのみかサイト名のいずれかしか表示できないため、cssを利用してみました。
cocoonの設定でヘッダーレイアウトをセンターロゴ（デフォルト）にして、cssに以下のコードを書いてみたのですが、PCで見るとうまく表示がされている一方、携帯版ではヘッダーにロゴのみしか表示されません。
どうすれば携帯版でも「サイト名（ミニフクロウの知恵袋）+ロゴ」のように表示できるかご教示いただけますと幸いです。
宜しくお願いします。
css
1.site-name-text::before { 2 content:'ミニフクロウの知恵袋'; 3 font-size: 10px; 4 margin-bottom: 2px; 5 color: #000; 6} 7 8@media screen and (max-width: 768px){ 9 .site-name-text::before { 10 content:'ミニフクロウの知恵袋'; 11 font-size: 18px; 12 color: #000; 13 } 14}
追記：ヘッダータイトル付近のHTMLがこちらになります。
html
1 2 3 4 5<div id="container" class="container cf"> 6 7<div id="header-container" class="header-container"> 8 <div class="header-container-in hlt-center-logo"> 9 <header id="header" class="header cf" itemscope itemtype="https://schema.org/WPHeader"> 10 11 <div id="header-in" class="header-in wrap cf" itemscope itemtype="https://schema.org/WebSite"> 12 13 14 15 <div class="logo logo-header logo-image"><a href="https://mini-owl.com" class="site-name site-name-text-link" itemprop="url"><span class="site-name-text" itemprop="name about"><img class="site-logo-image header-site-logo-image" src="https://mini-owl.com/wp-content/uploads/2020/02/Attachment-1-e1582969951951.png" alt="ミニフクロウの知恵袋"></span></a></div> 16 17 18 </div>
htmlの記載ありがとうございます。その書き方で問題ないはずです。現に、https://mini-owl.com/を見るとPC版レイアウトではすでにbefore要素のテキストが表示されているようです。解決したい問題はなんでしょうか？
ありがとうございます！
PC版だと確かに大丈夫なようですが、携帯でみると、一番上のヘッダーに画像しか表示されません...こちらをタイトル名＋画像という形で表示したいと考えております。
どうぞよろしくお願いします。
PC版はうまくいっていて、携帯で問題が起きているという内容で質問文を書き直していただけますでしょうか。後からこの質問を見る人が、質問と回答だけ読んで何がどう解決したのかわかるようになっているべきなので。
失礼いたしました。訂正させていただきます。
回答1件
0
ベストアンサー
公開されているページを見る限り、PC版とSP版では違うhtmlを表示しているようなので、SP版で使っているクラスにも同じ記述を追加する必要がありそうです。
SP版のヘッダーのhtmlは以下になっているかと思います。
<ul class="mobile-header-menu-buttons mobile-menu-buttons"> <!-- メニューボタン --> <li class="navi-menu-button menu-button"> <input id="navi-menu-input" type="checkbox" class="display-none"> <label id="navi-menu-open" class="menu-open menu-button-in" for="navi-menu-input"> <div class="navi-menu-icon menu-icon"></div> <div class="navi-menu-caption menu-caption">メニュー</div> </label> <label class="display-none" id="navi-menu-close" for="navi-menu-input"></label> <div id="navi-menu-content" class="navi-menu-content menu-content"> <label class="navi-menu-close-button menu-close-button" for="navi-menu-input"></label> <ul class="menu-drawer"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-383"><a href="https://mini-owl.com/" aria-current="page">ホーム</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1404"><a href="https://mini-owl.com/%e6%9c%80%e6%96%b0%e8%a8%98%e4%ba%8b/">最新記事</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1859"><a href="https://mini-owl.com/category/goraku/ryoko/">旅行</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1860"><a href="https://mini-owl.com/category/goraku/eiga/">映画</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1862"><a href="https://mini-owl.com/category/sumaho/apri/">アプリ</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1861"><a href="https://mini-owl.com/category/sumaho/sns/">SNS</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1863"><a href="https://mini-owl.com/category/sumaho/kakuyasusim/">格安SIM</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1864"><a href="https://mini-owl.com/category/zeikin/furusatonouzei/">ふるさと納税</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1865"><a href="https://mini-owl.com/category/isyokujyu/fashion/">ファッション</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1866"><a href="https://mini-owl.com/category/isyokujyu/seikatsu/">生活</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1867"><a href="https://mini-owl.com/category/isyokujyu/tabemono/">食事</a></li> </ul> <!-- <label class="navi-menu-close-button menu-close-button" for="navi-menu-input"></label> --> </div> </li> <!-- ロゴボタン --> <li class="logo-menu-button menu-button"> <a href="https://mini-owl.com" class="menu-button-in"> <img class="site-logo-image" src="https://mini-owl.com/wp-content/uploads/2020/02/Attachment-1-e1582969951951.png" alt="ミニフクロウの知恵袋"> </a> </li> <!-- 検索ボタン --> <!-- 検索ボタン --> <li class="search-menu-button menu-button"> <input id="search-menu-input" type="checkbox" class="display-none"> <label id="search-menu-open" class="menu-open menu-button-in" for="search-menu-input"> <div class="search-menu-icon menu-icon"></div> <div class="search-menu-caption menu-caption">検索</div> </label> <label class="display-none" id="search-menu-close" for="search-menu-input"></label> <div id="search-menu-content" class="search-menu-content"> <form class="search-box input-box" method="get" action="https://mini-owl.com/"> <input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input"> <button type="submit" class="search-submit" role="button" aria-label="button"></button> </form> </div> </li> </ul>
投稿2020/03/01 08:33
総合スコア461
回答ありがとうございます！
@media screen and (max-width: 768px){
.logo-menu-button::after {
content:'ミニフクロウの知恵袋';
font-size: 18px;
color: #fff;
}
このようにコードを記載することでサイト名とロゴの両方が表示されました。
ただ、サイト名の隣にロゴを表示させたかったのですが、文字数とかを短く変えてみても、どうしても2ロゴがしたに行ってしまい、2段になってしまいます。
こちらは仕様上、どうしようもないのでしょうか・・・？
.logo-menu-button img と、 .mobile-menu-buttons .menu-button > a に、display:block;がかかっているので外してください。
ありがとうございます。試してみます！
あなたの回答
tips
プレビュー
