スタイルシート(CSS)を弄っていました。

こんなことをしたかったんです。

  • 外部リンクのときは、リンクの右隣に Font Awesome の別タブで開くアイコンを付ける
  • 外部リンクがAmazonアソシエイトリンクのときは、そのアイコンを付けない

テキストリンクだったら、ちょうど右隣にアイコンが来るんですけど、Amazonアソシエイトの場合は、画像にリンクがされていて、その隣ではなくて、改行されたところにアイコンが来るんです。

改行されて、左下にアイコンが出る。

超、ダサい。

整理をすると、下記の条件を満たすときにアイコンを表示します。

  • aタグである
  • 別タブで開く target=”_blank” が入っている
  • 但し、アソシエイトのリンクではない(アソシエイトコードをキーとする) ← not

スタイルシートの中で、not を使ってここまでは出来ていました。

今回は、さらにひとつ条件を追加して、下記のようにしたい。

これがなかなか苦労しました。

  • aタグである
  • 別タブで開く target=”_blank” が入っている
  • 但し、アソシエイトのリンクではない(アソシエイトコードをキーとする) ← not
  • 画像からリンクされているものは除く ← not

4行目が追加されたものです。

最初は、aタグの後に来る imgタグをトリガーにしようかなと思ったんですが、

not で指定できるのって、同じタグ内だけですよね?

(よく知らんけど)

aタグから、imgタグにまたがる not ってできないですよね?

(よく知らんけど)

なんか、いくらやっても、もう、分からなかったので、最終的には、人の手を毎回入れることにしました。

aタグに noicon っていう class が付いていたら、アイコンを付けないとしました。

画像にリンクを付けるって、ほとんど無いし。

開き直る。

完成イメージはこんな感じ。

See the Pen css not sample by k-kaz-git (@k-kaz) on CodePen.

まぁ、これで出来たんですけど、人の手を入れずに、もっとすっきり出来るんじゃないかなと、

悶々としています。

で、今回一番ハマったのが、FTPクライアントソフトです。

Linux で使っている FileZilla は、編集なんかをしてファイルが更新されると、「更新されたのでアップしますか?」と聞いてきてくれる親切なソフトです。

あぁ、すいません、お願いしますと、「はい」を押せば、サーバー側のファイルが更新されるという便利なもの。

この便利な機能を使いながら、スタイルシートの修正をして、アップ。

ブラウザで確認するも、思ったように反映されず、キャッシュを消してみたりしながら、再挑戦。

それでもダメなので、書き方が悪いのかと、ネットで検索して、またスタイルシートの修正をして、アップ。(でも、うまくいかず)

これを延々と1時間ほど繰り返しておりました。

全然反映されないスタイルにイラつき、ちょっと涙目になっているところで気付きました。

コイツ(FileZilla)、ルートにアップしていやがる。

子テーマの中にあるスタイルシートを弄っていたので、同じくサーバー側でも小テーマの中に入れないと意味がありません。ところが、コイツ(FileZilla)は、関係のないルートに毎回アップしてくれていたので、修正内容が反映されなかったんですね。もう、初歩の初歩の話ですよ。

それなのに、なんで反映されないんだろうと、何度も打ちのめされていた私って・・・。

もう、疲れたよ・・・。

今考えると、途中で閃いた条件指定で、もしかしたらスッキリした形で出来ていたのかもしれない。

でも、もう忘れた。

また試す気力も無い。

便利な機能ですが、みなさんもお気を付けください。
(たぶん、私が使い方を理解していないせい)

こちらの記事もどうぞ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です