スマホでグローバルナビをPCのように表示するには

Simplicityの特徴 フォーラム Simplicityについての質問 スマホでグローバルナビをPCのように表示するには

  • このトピックには5件の返信、2人の参加者があり、最後にYKにより11年前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #26808
      YK
      ゲスト

      お世話になっております。
      スマホのグローバルナビはボタンが小さくなっており、クリックしないとタイトルがでてきません。私はカテゴリをナビに入れているのですが、友人からカテゴリがなくてわかりにくいと言われました。友人に詳細をきいてみると、グローバルナビの存在に気づかなかったとのことです。そこで、グローバルナビに誰でもすぐに気づくように、PCで表示されているときのようにクリックしなくても常に表示されているようにしたいと思います。

      もし簡単に出来る方法がありましたら教えていただけないでしょうか。私は初心者レベルでカスタマイズ等は全然詳しくありません。

      どうかよろしくお願いします。

    • #26812
      アバター画像わいひら
      キーマスター

      残念ながら簡単にできる方法はないです。
      デベロッパーツールなどを使って、スタイルシートを調整するしかないです。
      デベロッパーツールの使い方
      HTMLクイックリファレンス

    • #26817
      YK
      ゲスト

      ご回答ありがとうございました。
      リンクを確認してみましたが、私にはかなり難しくて無理でした。
      今後もっと勉強したいと思います。

    • #26824
      hidekichi
      ゲスト

      俺ならこうするシリーズ(笑)
      簡単ではありませんがやり方だけ。

      スマホのグローバルメニュー部分はそのままで、今回は、メイン記事の上にカテゴリーの表示をします。
      親テーマbefore-main.php(子テーマにbefore-main.phpがあるならそれで(未確認))に以下のように書きます。

      準備として、is_mobile()でモバイル端末の時のみと言う設定を入れておく。

      <?php if (is_mobile()): ?>
        // 以下のどれかしらのタイプを書き込む(追記する)
      <? endif; ?>

      ◆タイプA ウィジェットのような出力

      <div class="test">
        <?php wp_list_categories(); ?>
      </div>

      このように書けば、.test ulあるいは、.test li等のようにしてスタイルすることができます。

      ◆タイプB Pタグでカテゴリのリンクを囲む

      <div class="test">
        <?php
          $cat_all = get_terms( "category", "fields=all&get=all" );
            foreach($cat_all as $value):
        ?>
      
        <p><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?></a></p>
      
        <?php endforeach; ?>
      </div>

      これもタイプAと同様に、.test p等に対してスタイルすることができます。またpタグの部分を変更すれば他のタグにすることもできます。

      ◆タイプC 一行に「” | “」で区切ったリストとして書き出す。

      <div class="test">
        <?php
          $cat_all = get_terms( "category", "fields=all&get=all" );
          foreach($cat_all as $value){
            $cat_list_array[] = '<a href="' . get_category_link($value->term_id) . '">' . $value->name . '</a>';
          }
          
          echo "<div class='test'>";
          echo implode(" | ", $cat_list_array);
          echo "</div>";
        ?>
      </div>

      タイプBの別の出力の仕方です。この場合、.testにはスタイルすることができますが、区切っている部分の要素に対してはスタイルできないので、書き出している部分を変更する必要があります。例えば、

      echo implode("<span class='separate'>|</span> ", $cat_list_array);

      などとして、親・子いずれかのテーマのstyle.cssに、上記例なら、

      .separate {
        color: #ccc;
        margin: 0 5px;
      }

      と言うようなスタイルを設定すれば、色が#ccc(薄いグレー)で、|の左右に5pxの余白ができます。
      1行と言ってもいわゆるインラインというやつで画面端に行けば、勝手に改行するので複数行になるかも知れません。フォントサイズなどは.testに対して行ったり、.test aとかにすれば良いと思います。

      before-main.phpは親テーマにしかなかったように思うので(子テーマにあればそれで(未確認))、親テーマのbefore-main.phpを利用する場合は、アップデートの際、上書きされ設定が無くなってしまうのでバックアップしておくようにしておいて下さい。

      今回は、before-mainに書きましたが、色んな所にカテゴリーを出力することは可能です。
      最も簡単なのはウィジェットを利用することですが、上記typeCのようにすれば、インラインで書き出せるので記事中に書き出したり、あるいは現在の記事のカテゴリをまた別の方法で求めたりして、もし同じカテゴリの場合は、それだけ大きく「これが今見てるカテゴリだ」と言う主張をすることもできます

      あ、ちなみに最新のSimplicityの場合、各部いずれかのウィジェットで「カテゴリ」を追加すれば表示はできます。色んな場所でウィジェットを追加すれば表示はできるのですが、その都度「#categories-XX」というようなIDを調べる必要があるのでスタイルは(いずれ変更する時に)面倒です(→これはわいひらさんの説明の通りする必要があります)。
      デザインの変更がないとか少ない場合は、一度設定しておけば良いので良いのですけれども、#categories-XXのXXの部分はウィジェットの設定をするたびに色々変更されるかも知れないので注意が必要です。

    • #26839
      アバター画像わいひら
      キーマスター

      なるほど、before-main.phpを使うというのも手ですね。
      スタイルさえうまく設定できれば、それが一番簡単な方法かもしれませんね。
      アップデートにも対応できますし。

    • #26917
      YK
      ゲスト

      hidekichiさん、詳しいご説明ありがとうございました。まだ勉強不足で自分ではできませんが、今後勉強して参考にさせていただきます。

5件の返信スレッドを表示中
  • トピック「スマホでグローバルナビをPCのように表示するには」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)