2015/09/11

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

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

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

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

あの時のダイさん、一生懸命分かりやすくおしえてくれたdaiさん最高♪&感謝です。

 

スポンサーリンク

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

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

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

 

 

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

 

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

 

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

 

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

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

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

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

 

 

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

background-color: transparent !important; って?

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

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

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

 

なるほどぉ!

 

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

 

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

 

ちなみに・・。

aタグって?

 

ナビゲーションのリンクのバックの色

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

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

 

そのリンクのコード♪

<a href=”http://bibabosi-rizumu.com/about-bibabosi-rizumu/” target=”_blank”>

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

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

 

私の悩みどころ

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

Stingerの時、マウスオーバーしたらaタグの背景なし

 

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

 

Simplicityに、

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

ナビゲーションのリンクのバックの色

 

 

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

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

 

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

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

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

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

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

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

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

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

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

 

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

daiさんの教え

 

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

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

 

 

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

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

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

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

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

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

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

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

リンク:

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

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

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

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でのぞいて見てください。下記記載があります。

サーバーFTP

 

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

 

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

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

 

 

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

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

親テーマstyle.css

 

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

 

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

 

3、4箇所目:simplicity/skinssakura/style.css

三箇所目は、下記です。

スキン、さくらのスタイルシート

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

 

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

スキン、さくらのスタイルシート削除後も反映しない

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

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

スクリーンショット 2015-08-05 22.51.33

#navi ul li a:hover,

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

【 background-color:#F9CFD7; 】

だけを削除。4箇所目、クリア~!

 

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

 

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

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

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

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

スクリーンショット 2015-08-05 23.05.08

これで、背景のないナビリンクの完成っとなりましたっ!!

スクリーンショット 2015-08-07 08.40.47

可愛いナビのリンクの完成ですっ♪マウスオーバーした時に、ふわぁっとリンクが紫に変わる設定にしてます♪自己満足ですけどねっ♪

ナビのリンクに背景がある時コチラ▼・・。

ナビゲーションのリンクのバックの色

 

ダイさんにっ♪

むっちゃ時間かかって、調べてくれたんですよねぇ(人´∀`o)

ホントに、ありがとうございます!!!

 

キラキラ画像の、かうたっくが、めっちゃ気に入ってますぅ♪

 

サーバーのFTPファイルを直接見るって、発想が無かったんですけど、WordPress側にあって、サーバー側にファイルあるって事自体にビックリしてしまいました♪

 

すんなり、出来なくってごめんなさいぃ(๑ơ ₃ ơ)♥

あぁ~!!

 

1日目は、超消化不良・・・╭( ・ㅂ・)و ごめんナサイッ

2日目は、上記ツイッターの通りガッツリ時間かけて、一緒に解決してくれた事♪

 

ホンっト、ありがとうございました(*^▽^)ノ

 

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー