記事内の外部リンクを別窓で開き、画像などをつけて(CSS装飾して)わかりやすくする【jQuery】

カテゴリー:WordPress    |    タグ:

記事内の外部リンクを別窓で開き、画像などをつけて(CSS装飾して)わかりやすくする【jQuery】

外部リンク(他のサイト)は別窓(新しいタブで表示)。
そして、外部リンクですよ!というのをアイコンをつけて少し主張してみるを実装します。

今回は、たくさん記事を書いてしまったけど途中で上記のようなことを実装したいなぁというときに使えるTipsです。

記事内の外部リンクを別窓で開き、画像をつける

Link

記事内に限定して(サイド部分は含めない)別窓にし、リンク画像(フォント)をつけられるようにクラスを追加していきます。
【jQuery】を使って実装していきます。

下記のコードをHeader内もしくは、</body>の直前に書きます。

解説

コメントにして書いておくのが少し難しかったのでこちらで解説を少し。
やっていることの大まかな項目は以下のとおりです。

  • 記事内のみ
  • 外部リンク(hhtpとhttps両方)は別窓に
  • CSSで装飾できるようにクラス(externalLink)をつける
  • 外部リンク画像にはクラス(externalLink)をつけない

CSSで装飾

あとはCSSで装飾して終わりです。
このブログでは、このように画像を使ってこのように仕上げました。

画像ではなくても色を変えてみたり文字の大きさを変えてみたりといろいろと変更してみてください。

別窓で開かずにクラスをつける

別窓はいらないなぁという方は、.attrを削除してください。
削除したものは下記になります。

Stingerをお使いのかた

記事のクラス名は.kiziも使えます。.postの部分を変更します。


以上で外部リンクにいろいろ付け足していくjQueryはおしまいです。
少しでもお役にたてれば幸いです。

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2014/03/27    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

3column-i

Stingerを3カラムにしてみたよ!「DeepJaggy-threeColumn」リリース!【Stingerカスタマイズ】

表題のとおりです!3カラム需要あるかなぁどうかなぁと思いましたが、作りましたので良かったら使ってくだ

記事を読む

side-no

Stinger3でスマホ用子テーマを使っている方はここにご注意だ!と思ったところ

最近スマホ用子テーマを作成したのですが、その方のブログを見たときはっ!っとなり、気になったので。

記事を読む

top_niji

ブログのデザインを変更しました!そのとき考えたこと思ったこと

実は元のデザインを最新のStingerのバージョンに対応しようと思っていたのですが、なんだか新しいの

記事を読む

wordpress-logo-1-550x350

記事の読了時間”およそ○○分”を表示してくれるプラグイン「estimated」

こういうプラグインあったんですね。探せばだいたい見つかるWordPressプラグイン素敵です! 読

記事を読む

jet

バージョンアップしたJetpackがマークダウン対応されたので使ってみた

待ちに待っていた! Jetpackバージョンアップ(バージョン 2.8)でMarkdownが新しく

記事を読む

コメントを残す

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2018年4月
    « 12月    
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    30  
電子書籍ストア BookLive!
PAGE TOP ↑