[stinger5]スティンガー5をビジネステンプレートに、カスタマイズする方法 第3回「グローバルナビの変更」

スクリーンショット 2014-11-06 22.56.43
今回は「stinger5カスタマイズ」第3回目「グローバルナビの変更」です。
企業ホームページみたいにするには重要なポイントだと思います。

前回の記事はこちら
[stinger5]スティンガー5をビジネステンプレートに、カスタマイズする方法 第2回「ヘッダーに企業電話番号の追加」

デフォルト画像の削除

最初によくある企業のホームページだと、グローバルナビがロゴの下にある形が多いのでその形にする為に、デフォルトであるスティンガー5の画像を消したいと思います。消す方法はとても簡単です。

stinger5カスタマイズ
ダッシュボードから「外観」→「カスタマイズ」を選択します。

stinger5カスタマイズ
その後ヘッダー画像を選択して、画像を非表示にすればOKです。

stinger5カスタマイズ
上記は非表示にした時の画像です。

グローバルメニューの変更

グローバルメニューの変更は「外観」→「テーマの編集」
から「style.css」ファイルを編集することで変更できます。

stinger5編集部分
「style.css」ファイルを開き、画面をスクロールしていくと真ん中あたりに、上記の画像と同じ部分がありますので、そこを編集します。
メニューと記載されているところから、ページャーのとことまでがグローバルメニューの部分です。

nav  {
     line-height: 100px;
        background-color: #FF0000;
        color: #ffffff;
}


nav li {
     	position: relative;
	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCC;
	padding-top: 5px;
	padding-bottom: 5px;
}
nav li li {
        line-height: 60px;
	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
       line-height: 60px;
        float: left;	
	text-decoration: none;
}
.menu-navigation-container {
	overflow: hidden;
}
nav li a:hover {
     color: #ffffff;
       line-height: 60px;
	text-decoration: none;
}
nav li li {
       line-height: 60px;
	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
       line-height: 60px;
	float: left;	
	text-decoration: none;
}
.menu-navigation-container {
	overflow: hidden;
}
nav li a:hover {
       line-height: 60px;
        color: #FFFFFF;
	text-decoration: none;
}

かなり簡単ですが、編集してみました。
cssの知識があればそれほど難しくはないと思いますので、サイトにあったデザインに変更してみてください。

後日下記のコードにナビ部分だけ変更しました
色の変更とナビを丸めるための設定をしました。

nav  {
     line-height: 100px;
        background-color: #DAA520;
        color: #ffffff;
        border-radius: 10px;        
   -webkit-border-radius: 10px;   
   -moz-border-radius: 10px;  }

作成したナビ

スティンガー5グローバルナビ作成
上記が作成した、簡単なグローバルナビです。

2015年2月9日ナビの変更

10

今回再度ナビの変更をしました。下にコードを記載します。
色を変えたのと、枠を作ってみました。

nav  {
color: #ffffff;
border-top:solid 4px #fffacd;
border-bottom:solid 3px #2f4f4f;
border-right:solid 1px #fffacd;
border-left:solid 1px #fffacd;
font-weight: bold;
line-height: 20px;
background-color: #ffb6c1;
        font-color: #ffffff;
        border-radius: 15px 15px 0px 0px;        
   -webkit-border-radius: 15px 15px 0px 0px;   
   -moz-border-radius: 15px 15px 0px 0px;  }


nav li {
    	position: relative;
	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #ffffff;
	padding-top: 5px;
	padding-bottom: 5px;
}
nav li li {
	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
        float: left;	
	text-decoration: none;
}


.menu-navigation-container {
	overflow: hidden;
}


nav li a:hover {
         	text-decoration: none;
}
nav li li {

     	float: left;
	font-size: 18px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
	float: left;	
	text-decoration: none;
}
.menu-navigation-container {
 	overflow: hidden;
}
nav li a:hover {
      	text-decoration: none;
}



運用中のホームページはこちら

2015年1月から運用中です。
よかったら覗いてみてください。
カスタムして運用中!!「リサイクルショップ宝島 ホームページ」はこちら

最後に

次回はグローバルナビの下に、スライドするメイン画像を入れたいと思います。

前回の記事はこちら
[stinger5]スティンガー5をビジネステンプレートに、カスタマイズする方法 第2回「ヘッダーに企業電話番号の追加」

スティンガー5のカスタマイズまとめ記事はこちら

ワードプレスのテーマ「stinger5」をカスタマイズして、企業のホームページとして2015年1月から運用します

コメントを残す

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