株式会社シスアナコム

情報システムに関することなら、どんなことでも適切に助言いたします!

この投稿は1年以上前に公開されました。
現在では状況や内容が変わっている可能性があります。
ご注意下さい。m(_ _)m

STINGER5のメニューをカスタマイズ(改良版)

   

過去のこちらの記事にコメントを頂きました。

STINGER5でメニューをカスタマイズしたときに、スマホ表示にすると第一階層しか表示されないので、なんとかして欲しいとのこと。

実は私も以前から気になっていたのですが、スマホでメニューを表示させてた時にサブメニューまで表示されなくても大きな問題にならないかなと思っていました。

良い機会なので、少し調べてみることにしました。

スマホの場合にメニューをどう表示させるか

スマホの場合、マウスカーソルを重ねるという操作がないので、サブメニューを表示できません。

とりあえず、他のワードプレスを使っているスマホサイトを色々と調べてみました。

すると、スマホでメニューを表示させる場合はドロップダウンにしないで、メニューを全て表示させているサイトが多いと感じました。

そこで、PC表示の場合は今まで通り、スマホ表示の場合はドロップダウン形式にしないでメニューを全て表示させることにしました。

jQueryでのドロップダウン処理をやめる

いつからかは分かりませんが、STINGERのサブメニューを表示させたり非表示にしたりする処理は「jQuery」によるプログラムで実行されるようになっていました。

メニューをドロップダウン形式にするだけならCSSで十分。

STINGER5の親テーマのファイルを修正しなければならないので、あまりやりたくありませんが、他に方法がないので、この処理を無効にします。

弊社で利用している「さくらのレンタルサーバ」の場合は以下の通り。

まず、サーバ設定からファイルマネージャーを起動。

STINGER5の親テーマの中に「js」というフォルダがあります。
stinger5_menu01

その中の「base.js」というファイルを編集します。
stinger5_menu02

プログラム一番下のドロップダウンを行っているプログラムをコメントアウト(/* … */)します。
stinger5_menu03
保存して閉じます。

スタイルシートの編集

ワードプレスの管理メニューから外観→エディター(テーマ編集)を選択してスタイルシートを編集します。

これまで、メニューを階層化するために追加したCSSは全て削除。

その後、以下のCSSを追加します。

/* PCメニューをドロップダウンリストのように階層化 */
.smanone li {
  width: 162px;
  height: 40px;
  padding: 0;
}

.smanone li a {
  text-align: center;
  display: block;
  padding: 10px 0;
  width: 100%;
  background: royalblue;
  color: white !important;
}
 
.smanone li:hover > a {
  background: darkblue;
}

.smanone li ul li {
  overflow: hidden;
  height: 0;
  padding: 0;
}
 
.smanone li ul li a {
  background: darkblue;
  padding: 10px 0;
}
 
.smanone li:hover ul li {
  overflow: visible;
  height: 40px;
  z-index: 1;
}

/* スマホメニュー */
.pcnone li {
  width: 100%;
  padding: 0;
  margin: 0;
}

.pcnone li a {
  display: block;
  padding: 10px;
  width: 100%;
  background: royalblue;
  color: white !important;
  border: 1px solid darkblue;
}

.pcnone li:hover > a {
  background: darkblue;
}

.pcnone li ul li a {
  padding-left: 30px;
}

.pcnone li ul li {
  padding: 0;
  margin: 0;
}

これまでは、「menu」というクラスに対してカスタマイズを行っていました。

これを新しくPC表示用メニューに使われている「.smanone」とスマホ表示用メニューに使われている「.pcnone」をそれぞれカスタマイズするように変更しました。

「.smanone」はほぼ今まで通り。

「.pcnone」は行間をゼロにして1行1メニューの表示にしています。

メニューの色や大きさ等は自由に色々と変更して下さい。

バージョンアップ時の注意

親テーマのファイルを修正していますので、親テーマのバージョンを更新した場合は、同様に修正するのを忘れないで下さい。

 - ひとこと, ひとこと(ワードプレス)

↓ブログランキングに参加しています!


ネット・PC(全般) ブログランキングへ
にほんブログ村 IT技術ブログ ITコンサルティングへ
にほんブログ村

Comment

  1. 森 茂雄 より:

    スタイルシートの編集にスマホは問題なく、メニュー表示されるようになりましたが、PCについて、第2階層のメニューが1行表示になってしまいました。 スタイルシートの勉強不足で申し訳ありませんが、再度ご教示頂きたく。

    • sysana より:

      すみません。 「第2階層のメニューが1行表示」という意味がよく分かりません。 森さんのホームページで状況を確認しようと思いましたが、表示されません。 弊社のメニューと比較して、第2階層がどんな状況なのでしょうか?

      • 森 茂雄 より:

        申し訳ありません。 本日、URLを移転しました。 宅建過去問  全問  権利関係  ・・・ と表示したいのですが、 宅建過去問  全問権利関係 と表示されます。

        • sysana より:

          森さんの新しいウェブサイトのstyle.cssファイルを見ました。 この行が邪魔しています。
          ———————————————————*/
          この行がCSSファイルを見やすくするためのコメント行になってません。 /* と */の組み合わせでコメント行になります。 sytle.cssファイルの中の、メニューをカスタマイズするために加えたCSSの 上と下に入っているこの行を削除するか、
          /*——————————————————-*/
          ↑ここ注目
          に変更すれば弊社のサイトと同じようにメニューが表示されると思います。
          余計なお世話かもしれませんが、STINGER5オリジナルのstyle.cssファイルに 直接cssを加えるのではなく、子テーマを作って、子テーマのstyle.cssファイルに カスタマイズするためのcssを記述した方がいいと思います。 子テーマを作るのは少し難しいですが。

          • 森 茂雄 より:

            ご指摘どおり修正したところ、問題なく表示されました。 どうもありがとうございます。 子テーマにも挑戦したいと思います。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です