ナビゲーションバーをカスタマイズする

公開日: : 最終更新日:2014/08/18 wordpressカスタマイズ , ,

 wordpressテーマSTINGER3のナビゲーションバーをカスタマイズする。

 目的は以下のとおり。

・パソコン表示でのナビゲーションバーの項目の境目をはっきりさせる。

・パソコン表示でのナビゲーションバーの各項目がリンクであるということをわかるようにする。

 具体的には

・境目の|を太くする。

・マウスを乗せたとき背景色が変わるようにする。

 どちらもスタイルシート.phpをカスタマイズする。

スポンサーリンク

ナビゲーションバーの境目を太くして項目の境をはっきりさせる

1,【外観】⇒【テーマの編集】⇒【スタイルシート.php】をクリック。

2, #navi-in li {の中のborder-left-width: 1px;の数字部分を大きな数字にする。

 で太くしてみたら、実は点線だった。

 これを実線に変えるには、border-left-style: dotted;のdottedをsolidへ変更する。

 2本線ならdouble、破線ならdashed、くぼみ線groove、隆起線ridgeというように書き換える。

ナビゲーションバーの項目にマウスを置いたときに背景色がかわるようにアレンジ

  #navi-in li a:hover {に背景画像を付け加える。

#navi-in li a:hover {
    color: #00f;text-decoration: underline;background-color: #fff;
}

 マウスを乗せたときにリンクの色が変わるようにしてみた。

  • にほんブログ村 ブログブログ ブログノウハウへ
    にほんブログ村
  • FC2ブログランキング
  • このエントリーをはてなブックマークに追加

関連記事

wordpressカスタマイズ

タグ一覧を作ろう2

 タグ一覧作成NO2 。  前回のタグ一覧だと、50音順の並び替えができないようだったので、タグク

記事を読む

wordpressカスタマイズ

wordpressプラグインを使わない記事一覧まとめページ

 wordpressのプラグインを使わない記事一覧の作成過程をまとめてみた。  固定ページとp

記事を読む

wordpressカスタマイズ

全記事一覧をカテゴリー別に表示させる2

 カテゴリー別全記事一覧を作りたい。  前回参考にしたサイトさんの公開コードではうまくいかなか

記事を読む

wordpressカスタマイズ

wordpressの固定ページを使って全記事一覧を表示させる方法

 wordpressの固定ページを使って、全記事一覧を表示させる方法。  wordpressの

記事を読む

wordpressテーマSTINGER3カスタマイズ

wordpressテーマSTINGER3のサイドバー【NEW ENTRY】のアイキャッチ画像を削除する方法

 PC表示でもwordpressテーマSTINGER3のサイドバー【NEW ENTRY】のアイキャッ

記事を読む

wordpressテーマSTINGER3カスタマイズ

PAGE itiran 固定ページテンプレート (page-itiran.php)を使って全記事一覧を作る

 STINGER3には「PAGE itiran 固定ページテンプレート (page-itiran

記事を読む

ファビコンの見本

Favoriteを設置しよう

 wordpressにファビコンを設置してみよう。  ファビコンはブラウザのタブに表示されるア

記事を読む

wordpressカスタマイズ

カテゴリーを一覧表示するページを作ろう

 WordPressのカテゴリー一覧を表示するページを作ってみよう。  以前のWindowsの

記事を読む

wordpressテーマSTINGER3カスタマイズ

カテゴリー一覧の親カテゴリーの文字サイズを変更する

 サイドバーのPC表示の親カテゴリーのみフォントサイズを大きくした。  使っているテーマはSTIN

記事を読む

タグ関数wordpress

WordPressテーマGush2のTOPページアーカイブページに要約を表示する

 Wordpressの無料テンプレート(テーマ)Gush2はすっきりしたデザインで管理人の好みの

記事を読む

Message

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


follow us in feedly

応援してね⇒にほんブログ村 ブログブログ ブログノウハウへにほんブログ村

ワードプレスのテキストとビジュアルのタブの切り替えができない

 しばらくぶりにブログを更新しようと思ってみたら、ワードプレスの更新や

プラグインを使わずにソースコードを表示させる方法

 ソースコードを表示させるのに便利なのはプラグインの利用。  で

ソースコードの解説にCrayon Syntax Highlighter

 Webサイト上でHTML/CSSやプログラミングのコードを解説す

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。

お客様のホームページがアップロードされていない状態です

 Wordpressの手動インストールで無事インストールできたのに

WordPressテーマGush2のTOPページアーカイブページに要約を表示する

 Wordpressの無料テンプレート(テーマ)Gush2はすっき

FC2ブログとWordPressのURLの構造法則と変数

 記事数の多いFC2ブログを変数を使ってWordpressに引越し

記事数の多いFC2ブログの引越しは変数で作業時間短縮

 FC2ブログからWordpressへの引越し第二段。  FC2

プラグインの内容をメモできるWordPressプラグイン

 Wordpressのプラグインは便利だが、説明文が英語のせいで中

WordPressのカテゴリーの管理画面にIDを表示できるようにするカスタマイズ

 Wordpressのカテゴリーの管理画面に記事のIDを表示できる

海外スパムをシャットアウト「Throws SPAM Away」日本産プラグイン

 Wordpressでブログを運営していると英語のスパムコメントが

→wordpress初心者・STINGER3カスタマイズ中の記事をもっと見る

Googleでブログを作ろう 
 Googleの無料ブログサービスBloggerで作っているブログ。
 Bloggerの設定やカスタマイズ方法などを載せている。

使える無料ソフト&無料サービス
 高いパソコンに入ってるようなソフトは必要ない!をコンセプトに無料ソフトや無料のWEBサービスをご紹介。

  • コメントテスト

  • PAGE TOP ↑