質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1240閲覧

トップページのみCSSが反映されないのです。

t-maekawa

総合スコア44

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/11/18 07:32

編集2016/11/18 08:22

お世話になります。
現在作成中のサイトなのですがグローバルメニューのレイアウトで一番右の縦の仕切り線が
トップページの反映されず途切れています。
jsフォルダの中のjscritp.jsの中の

var aWidth = 990/n_size;

部分を調整し、
style_pc.cssの中の

/* global menu */ .menu_button { display:none; } #global_menu { height:47px; margin:0; position:absolute; left:0px; bottom:46px; padding:0; z-index:999; border-right:1px solid #;ff0000 width:994px; } #global_menu ul{ border-right:1px solid #ddd;} #global_menu ul ul { display:none; position:absolute; top:47px; left:0px; margin:0; padding:0; } #global_menu ul ul ul { left:100%; top:0; margin:0 0 0 -1px; } #global_menu li { float:left; font-size:1%; position:relative; } #global_menu li.last { float:left; font-size:1%; position:relative;border-right:1px solid #ddd} #global_menu li a { font-size:13px; border-left:1px solid #ddd; font-weight:bold; background:url(img/header/menu.gif) repeat-x left top; text-align:center; text-decoration:none; color:#ff0000; margin:0; display:block; height:47px; line-height:47px; } #global_menu li a:hover { background-position:left bottom; } #global_menu ul ul li { float:none; height:auto; line-height:26px; padding:0; margin:0; text-align:left; } #global_menu ul ul a { font-size:12px; position:relative; padding:10px 20px 8px; height:auto; line-height:180%; margin:0 0 -1px 0; text-align:left; background:#000000; border:1px solid #cc0000; } #global_menu ul ul a:hover { border:1px solid #ccc; background:#cc0000; }

も確認したのですが、なぜかトップページだけ反映されません。
border-right:1px としているのに
反映されない、しかもトップページだけというのがわかりません。

ご存知の方いらっしゃいましたら
よろしくお願いいたします。
トップページ
リンク内容

その他ページ
リンク内容

となります。

header.phpは

<?php endif;?> <!-- global menu --> <a href="#" class="menu_button"><?php _e('menu', 'tcd-w'); ?></a> <div id="global_menu" class="clearfix"> <!--オリジナル部分--> <!--オリジナル部分--> <?php if (has_nav_menu('global-menu')) { wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'global-menu' , 'container' => '' ) ); } else { ?> <ul> <?php wp_list_pages('title_li='); ?> </ul> <?php }; ?> </div> <!-- news ticker -->

となっております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

Topにはclass="last"がついてないのでつければ出ると思います。

html

1<!-- top --> 2<li class="page_item page-item-23" style="width: 165px;"> 3 4<!-- 中 --> 5<li class="page_item page-item-23 last" style="width: 165px;">

投稿2016/11/18 07:43

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

t-maekawa

2016/11/18 08:19

ありがとうございます。 トップページの該当部分にlastをつける、ということだと思うのですが ワードプレスで作成しているので、おそらくheader.phpだと思いますけれども、 ただ、どの部分に修正を加えればいいのかわかりません。 lastという文言は見当たらないので、どうすればいいのでしょうか?
t-maekawa

2016/11/18 08:24

追加質問で申し訳ありませんがよろしくお願いいたします。
gin

2016/11/18 08:32

中ページにはどうやってつけたんでしょう?? CSSで解決するなら ------- #global_menu li.last { float:left; font-size:1%; position:relative;border-right:1px solid #ddd} ↓ #global_menu li:last-child { float:left; font-size:1%; position:relative;border-right:1px solid #ddd} ------- でもいけますが…
t-maekawa

2016/11/18 08:42

お世話になります。 こちらは最初からついておりまして、ただ、固定ページを作る際に現在のメニュー数にしましたところ、右側のみ途切れ、しらべてjsとcssに修正をかけたらトップページ以外に反映された次第です。 上記変更試してみます。
t-maekawa

2016/11/18 08:47

お世話になります。 変更いたしましたら全ページ右側の縦線が切れて、わかりに子メニューのあるプルダウンのところの右側のボーダーが灰色で表示されました。
gin

2016/11/18 09:03

今って反映されてます?<回答のCSSが反映されてる気配がないんですが… 掲載登録などほかのページにはclass="last"がついていないのでここら辺は元からついていなかったんじゃないでしょうか。 CSSの変更だけでclassが付与されなくなるとかないので、もしついていたのならCSS以外を変更してますよね? あと子要素もあるので、 #global_menu > ul li:last-child {} これにしてください。
t-maekawa

2016/11/18 09:24

お世話になります。 すみません、childを消していったん元に戻しました。 戻しましたが上記の状態で変わりません。 #global_menu > ul li:last-child {} に変更してみます。
t-maekawa

2016/11/18 09:31

お世話になります。 上記変更してアップしましたら 一番右側の縦のグレーの仕切り線は反映されました。 ありがとうございます。 ただ、子要素の部分の右側がグレーのままです。 (元々は赤の1本のラインのみでした。)
gin

2016/11/18 09:34

なるほど。 #global_menu > ul > li:last-child {} こんな感じでさらに指定する必要がありましたね…
t-maekawa

2016/11/18 09:36

ありがとうございます。 変更して確認してみます。
t-maekawa

2016/11/18 09:44

大変申し訳ございません。 本来の目的である一番右の項目の縦線は反映されました。 ありがとうございます。 ただ、 おそらく変更したのは子要素(プルダウンのメニュー)のなると思います。 なぜそれで右端が改善されたのかは不明ですが、 子要素は、全周囲赤ラインに戻す事はできないのでしょうか? CSSの干渉とか相互関係がわからなくなってきました。 すみません。
gin

2016/11/18 09:59

プルダウンメニューのほうは触ってませんよ~ 見た感じ最初のままですが…
gin

2016/11/18 10:00

プルダウン右側に1pxの線があるのを含め。
t-maekawa

2016/11/18 10:04

ありがとうございます。 確認なんですけれども、 プルダウンの枠は赤い枠に見えますでしょうか? 赤枠のみがもともとです。 私の環境だけプルダウンに右側赤枠の横にグレーの縦線が入って見えるのでしょうか? 何か環境の違いでしょうか?
gin

2016/11/18 10:05

子要素の右側の線を消すには、 #global_menu ul{ border-right:1px solid #ddd;} ↓ #global_menu > ul{ border-right:1px solid #ddd;} こうですね。
gin

2016/11/18 10:06

その線は最初から見えてましたよ~
t-maekawa

2016/11/18 10:07

ありがとうございます。 変更かけてみます。
t-maekawa

2016/11/18 10:12

お世話になります! ありがとうございます! 変更反映されました! 助かりました!
guest

0

cssはブラウザにキャッシュされることがあるので、ブラウザのcacheを削除してみてはどうでしょうか?

投稿2016/11/18 09:31

kaji

総合スコア648

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

t-maekawa

2016/11/18 09:56

ありがとうございます。 グーグルクロームを使っているのですが、設定から履歴の削除でクッキーを削除して 再読み込みもF5ボタンを押して試しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問