サイト全体に「モダンブラック 」スキン適用中。

グロバールメニューに現在位置を表示させたい | カスタマイズ相談 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。

  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
グロバールメニューに現在位置を表示させ...
 
Share:

[解決済] グロバールメニューに現在位置を表示させたい  

  RSS

aosora
(@aosora)
Active Member
参加: 4週間 前
投稿: 15
2019年2月26日 18:12  

初めまして。最近こちらのサイトにて勉強をさせていただいています。
グロバールメニューに現在位置のメニュー項目にボーダー表示させたいと思い、下記ページの内容を参考に設定をしました。

https://wp-cocoon.com/community/customs/%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%A7%E9%81%B8%E6%8A%9E%E7%8A%B6%E6%85%8B%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E5%A4%89%E5%8C%96/#post-1863

下記のコードを利用しています。

.navi-in .current-menu-item a {
border-bottom: 6px solid #a7e1c6;
}

記事一覧ページでは大丈夫なのですが、記事単体ページでは現在位置を表示するボーダーが無くなります。添付画像をご確認ください。サイトのURLを伝えすることが出来なく申し訳ありません。

こちらの解決方法などがありましたら教えていただけると大変助かります。
皆様のお力をお貸しください。お手数をおかけいたしますが、よろしくお願いします。


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年2月26日 20:14  

投稿ページでは、.current-menu-itemが出力されないのはWordPressの仕様かと思います。
カレントページではなくなるので。

解決するには、WordPressをカスタマイズするしかないと思いますが、僕も調べないとやり方は現在知りません。


aosora
(@aosora)
Active Member
参加: 4週間 前
投稿: 15
2019年2月27日 08:25  

わいひら様
ご連絡ありがとうございます。

カレントページでなくなると表示できないようですね。
WordPressのカスタマイズは知識がまだまだ浅いので難しいですが、私の方でも解決方法を調べてみます。よろしくお願いいたします。


草村
(@kusamura_mono)
Trusted Memberサイト
参加: 4か月 前
投稿: 91
2019年2月27日 17:54  

こんにちは。

これは「NEWS」というカテゴリーのメニューがあって、そのカテゴリーに属する投稿ページでも同じスタイルを適用したいという事ですよね?

そうであればCSSを以下のようにすれば適用されるかもしれません。

.navi-in .current-post-parent a,
.navi-in .current-post-ancestor a,

.navi-in .current-menu-item a {
border-bottom: 6px solid #a7e1c6;
}

記事が属するカテゴリーのメニューには「.current-post-parent」というclassが付与されるようです。
子カテゴリーに属している場合は、親カテゴリーのメニューには「.navi-in .current-post-ancestor」が付与されるそうです。

http://www.webdesignleaves.com/wp/wordpress/146/


わいひら 件のいいね!
草村
(@kusamura_mono)
Trusted Memberサイト
参加: 4か月 前
投稿: 91
2019年2月27日 18:33  

子カテゴリーに属している場合は、親カテゴリーのメニューには「.navi-in .current-post-ancestor」が付与されるそうです。

.navi-inは不要でした「.current-post-ancestor」ですね。
失礼しました。


わいひら 件のいいね!
aosora
(@aosora)
Active Member
参加: 4週間 前
投稿: 15
2019年2月27日 19:28  

草村さま

こんばんは。丁寧に教えていただきありがとうございました。
CSSのコードを教えていただき助かります。
下記のように試してしてみましたが、うまくできませんでした。

.navi-in .current-post-parent a,
.navi-in .current-post-ancestor a,
.navi-in .current-menu-item a {
border-bottom: 6px solid #a7e1c6;
}

記事一覧ではメニュー下部のボーダーが表示できる。
記事単体ではメニュー下部のボーダーは非表示になる。←表示できるようにしたい。

もし、情報不足なようでしたら、何が必要になりますでしょうか?
リンク先の内容は良く理解できませんでした。申し訳ありません。

お手数をおかけいたしますが、よろしくお願いします。


草村
(@kusamura_mono)
Trusted Memberサイト
参加: 4か月 前
投稿: 91
2019年2月27日 19:59  

他のスタイルが優先されているとか、キャッシュが残ってスタイルが反映されていないとか…そもそも私が思っている前提条件が違う等でしょうか。

私のテスト環境では問題ないので実際のページを見てみないと私にはわからないかもしれません… 😥 

※リンク先はHTMLの基本構造の所を参考にしたので貼らせていただきました。内容は全体的には関係ないので読み飛ばしてしまって大丈夫です!


わいひら 件のいいね!
aosora
(@aosora)
Active Member
参加: 4週間 前
投稿: 15
2019年2月27日 20:40  

草村さま

お返事をいただきありがとうございました。

他のスタイルも幾つか書いていますので、私の方でも違うテスト環境を作ってみます。
できれば、実際のページを確認いただきたいのですが、ここにURLを張ると公開されてしまうので、このような場合はどうすれば良いでしょうか?

慣れていなくて申し訳ありません。
よろしくお願いいたします。


aosora
(@aosora)
Active Member
参加: 4週間 前
投稿: 15
2019年2月27日 22:16  

草村さまのCSSのアドバイスで上手くいきました。ありがとうございます。
上手くいかなかったのは、私がNEWSの外観/メニュー設定を「カスタムリンク」にしていたのが原因でした。「カテゴリ」にすると記事単体でもメニュー下部のボーダー表示できました。すごく悩んでいたので本当に助かりました。

ただ、固定ページでは、メニュー下部のボーダー表示がうまくできません。
「PROFILE」の外観/メニュー設定は「固定ページ」に設定しています。
画像を添付しますのでご確認ください。よろしくお願いします。


aosora
(@aosora)
Active Member
参加: 4週間 前
投稿: 15
2019年2月27日 22:50  

これが正解なのか不安ですが、固定ページのボーダー表示は下記のCSSを追加することで解決しました。

.navi-in .current-page-parent a,
.navi-in .current-page-ancestor a,

わいひら様、草間様のご協力のお陰でなんとかなりそうです。
本当に困っていたので助かりました。ありがとうございました。


草村
(@kusamura_mono)
Trusted Memberサイト
参加: 4か月 前
投稿: 91
2019年2月27日 22:55  

上手くいったようでよかったです!

添付画像のSample PageはPROFILEが親ページだから、という事ですよね?
さらに追加して以下のコードでどうでしょうか。

.navi-in .current-page-ancestor a,
.navi-in .current-post-parent a,
.navi-in .current-post-ancestor a,
.navi-in .current-menu-item a {
border-bottom6px solid #a7e1c6;
}

わいひら 件のいいね!
草村
(@kusamura_mono)
Trusted Memberサイト
参加: 4か月 前
投稿: 91
2019年2月27日 22:57  

ありゃ、書いてる間に解決されていましたね。
お疲れ様でした 😊


わいひら 件のいいね!
aosora
(@aosora)
Active Member
参加: 4週間 前
投稿: 15
2019年2月28日 05:31  

草村さま

昨夜はありがとうございました。
CSSの追加は下記だけで良かったみたいですね。

.navi-in .current-page-ancestor a,

丁寧に教えていただき助かりました。ありがとうございます。
「ものぐさ」を拝見させていただきました。分かりやすくて勉強になります 😊 


わいひら草村 件のいいね!
草村
(@kusamura_mono)
Trusted Memberサイト
参加: 4か月 前
投稿: 91
2019年2月28日 17:36  

私もこちらのトピックを見てメニューにclassが振られてる事を知ったので勉強になりました。
一応テストした感じでは固定ページは.current-page-ancestorの方だけで大丈夫そうでした。

そしてブログ見て頂けて嬉しいです。ありがとうございます!
この度はお疲れ様でした!


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4220
2019年2月28日 22:18  

そんなクラスが割り振られていると僕もしませんでした。
勉強になりました。


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
○アダルト・出会い系サイト可

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
○アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました