Simplicityの記事内のリンクに飾りを付ける (主にセレクタについて

さっき気がついたんですが、先日新しいSimplicityをバージョンに変えた時、外部リンクの貼ってある部分につけていたFontAwesomeアイコンが消えていました。自分でカスタマイズした部分ですけれども、今まで忘れてました。ついでなのでこれも説明しておきます。

リンクの設定をすると、自分のサイトにも、それ以外のサイトにアクセスする時にも同じようにリンクが貼られます。できたらそのリンクが自分のサイトであるか外部のサイトであるかを分けたい時に、リンクを貼るごとにアイコンを設定するのは大変な場合もあります。

そういう時は、

こんな感じのスクリプトを、子テーマあたりのjavascript.jsに書いて下さい。

noUseSelectorの部分は、リンクを付けたくないセレクタを書き出しています。例えば、上記の例で言うと、

#sns-groupのliの下のaは外部サイトへのリンクに何かしらを付けない、ブログカードのリンクにも付けない

と言う感じになります。また次の行の、$(“.article a[target=’_blank’]”)の部分は、本文記事の中でリンクがあってかつ、targetに_blank(別窓で開く)が指定されているものの中でと言う感じになります。本文記事の中ですから、SNSのボタンやブログカード(別窓で開く設定のもの)の場合はアイコンを付けないと言う感じです。

その後のappendは対象の後ろにappend以降のタグを挿入すると言う意味合いです。ここでは、FontAwesomeからフォントを選んでいます。ほらここにもアイコンがついてるでしょう?こういうのは別のウィンドウで開くようになっています。いやむしろ逆で、そうなっているのではなく、そうした設定に対してアイコンが付いているのです。

FontAwesomeのサイトを開くと、fa-xxxxxみたいな感じで色々と並んでます。ここから何かしらのフォントを選びます。
選んだらその名前の前にfaを入れて半角スペース。後は上記の通りでいけます。margin-left:2pxとあるのは、FontAwesomeの左側に2pxの隙間を作るということです。ここらはお好みで。
ちなみにHTMLエンティティ文字と言うのがありまして、

  あるいは   がスペースになります(実体化するので&は全角で入ってます)

もしこれをmarginの代わりに入れると、左側の文字が半角なら半角、全角なら全角のスペースになったように思います。気のせいかも知れませんけれども、全角のスペースが入るとちょっと広すぎると思うのでmarginで指定するのが良いだろうと思います。

外部リンクというよりは、別窓で開くリンクとも言えますが、基本自分は別のサイトにリンクを貼る時は別窓で開くようにいつもしているので上記の設定で良いわけです。ただ、やはり_blankが入ってなくても別のサイトだと何かしら付けたいという時があるじゃないですか。そんな時は以下のようにしてみて下さい。
jQueryだけではなく、CSSでもできるように書き変えてあります。


もし、別窓で開かず、自分のサイト以外のリンクには付けたいと言う場合は、CSSでやるバージョンで、かつ即席ですが、

これを参考に、いろいろやってみて下さい。これは色分け程度しかしてません。埋め込みのようにアドレスが調べられるなら:afterで何かしらを入れることもできます。なのでjQueryじゃなくてもCSSでも良いわけです。どちらでもお好みで。

で、どうするんだよo(`ω´*)oプンスカプンスカ!!と言う方には以下の感じで埋め込みのCSS参考にやって見て下さい。CSSだけでもいけますし、jQueryでもいけます。

自分のドメインの部分は他とかぶらないであろう部分を選ぶのが良いと思います。

ちなみにですが、:afterや:beforeと言う要素に対してはjQueryは直接操作ができません。それらがついてない部分(本体)に対してはできます。実体がない擬似要素なので。

ん?実体がない?・・・まぁ、そんなもんです。なので、その要素に対して何かしらしようとすると、javascriptあたりで確かゴニョゴニョすれば行けるようなことは聞いたことがありますが、なるべくなら実体のあるタグでやっておくと、後でjQueryでツールチップを出したり、何かしらのアクションを入れることもできますので、そのあたりは今後どうするかで決めて行って下さい。
まぁその時に変更すればよいだけの話なので、たいしたことではないんですけどね。

スポンサーリンク

シェアする

フォローする