2分ツイートシェアはてブPocketLINESimlicityのスマホ表示時に下記のようなグローバルナビを設置するカスタマイズを紹介します。スマホ表示用のグローバルナビを設置しよう!Simplicityでは、3つのスマホ用のメニューが用意されていますが、メニューを出すにはアクションが必要です。最初からグローバルメニューを出しておけば、慣れていない訪問者にも気づいてもらえます。PC表示とは違った形のグローバルメニューを設置するカスタマイズを紹介します。Simplicityのスマホ表示時のメニュースマホ表示の時にグローバルナビは出てきません。スペースの関係もあり普段は隠れています。Simplicityはさまざまな機能がカスタマイザーで設定できますが、スマホ表示では3種類のメニューから選べます。(simplicity2.01及び1.9.3の仕様)アコーディオン(デフォルト)アコーディオンツリーモーダルメニューこの3方式は、メニューボタンを押すことでメニュー(カテゴリ)がでてきます。限られたスペースしかないスマホ画面でも非常に便利です。メニューボタンに気づかないかも・・・?この便利な3つのメニューですが、初めて見る人は気づかないかもしれません。多くの人は、アイコンやMenuという文字からは、カテゴリを選べるとは思わないでしょう。カテゴリ表示をするメリットこのブログがそうであるように、複数のジャンルがあるブログの場合カテゴリが選べると非常に便利です。「子育て」に興味がある人は子育ての記事だけの一覧を見たいに違いありません。そのためにも、PC表示のグローバルナビのように最初からカテゴリ名がわかるメニューがあると便利です。前置きが長くなりましたが、スマホ表示でのグローバルメニューのカスタマイズを紹介します。Lab2様の記事を参考にさせて頂きました。カスタマイズ!!これを作っていきます。子テーマ(又は本テーマ)の「before-main.php」を開きます。その中にある//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。その行の下に以下のコードをコピペしてください。?>mobile関数を使っていますので、モバイル(スマホ)のときだけ適用(表示)されます。AAAAAは、そのカテゴリのURLです。PCのグローバルナビで、カテゴリ一を選ぶとそのカテゴリーの記事一覧になるので、表示されてURLをコピペしてください。メニュー1の部分が表示されるメニュー名です。表示名の文字数でそれぞれのメニューの幅が決まります。次に子テーマ(又は本テーマ)のスタイルシートを開きます。そこの一番下にでも、以下をコピペしてください。break-word;}5行目のbackground-colorでメニュー部分の背景の色を変えます。6行目のpaddingはメニューの背景の範囲(文字からどのくらいの距離まで背景をつけるか)とメニューとメニューの間隔を調整できます。画面左端との距離も兼ねています。ご自分の環境の合わせて調整してください。7行目のline-heightは、2行以上になるときの行間です。3行目の背景の幅にもよるので、それに合わせて調整してください。9行目のborder-radiusは、メニュー背景の角の丸みを調整します。お好みで変えてみてください。12行目のColorでメニューの文字色を変えられます。注意点2行目以降は、メニューは真ん中によります。ライフレシピでは、すべてのカテゴリを載せないで、主要なカテゴリに絞って1行に収めました。以上のカスタマイズでスマホのときだけ、設定したグローバルナビがでてきます。参考までに、ライフレシピでのコードのキャプチャをのせておきます。:Simplicity【Simplicty】コピペで簡単!トップページの記事一覧を揃ったタイル表示に変えるカスタマイズ。キャラ画像付きのふきだしで会話風にするカスタマイズ。始めてWordpressというものを扱おうとしている者です。今まさに当記事の設定を施そうと、手順を探っていたところでした。コメントありがとうございました。お役に立ててうれしいです。閉じタグのご指摘大変ありがとうございます。