どうもどうもアスミです。
今回はいつもと毛色を変えて、ブロガーの皆さん、特に始めたばかりの人たちに向けての記事を書いていこうと思います。
たまには自分の情報をアウトプットしなければ…！
スマホ画面にグルーバルメニューを表示する方法
パソコン画面ではグローバルメニューが見えるのに、スマホでは見えないとお困りの方、結構いるんじゃないでしょうか。
実際スマホユーザーは圧倒的に多いので、このグローバルメニューが表示されないのは痛いですよね。
今回は本記事タイトルにある通り、無料テーマのSimplicity２でグローバルメニューをスマホでも見えるようにする方法をご紹介します。
ちなみにグルーバルメニューはこれの事です。
これをスマホにも表示させましょう！
表示方法その①
テーマがSimplicity２であることが前提です。
まずダッシュボード画面の左にあるテーマの編集から、子テーマ（又はテーマ）の「before-main.php」を開きます。
上記のようにコード記述画面が真ん中に表示されるので、下記のコ―ドをそのまま張り付けて下さい。
- <?php if ( wp_is_mobile() ) : ?>
- <div id=”sm_nav”>
- <span class=”category”><a href=’http://AAAAA/’>メニュー1</a></span>
- <span class=”category”><a href=’http://BBBBB/’>メニュー2</a></span>
- <span class=”category”><a href=’http://CCCCC/’>メニュー3</a></span>
- <span class=”category”><a href=’http://DDDDD/’>メニュー4</a></span>
- </div>
- <?php else: ?>
- <?php endif; ?>
その次にコード内の「http://ＡＡＡＡＡ」などのアルファベット部分を自分がグルーバルメニューとして表示させたいカテゴリー画面のＵＲＬに変更します。
コード内の「メニュー１」の部分には表示させたいカテゴリーの名前をそれぞれ入れていきます。
表示方法その②
上記が終わったら次はスタイルシートを開きます。
コード画面に下記のコードを張り付けましょう。
※コードが沢山書いている人は一番下に取り合えず一番下にでも張り付けましょう。
- #sm_nav{
- text-align: center;
- }
- #sm_nav .category{
- background-color: #35A6A0;
- padding:8px;
- line-height: 230%;
- font-size:90%;
- border-radius: 4px;
- }
- #sm_nav a{
- color: #FFFFFF;
- text-decoration: none;
- word-wrap: break-word;
- }
以上で設定は終わりです。
早速スマホから自分のサイトを確認してみましょう！！
デザインを変えたい場合
このままでももちろん使えますが、メニューの色や形などを変更したい場合はコードを少し変えてみましょう。
下記は先ほどのスタイルシートのコードですが、グルーバルメニューのデザイン部分になるので、色々と変更を加えてもいいと思います。
- #sm_nav{
- text-align: center;
- }
- #sm_nav .category{
- background-color: #35A6A0;
- padding:8px;
- line-height: 230%;
- font-size:90%;
- border-radius: 4px;
- }
- #sm_nav a{
- color: #FFFFFF;
- text-decoration: none;
- word-wrap: break-word;
- }
◆５行目はメニュー背景の色の設定なので、「#35A6A0」の部分を変えて好きな色に設定できます。
◆６行目はメニュー背景の範囲設定なので、「8px」部分の数字を変えて調整します。
◆７行目は表示するカテゴリーが２桁以上の時の行間設定なので、「230％」を任意に変更してください。
◆9行目はメニューデザインの角の丸みの設定です。
◆１２行目にはメニューの文字色設定なので「#FFFFFF」の部分を変えて好きな色の設定ができます。
色々とカスタマイズしていきましょう。
それでは！！