質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.02%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 756

t-maekawa

score 38

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

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のみ記載しております。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/11/03 03:31

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

    キャンセル

回答 4

+3

強引ですけどこんな感じでやれば目的の見た目にはなるかと思います。
指定方法は#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さんがおっしゃるようにソースが阿鼻叫喚なので整理したほうがよいです。
凄まじく重たいですし…

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/03 12:56

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

    キャンセル

+1

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

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

などいかがでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/03 10:02

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

    キャンセル

  • 2016/11/03 15:31

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

    style="display: none"

    を追加する形ですね。

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

    キャンセル

  • 2016/11/03 17:04

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

    キャンセル

+1

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種類ある

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

check解決した方法

-1

<?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に記載して調整いたしました。
皆様ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/17 13:13

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

    キャンセル

  • 2016/11/17 13:27

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる