株式会社シスアナコム

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

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

STINGER3のメニューをカスタマイズする

      2014/04/19

シスアナコム社長の杉山です。

早速本日より、STINGER3のカスタマイズに取りかかることにしました。

STINGER3はパソコン用の表示とスマホ用の表示を切り替えています。

スマホの表示はしばらく置いておいて、まずはパソコン用の表示をカスタマイズします。

ヘッダー画像を削除

まずはデフォルトのヘッダー画像を削除しました。

ワードプレスの管理メニューの外観→ヘッダーからデフォルトのヘッダー画像を削除。

デフォルトの画像はすぐに元に戻す事もできます。

メニューのカスタマイズ

次はメニュー。

twentythirteenの時はメニューがドロップダウンリストのように階層化されて表示されていました。

STINGER3はドロップダウンリストのような階層化表示に標準では対応していないようです。

そこで、シンプルでいいのでメニューをカスタマイズすることにしました。

出力されるソースを見ると、メニュー部分は「#navi-in」というIDが付けられているようです。

ここをカスタマイズすれが良さそう。

ワードプレスの管理メニューから外観→テーマ編集で「スタイルシート(style.css)」を編集します。

スタイルシートの編集について

まずはメニュー全体の大きさと位置を定義。

#navi-in {
  margin: 10px auto auto;
  padding: 0;
  width: 986px;
}

デフォルトのヘッダー画像の大きさに合わせました。

次に「#navi-in」範囲内のリスト要素の定義。

#navi-in ul {
  margin: 0;
  padding: 0;
}

#navi-in li {
  float: left;
  width: 162px;
  height: 30px;
  margin: 0;
  padding: 0;
}

メニューが6列なので、(986px-10px)÷6列=162pxにしました。

次にメニュー範囲内のリンクの表示を定義。

#navi-in li a {
  text-align: center;
  display: block;
  margin: 0;
  padding: 10px 0;
  width: 100%;
  background: royalblue;
  color: white !important;
}

背景色はロイヤルブルーで文字色は白。

「!important」を付けないと文字色は白になってくれませんでした。

次はマウスをメニューに乗っけた場合の定義。

#navi-in li:hover > a {
  background: darkblue;
}

背景色をダークブルーに変更します。

最後はサブメニューを隠したり表示させたりする定義。

#navi-in li ul li {
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

#navi-in li ul li a {
  background: darkblue;
  margin: 0;
  padding: 10px 0;
}

#navi-in li:hover ul li {
  overflow: visible;
  height: 30px;
}

これで終了。

非常に簡単なメニューなので、もう少しカスタマイズするかもしれません。

Syntax Highlighter Evolvedプラグインの追加

この投稿のために、コードを綺麗に表示できるプラグイン「Syntax Highlighter Evolved」を追加しました。

では。

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

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


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

Message

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