メニューの文言位置について

2016 年 4 月 7 日

ホーム フォーラム 使い方全般 メニューの文言位置について

このトピックには2件の返信が含まれ、2人の参加者がいます。1 年、 3 ヶ月前 mm12 さんが最後の更新を行いました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #78063

    mm12
    参加者

    ——————————————-
    WordPress のバージョン:4.4.2
    Welcart のバージョン:1.7.5
    ご利用のテーマ:WelCartDefaultTheme
    症状を確認したブラウザ:GoogleChrome 49.0.2623.110
    サーバー(会社名、サービス名):
    SSLの利用: 
    WordPress のパーマリンク設定:
    ——————————————–

    お世話になっています。

    初歩的なご質問で非常に申し訳ないのですが…

    [外観]→[メニュー]の[メニュー構造]の「ナビゲーションラベル」の文言なのですが
    例えば「カート」と記載されるとメニュー上のボタンは上下センタリングされるのですが
    改行(2行以上)させるとセンタリングされません。

    2行以上でのセンタリングをさせる方法をお教えいただけますでしょうか?

    #78064

    ohnishi
    参加者

    こんにちは

    お使いのテーマ内のstyle.cssを以下のように修正する必要があります。

    ◆ style.css 179行目あたり

    
    div.mainnavi ul li,
    ul.mainnavi li {
    	padding: 0px;
    	margin: 0px;
    	float: left;
    	position: relative;
    }
    

    
    div.mainnavi ul li,
    ul.mainnavi li {
    	padding: 0px;
    	margin: 0px;
    	position: relative;
    	display: table-cell;
    	vertical-align: middle;
    	background-image: url('images/button_main_navi.jpg');
    	background-repeat: no-repeat;
    	background-position: -131px 0px;
    }
    

    ◆ style.css 186行目あたり

    
    div.mainnavi li a,
    ul.mainnavi li a {
    	width: 121px;
    	height: 36px;
    	padding: 20px 5px 0px 5px;
    	margin: 0px;
    	display: block;
    	background-image: url('images/button_main_navi.jpg');
    	background-repeat: no-repeat;
    	background-position: -131px 0px;
    	color: #FFF;
    	font-weight: bold;
    	font-size: 13px;
    	text-align: center;
    }
    

    
    div.mainnavi li a,
    ul.mainnavi li a {
    	width: 121px;
    	padding: 5px;
    	margin: 0px;
    	display: block;
    	color: #FFF;
    	font-weight: bold;
    	font-size: 13px;
    	text-align: center;
    }
    

    ◆ style.css 202行目あたり

    
    div.mainnavi li a:hover,
    ul.mainnavi li a:hover {
    	background-position: 0px 0px;
    	text-decoration: none;
    }
    

    
    div.mainnavi li a:hover,
    ul.mainnavi li a:hover {
    	text-decoration: none;
    }
    

    ◆ style.css 206行目あたり

    
    div.mainnavi ul ul,
    ul.mainnavi ul {
    	display:none;
    	position:absolute;
    	top:56px;
    	left:0;
    	float:left;
    	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	z-index: 99999;
    }
    

    
    div.mainnavi ul ul,
    ul.mainnavi ul {
    	display:none;
    	position:absolute;
    	top:100%;
    	left:0;
    	float:left;
    	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	z-index: 99999;
    }
    

    ◆ style.css 219行目あたり

    
    div.mainnavi ul ul li,
    ul.mainnavi ul li {
    	min-width: 111px;	
    }
    

    
    div.mainnavi ul ul li,
    ul.mainnavi ul li {
    	display: block;
    	min-width: 111px;	
    }
    

    に修正してください。
    また、以下のスタイルを追記してください。

    
    div.mainnavi li:hover,
    ul.mainnavi li:hover {
    	background-position: 0px 0px;
    }
    

    以上になります。
    どうぞよろしくお願いします。

    #78078

    mm12
    参加者

    返信遅くなり申し訳ありません。

    詳細なご回答ありがとうございます。
    頂いた方法で実現いたしました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

このトピックに返信するにはログインが必要です。