Twenty Seventeen、”外部リンク”と内部リンクのアイコンの自動化

Twenty Seventeenで、”外部リンク”と内部リンクにそれぞれ自動的にアイコンがつくようにCSSを書き換えました。アイコンは「Font Awesome」を使っていますので、これを使いたい人は関連記事「Twenty Seventeen、Font Awesome をセットアップ」をご参照くださいませ。

↑の分の、黄土色が外部リンク、紫色が内部リンクのサンプルです。

“外部リンク”のアイコンを自動化

まずは、投稿ページと固定ページの本文(サイドバーなどを除く)すべてのリンクに”外部リンク”アイコンが自動で刺さるようにCSSを設定します。

div.entry-content a[href^="http"]:after {
	font-family: FontAwesome;
	content: "\f08e";
	color: #ffbf7f;
	vertical-align: super;
	font-size: 0.6em;
}

サイドバー、ヘッダー、フッターなどのリンクに無駄にアイコンがつかないようにdiv.entry-contentを指定しています。

“http”で始まるhrefの後に、外部リンクを追加します。

リンクのシンボルは、FontAwesomeのアイコンに適当な色を付け、大きさ0.6em、上付きを指定しています。

内部リンクのアイコンも追加

このうち、内部リンクは、別のシンボルを自動で加えるCSSを書き加えました。

div.entry-content a[href*="noronoron.com/"]:after {
	font-family: FontAwesome;
	content: "\f0c1";
	color: #bf7fff;
	vertical-align: super;
	font-size: 0.6em;
}

noronoron.comの部分はご自分のサイトURLを使ってくださいませ。

フォントをに変えて、別の色を指定したぐらいで、後は外部リンクと同じ設定です。

画像についちゃうアイコンをつけない

このままでは画像を貼った時にアイコンがついてしまうので、つかないようにします。

div.entry-content a[href$=".png"]:after {   
	content: "";
}

hrefが”.png”で終わる場合には、何も入れないことにしました。jpgなども、適当に追加してください。

TwitterやFacebookのシェアボタンにアイコンがつかないようにする

ここからは、お好みで。

div.entry-content a[class^="share"]:after {   
	content: "";
}

私は、シェアボタンを有効にしているので、”share”で始まるclassを持つリンクにも、何もつかないようにしました。

List Category Postのリストにアイコンがつかないようにする

ホーム(固定ページ)で使っているプラグイン「List Category Post」で生成したリストにもアイコンがつかないようにしました。

.lcp_catlist li a[href*="http"]:after {
	content: "";
}

.lcp_catlistというクラスの中で、liタグの子要素リンクには、アイコンをつけない設定です。

特定記事の特定条件を満たしたリンクにアイコンがつかないようにする

#post-834 ol li a:after {
	content: "";
}

うーん。完全に面白がっています。ホームの固定ページは、idが#post-834でした。このページの中の、ol(序列リスト)要素の中のリンクにはアイコンがつかないように設定しました。

いろいろなパターンが使えて面白い~。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください