daiさぁん、おくやぁん！教えてくれてありがとう♪Simplicity1.8.1で、ナビリンク＝グローバルナビのリンク背景色を消す方法

1ページ目は、お世話になった、教えてもらった事への感謝のページ。2ページ目は、ナビリンクの背景の消し方です！

daiさん@dairexiaさんが、困り果ててる私にあてて、かうたっく(@kautakku)のための「よくわかるcss講座」ってページを時間を割いて作ってくれたんです♪めちゃくちゃ嬉しくって感謝でいっぱい満たされます♪ダイさんありがとぉ！！

そのページに至るまでの、男前っぷりと、教えてもらった事に対しての私の様子を書いたページになります。

ダイブロにCSS講座に至るまでの様子が、素敵だった件♡
daiのネタブログ「ダイブロ」で、かうたっく(@kautakku)のための「よくわかるcss講座」を公開！
コードをサーバーFTP内ファイルで探してみた
グローバルナビのリンクにマウスを置いた時、カスタマイズした通り反映しない時の対処法
1. 1つ目の方法：CSSでコピペ一発 !important を使う方法
２つ目方法：テーマから、ナビリンクをホバーした箇所すべてを消す方法
5箇所目：css-custom.php内より、削除する
ダイさんにっ♪

ダイブロにCSS講座に至るまでの様子が、素敵だった件♡

私、CSSほんっと全然分からなくってぇ、いつもコピペして触って反応しなくって、ググって迷宮入りしてしまうんですっ。。

そんな時に頼れる「おにぃ」が、おくたにさん：okutani@vdeepさん♪右も左も分からなくなってしまった私かうたっく@kautakkuが、ツイッターで＠を飛ばしたんですねっ。

@kautakku @sukkirikumiko @okutani_t
マウスオーバーしたメニューだけが文字色つけたいのに色付かない上に円形が解除されて四角くなるって事だよね？

多分CSS絡みだろうしおくやんならサクッと解決できそうだけどねぇ(　ﾟдﾟ)

— しむ（コトバコ） (@46sym) August 3, 2015

@okutani_t @kautakku @sukkirikumiko きたー！！！頼りになるぜええええ

俺も勉強がてら家に帰ったら見てみる！！
そしておくやんの解答みて答え合わせします( ✧Д✧) ｶｯ!!

— しむ（コトバコ） (@46sym) August 3, 2015

@dairexia @kautakku えっ…私強引にimpotrantで誘っちゃったのに、そんなかんたんに許してくれるなんて…ぽっ//

私、daiさんにずっと付いてゆきますわ///(見えない出口再び)

— okutani (@okutani_t) August 3, 2015

Tweet / Twitter

この話の流れから、ダイさんのダイブロでかうたっくの為の講座を公開してくれた流れになったんです。

一部抜粋過ぎて、この会話見てどこまで理解してもらえたのか？わかんないですけど。。

知識のあるお二人が、どうやったら私にとって一番良いか。どうやったら、分かってくれるかなぁ？って一生懸命になってくれてっ。

めちゃくちゃ感謝だったり、癒されたり、・・・色んな感情の渦でもう感激だったり、感動だったり♪

Tweet / Twitter

今思っても、ジーンっとしてしまいます。

以前も似た事があったんです。ホントに感謝ですぅ♪

エローラさん、あめたまさん、かみじょーさん、杉成就さん、おくたにさん、sachikoさん♪困ってる時メッセージくれたり、エラー直してくれるお手伝いして頂きまして、ありがとうございました！前編

ここで、おくたにさん：okutani@vdeepさん♪の言ってたコード振り返ってメモしときますっ♪

background-color: transparent !important;　って？

a {
  background-color: transparent !important;
}

※　transparent：トランスペアレント：の意味ってなんだろぉ？？

透明な，透き通る《★【類語】 transparent は反対側のものがはっきり見えるほど透き通っている; translucent は光は通るが反対側のものが見えるほど透明ではない》.

引用元：transparentの意味 – 英和辞典 Weblio辞書

なるほどぉ！

aタグのバックの色を透明にしてねっ。!important→これを最優先させるんだよぉ♪って意味だったんですねぇ。。

これで、消えたんですけど、3箇所の記載場所がどこなのが？WordPressの外観→テーマの編集→親テーマ、子テーマのCSS関連と思われる所を探したんですけど、見つからなくってぇ。。

ちなみに・・。

aタグって？

「ビバ★りずむ」について

これはリンクになってるんです。その左側も同じ
これらのナビゲーションは、1つ1つがリンクになってるんです。

そのリンクのコード♪

始めの　a　これがaタグって覚えてもらったら分かりやすいです。

a {
  background-color: transparent !important;
}

すぐにこれが出るなんて凄いよぉ♪おくやぁん(・∀・)

私の悩みどころ

ナビゲーションの上にマウスを置いてもStingerの時は、丸いままで、マウスをのっけたらナビの丸の色が紫からピンクに変わるようにして、またリンクの色がふわぁっと紫に変わって。マウスを離すとふわぁって戻るって風にしてたんで、可愛かったんです♪

文字がはみ出ちゃってるのは、ご愛嬌ですけどねぇ♪

Simplicityに、

リンクに乗っけたら、背景に色が浮き出るって記載がどこかにあるはず。。っと教えてくれたのが♪daiさん!!

#navi ul li a:hover{
 background-color:#ddd;
}

ただ、その記載が見当たらなくってぇ。。困り果てて、また気になってしまったんです。。

※私。気になると気が済むまで、調べたくなってしまう･･って、癖があるんですよねぇｗ

daiのネタブログ「ダイブロ」で、かうたっく(@kautakku)のための「よくわかるcss講座」を公開！

ダイさんが時間使って、愛情たっぷりのブログを書いてくれたんです(*/ω＼*)♪

Tweet / Twitter

それに気づいて呼んだ時のテンションが、▼こちら▼♪

Tweet / Twitter

私が、探せなかったコードってのがこちら。

#navi ul li a:hover{
 background-color:#ddd;
}

これが、ダイブロでは、これ３つあるから、消そうよ♪って事なんです。

コードをサーバーFTP内ファイルで探してみた

私。子テーマ使ってるんですけど、最新子テーマは、私のブログでは画像が白抜きで全部反映してくれなくって、画像なしはキツイので、その前の子テーマ使ってるんです。

だから、ファイルがWordPressの外観→テーマの編集の子テーマファイルが見あたらなかったって、想像してるんです。。

なんで、サーバーFTP内のファイルをのぞいてごらん♪って言うdaiさんの言葉を見て、これやぁ！！ってピコーンってきたんです。

daiさんが、探してごらぁん！って言ったのは、これ。

画像は、ダイブロのかうたっく(@kautakku)のための「よくわかるcss講座」より~~パクッ・・~~お借りいたしますねっ。daiさんっ♪

次のページで、下記の記載場所を詳しく書いていきます。※色#dddは、違う色の場合ありますが、それ以外の#navi ul li a:hover{　こちらのコードを探して削除する事自体は、変わりません。

#navi ul li a:hover{
 background-color:#ddd;
}

2ページ目は、ナビのリンクをマウスオーバー（ホバー）したときの背景の色を消す箇所を書いています。

グローバルナビのリンクにマウスを置いた時、カスタマイズした通り反映しない時の対処法

グローバルナビは、元々マウスオーバーした時に、目立つように背景色を付けてくれてる設定をしてくれてるのが、Simplicityです♪

でも、カスタマイズ方法によっては、マウスオーバーした時にリンクの背景色を出したくないって事もあります。

リンクをマウスオーバーした時、リンクの背景について、解説しているページは下記のリンク。分かりやすいのでお勧めします♪

かうたっく(@kautakku)のための「よくわかるcss講座」

※この記事は、かうたっくさん(@kautakku)さんへのcss説明用の記事ですので、ほかの方が見てもあんまりおもしろくないかもしれません。やあこんにちは、daiです。昨日かうたっくこと「かうちゃん」が悩んでいたcs ...

対処法は、2種類あります。

1つ目の方法：CSSでコピペ一発 !important を使う方法

「!important」については、1ページ目に記載してます。

リンク：

下記コードを子テーマのスタイルシート (style.css)にコピペするだけで、一発で消えます。

a {
  background-color: transparent !important;
}

他の方法をお探しの場合は、下記からになります。

２つ目方法：テーマから、ナビリンクをホバーした箇所すべてを消す方法

Simplicityは、ありがたい事に誰もが簡単扱えるように、初めからカスタマイズしてくれています。更に、日々改良されてアップデートされているのをよく見ます♪

なので、Simplicityを改造するなら子テーマでカスタマイズするのが一番簡単になってくるので、この方法は推奨できません。

他のテーマに変えた時、参考になる
私がさっぱり分かってないのでお手伝いしてくれたdaiさんに感謝の意味
このページで残しておきたい

この理由で、アップしています。削除箇所は、下記に記しています♪

該当箇所を探す前に、探し方をご紹介します。

WordPressやサーバーのFTP内ファイルに書いてる記載内容を簡単に探す方法！

PFPファイル内には、数百行を超える記載があります。そんな中から、該当の記載内容をしらみ潰しで探すのは大変です。

目がチカチカしちゃいますし、膨大な情報なのであまりおすすめできません。でも、探したいキーワードを入力すれば一発で、探してくれるんです。

例えば、HTMLのidに対して、CSSでは♯の記載がありますっ。
例）　#navi ul li a:hover{

#navi ul li　の記載を探したい場合

キーボードの【 Ctrlボタン】＋【 Fボタン】をクリックすると、検索画面が出てきます。

そこに探したい　#navi ul li　を入力しヒットした件数が出てきます。該当のファイルを開いて、【 Ctrlボタン】＋【 Fボタン】で調べると時短になりますので、おすすめします。

1箇所目：responsive-pc.cssの該当コード内

これは、子テーマ内には元々入ってないファイルでした。なので、FTPでのぞいて見てください。下記記載があります。

#navi ul li a:hover{
 background-color:#ddd;
}

これは、すんなり見つけられます。

※WordPress画面では、見つけられなかった、「responsive-pc.css」サーバーのFTPファイルで発見！

※WordPress画面では、responsive.cssのファイルあったんですけど、「responsive-pc.css」自体も無かったんです。

2箇所目：Simplicity1.8.1: スタイルシート (style.css)

親テーマのスタイルシートの中、メニューの項目に、例の記載を発見して削除♪

これは、WordPress内の分かりやすい場所にあったから、問題なく発見出来ましたよぉ♪

もう順調に消す事ができましたよっ。2個目クリア～♪

３、４箇所目：simplicity/skinssakura/style.css

三箇所目は、下記です。

.navigation a:hover{
 background-color:#FCF1F5;
}

上記、記載部分を削除。3個目クリア～♪

これでどうかなぁ？って見たら・・・。

あらっ、残念(*/ω＼*)
翌日、全力でdaiさんが手伝ってくれたんです♪

Tweet / Twitter

Tweet / Twitter

daiさんが、教えてくれた通り

#navi ul li a:hover,
.pager a:hover,
.pager .current,
.page-link span, .comment-page-link span, .comment-page-link a,
.page-link a span:hover,
.comment-page-link a:hover{
  background-color:#F9CFD7;
}

#navi ul li a:hover,

の記載があって、下に　「　background-color:#F9CFD7;　」がありますので、ナビリンクのホバー、背景の色って書いてるって事になります。

【 background-color:#F9CFD7; 】

だけを削除。４箇所目、クリア～！

でも、まだ反映しません。。って事は、まだ、その記載が残っているって事です♪

5箇所目：css-custom.php内より、削除する

Tweet / Twitter

これは、phpファイルなので、間違ったところまで削除すると、直ぐに画面が真っ白になりますので、超慎重にしないとイケないんですよっ。

※そうならない為に、慎重にしないといけないですし、簡単なバックアップは取っておいたほうが良いですよっ♪

<?php //ナビゲーションリンクホバー色
if ( $navi_link_hover_color != NAVI_LINK_HOVER_COLOR ): ?>
#navi ul li a:hover {
  background-color:<?php echo $navi_link_hover_color; ?>;
}
<?php endif; ?>

こちらを、削除したら・・。