スマートフォンのみログインボタン等表示させたいです。

Question

お世話になります。ワードプレスで作成しておりますサイトなのですが、
ログインボタンや新規登録ボタンを合計2つスマホ版のみ表示させたいです。
パソコン版は固定ページで何もせずとも表示されているので問題ないのですが、
スマホ版は「menu」と書かれたものをクリックしてプルダウンで表示はされますが、
おおきく2つのボタン表示をさせたいです。
index.phpは1種類しかないので、スマホ版のみ表示というのをどうすればいいのかわかりません。
位置的にはロゴの右側、メニューボタンの下側にふたつならんで表示させたいです。
できればシンプルでかまいませんのでＣＳＳのみでボタン表示できればありがたいです。
どうかよろしくお願いいたします。

http://waribikiken-saikou.com/

となります。

よろしくお願いいたします。

追記

.button {
	background-color: #333;
	color: #fff;
	flat:left;
	display:none;
}
.button:hover {
	background-color: #59b1eb;
}
@media screen and (max-width: 479px){
    .button{
        display: inline;
    }
}

ご指導いただいた内容はidでしたが2箇所ありましたのでclassとしました。
間違いがございましたらよろしくお願いいたします。

全体CSSのstyle.css
PC用のstyle_pc.css
スマホ版のstyle_sp.css
とありますが
style.cssのみ記載しております。

Comments

[kei344]

URLにはリンクを張ることができますので、編集よろしくお願いします。

Answer 1

強引ですけどこんな感じでやれば目的の見た目にはなるかと思います。
指定方法は#social_linkに合わせました。
CSSだけだと厳しいのでhtmlも追加で。
追加場所は#headerの子要素になればどこでもいいです。
分からなければh1の次にでも。

.action_btn_area_sp {
	display: block;
	position: absolute;
	top: 50px;
	right: 10px;
}

<div class="action_btn_area_sp"><a href="#">ログイン</a><a href="#">新規登録</a></div>

kei344さんがおっしゃるようにソースが阿鼻叫喚なので整理したほうがよいです。
凄まじく重たいですし…

Comments

[t-maekawa]

ありがとうございます。
参考にさせていただきます。

Answer 2

style.cssのみ記載しております。

とありますが、style.css style_pc.css style_sp.css が記載してあります。

• bodyタグが2つあり、その一つが閉じていない
• <style type="text/css">がCSSの中に書かれている
• style_sp.cssの文字コードがUTF-8ではない
• SPのブレークポイントが 479px 640px と2種類ある

Answer 3

ボタンに、CSSのdisplay: noneを指定しておき、

@media screen and (max-width: 479px){
    #スマフォのみ表示させたい要素のid{
        display: inline;
    }
}

などいかがでしょうか？

Comments

[t-maekawa]

お世話になります。
回答いただきありがとうございます。
header.phpの中に
<div></div>を記載しCSSを記載しましたが、ＰＣ版には表示され、スマホ版には何も表示されませんでした。記載の仕方が間違っているのでしょうか？
本文にCSS記載いたします。
どうかよろしくお願いいたします。

[nnahito]

コードを拝見していないので何を使われているか分かりませんが、
DIV要素を追加するのではなく、ボタン（aタグ？buttonタグ？）に、

style="display: none"

を追加する形ですね。

しかしstyle="display: none"をつけたのにもかかわらず、PC版に表示されるということは……
他に何か指定していて、干渉していませんでしょうか？

[t-maekawa]

ありがとうございます。
再度確認してみます。

Answer 4

    <?php if(is_mobile()){ ?>
     <ul class="header_link">
     <li><a href="/membership-join/membership-registration/">新規店舗登録</a></li>
     <li><a href="/membership-login/">店舗様ログイン</a></li>
     </ul>
      <?php } ?>

上記をheader.phpに記載して調整いたしました。
皆様ありがとうございました。

Comments

[WanOOOOOO]

>ＣＳＳのみでボタン表示
前提条件が変わったんならそれを書くべきです。
皆さんは条件の中で一生懸命考えてくれているのだから。

[t-maekawa]

申し訳ございません。
今後気をつけますし、変更点がありましたら記載いたします。
ご気分を悪くする行動、申し訳ございませんでした。