*

WordPress(Stinger3テーマ)のナビゲーションメニュー追加

公開日: : 最終更新日:2014/03/13 Stinger, WordPress ,


スポンサードリンク



テーマはStinger3を利用しています。WordPressのバージョンは3.7.1です。
ナビゲーションメニューを追加した時の作業メモです。

メニューの新規作成

WordPressの管理画面の「外観」→「メニュー」を選択し、メニューの名前の右側のテキストボックスに任意の文字列を入力し「メニュー作成」ボタンをクリックします。
スクリーンショット 2013-11-21 17.51.30

スクリーンショット 2013-11-21 17.59.16
後は、時節の「既存メニューへのメニュー追加」と同様に操作すればOKです。

既存メニューへのメニュー追加

ナビゲーションメニューにカテゴリーへのメニューを追加してみます。

WordPressの管理画面の「外観」→「メニュー」を選択します。

既に「Titanium」、「JavaScript」、「WordPress」がメニューに追加されている状態で、カテゴリの「時事ネタ」をメニューに追加してみます。

まずは折り畳まれているカテゴリーを展開します。カテゴリーの部分をクリックします。
スクリーンショット 2013-12-10 20.41.08

画像の左下にある「時事ネタ」のチェックボックスをチェックし、「メニューに追加」ボタンをクリックします。
スクリーンショット 2013-12-10 20.42.33

すると右側のメニュー構造の「WordPress」の下に「時事ネタ」が追加されました。
スクリーンショット 2013-12-10 20.44.03

「このメニューに新しいトップレベルのページを自動追加」と「ナビゲーションバー」をチェックし、「メニューを保存」ボタンをクリックします。

「このメニューに新しいトップレベルのページを自動追加」を選択する事でTOPへ移動するメニューが自動的に追加されます。

 

これで「ナビゲーションバー」に「時事ネタ」が追加されました。
なお、追加されている各メニューの表示順の変更は、以下の画像の「 ひとつ上へ」、「ひとつ下へ」リンクをクリックすることで行えます。
スクリーンショット 2013-12-10 20.47.02

 

「ナビゲーションバー」に追加しただけでは面白くないですので、デザインを少し変えてみます。
変更するファイルはテーマフォルダ配下のstyle.cssになります。
変更前にstyle.cssのバックアップを必ず取っておいてください。

変更した内容としては、以下の5点です。

  • 文字のフォントを13pxから18pxにする。
  • marginに0 0 0 2pxを指定する。
  • グラデーション指定
  • ボックスシャドー指定
  • hover時動作のリンク文字列色を#C03にする変更(他のリンクと同じ)

変更後のstyle.cssのナビゲーションに関する記述は以下の通りです。

 

グラデーションの設定については
Ultimate CSS Gradient Generator
を利用させていただきました。

別エントリー「CSSのグラデーションを生成する「Ultimate CSS Gradient Generator」を使ってみる 」で利用方法を記載しておりますのでご覧ください。

変更後のメニューイメージは以下の通りです。
スクリーンショット 2013-12-10 20.49.41

とりあえずそれらしくなった様な気がします。

2013/11/21追記
Macのブラウザ(safari,firefox,chrome)で日本語メニューを表示したときに、そのliだけ高さが高くなる現象を確認したため高さを固定でセットしています。フォントサイズを変更する場合は合わせて変更してください。しかしこの対応でも文字が下に落ちてるので根本的な解決方法を模索中です。


スポンサードリンク



関連記事

no image

WordPress(Stinger3)の見出し2のCSSを変更する

WordPress(Stinger3)の見出し2のCSSを変更してみました。 何故変更したかと言う

記事を読む

no image

WordPress 3.8にアップデートしました。

利用しているWordPressを3.8にアップデートしました。 利用しているテーマはStinger

記事を読む

no image

突然WordPressの「投稿一覧」画面に存在するはずの投稿がみつからないず「投稿が見つかりませんでした。」と表示される。

なんだか昨日からおかしいと思っていたのですが 突然WordPressの「投稿一覧」画面が以下のよう

記事を読む

no image

ウェブマスター ツールの構造化データでauthor がありません、updated がありませんとエラーが出る。[結果報告]

前回修正したウェブマスター ツールの構造化データのエラー発生の件の結果報告をさせていただきます。

記事を読む

no image

久しぶりに攻撃されました。

本当に怖い世の中になってますね。 久しぶりに攻撃されちゃいました。 古いWordPres

記事を読む

no image

WordPressにGoogle Analyticsを導入する。

WordPressのアクセス解析には「StatPress Reloaded」を利用しているのですが、

記事を読む

no image

WordPressのソースを読んでみる【その1】

少しずつですがWordPressのソースを読んでいこうと考えております。当然WordPressはPH

記事を読む

no image

ソースコードの表示をCrayon Syntax Highlighterに変更しました。

WordPressにgoogle code prettifyを導入する。で行った設定でソースコードの

記事を読む

no image

ウェブマスター ツールの構造化データでauthor がありません、updated がありませんとエラーが出る。

前々から気になっていたのですが、 「ウェブマスター ツール」の「検索デザイン」>「構造化

記事を読む

no image

WordPress 3.9の 自動で動く「下書き保存機能」が不安定です。

WordPress 3.9に本日アップしたのですが、不安定ですね・・・ 自動で動く「下書き保存

記事を読む

Message

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

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑