内部リンクを見分けるマークを付けたい！記号・アイコンフォント・画像を表示するカスタマイズ、CSSのコード

ブログ内コンテンツに内部リンクと外部リンクを置きますよね。リンクに付けるアンカーテキストではどっちのリンクか解りにくく、見分けが欲しいので、CSSでカスタマイズしてみました。

自分のページへの内部リンク前にマークや・アイコンフォント・画像を置くと、ユーザーさんへの説明がある内部リンクか、該当の外部リンクなのか解りやすいです。

CSSを使って内部リンク前にマークを置く基本のコードはSimplicity2やTwentyシリーズのセレクタを使ってカスタマイズしました。StingerシリーズとGushのテーマでも検証済みですので、セレクタを変えて使ってください＾＾

内部リンク前にマークを置くCSSの基本コード

基本のコードを紹介します。.entry-contentと指定してるのは、コンテンツを出力してる部分のみを囲む親要素です。WordPressの無料テーマ、Simplicity2のセレクタ.entry-contentと同じものになります。

Simplicity2やTwentyシリーズの人は、このセレクタのままでどうぞ。

.entry-content a[href^="★ここにアドレス★"] {
	position: relative; /*位置の基準*/
	margin-left: 1em; /*マークの分、左へ1文字移動*/
}
.entry-content a[href^="★ここにアドレス★"]:before {
	content: "★"; /*好きな文字・アイコンフォントなど*/
	font-size: 50%;
	-moz-transform: rotate(-15deg); /*ココから角度：ブラウザ毎に指定*/
	-webkit-transform: rotate(-15deg);
	-o-transform: rotate(-15deg);
	-ms-transform: rotate(-15deg);
	transform: rotate(-15deg); /*ここまで左に15度角度をつける*/
	color: #e4bbfd; /*文字の色：薄紫*/
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.62); /*文字の影*/
	position: absolute; /*基準からの位置移動*/
	left: -1.1em; /*基準の左端からへ-1.1文字 ※好みで*/
	top: -5px; /*fontの高さあわせ*/
}
/*目次と画像にマークはつけない：追記：サイトマップにも追記完了*/
#toc_container a:before, 
.entry-content a[href^="★ここにアドレス★wp-content/"]:before,
#sitemap_list a[href^="★ここにアドレス★"]:before {
	content: normal;
}
/*キャプション付いた時対策:左マージン元通りに*/
.entry-content a[href^="★ここにアドレス★wp-content/"] {
	margin-left: auto;
}

追記：人用のサイトマップ：プラグインPS Auto Sitemap設置用に#sitemap_list a[href^="★ここにアドレス★"]:beforeと、その上の行最後に,を追記、２か所しました。2016/10/28

反映しないときは、使っているブラウザのキャッシュを削除したら反映します＾＾

アイコンフォントFont Awesomeを表示させたい場合

アイコンフォントは記号だけではなく、種類が豊富なので好きなアイコンをアイコンフォント｜Font Awesomeから選んで表示させることもできますよね。

例えば指マークを選んでみました。

Font Awesomeページで指fa-hando-o-upを選択

カスタマイズ例としてあげると、aタグの前の装飾はこんな感じ。2-3行目がFont Awesomeを指定してます。

.entry-content a[href^="★ここにアドレス★"] {
	position: relative; /*位置の基準*/
	margin-left: 1em; /*マークの分、左へ1文字移動*/
}
.entry-content a[href^="★ここにアドレス★"]:before {
	content: "\f0a6"; /*指マーク*/
	font-family: FontAwesome;
	font-size: 80%;
	-moz-transform: rotate(45deg); /*ココから角度：ブラウザ毎に指定*/
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg); /*ここまで右に45度角度をつける*/
	color: #666; /*灰色*/
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.62); /*文字の影*/
	position: absolute;
	left: -1.1em;
	line-height: 2.5;
}
/*目次と画像・サイトマップにマークはつけない*/
#toc_container a:before, 
.entry-content a[href^="★ここにアドレス★wp-content/"]:before,
#sitemap_list a[href^="★ここにアドレス★"]:before {
	content: normal;
}
/*キャプション付いた時対策:左マージン元通りに*/
.entry-content a[href^="★ここにアドレス★wp-content/"] {
	margin-left: auto;
}

aタグ前にアイコンフォントを入れ装飾した例

マークを画像にしたいとき

マークに画像を使うこともできます。使いたい画像を16pxや14pxなどフォントのサイズ1文字分に合わせ、編集してください。

WordPressではメディアに画像を入れて、画像を1文字の大きさ例えば16pxに編集もできる。

メディアに画像を追加できたら、画像のURLをコピーします。

content: url(★ココは画像のURL★);は画像のURLをこのように（http://hoge.com/…/hoge.png）と入れてください＾＾

.entry-content a[href^="★ここにアドレス★"] {
	position: relative; /*位置の基準*/
	margin-left: 1em; /*マークの分、左へ1文字移動*/
}
/*コンテンツ部分オンリー：リンク前画像*/
.entry-content a[href^="★ここにアドレス★"]:before {
	content: "★"; /*画像が表示されないとき用マークここから*/
	font-size: 50%;
	color: #e4bbfd;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.62); /*ここまで*/
	position: absolute;
	left: -1.1em;
	line-height: 2em;
	content: url(★ココは画像のURL★);
	left: -1.7em; /*リンク・画像：左端からの位置移動*/
	top: 0.01em; /*画像の位置を上下変える*/
}
/*目次と画像・サイトマップにマークはつけない*/
#toc_container a:before, 
.entry-content a[href^="★ここにアドレス★wp-content/"]:before,
#sitemap_list a[href^="★ここにアドレス★"]:before {
	content: normal;
}
/*キャプション付いた時対策:左マージン元通りに*/
.entry-content a[href^="★ここにアドレス★wp-content/"] {
	margin-left: auto;
}

内部リンク前に16pxの画像を置いた表示例

content: "★";の下に同じ属性のcontent: url(画像のURL);を入れることで、上に書いた”★”を”画像”が上書きして表示します。

もし画像が表示されないとき、上に書いた”★”が表示するので、空白にならないです。

画像が表示されなかった時のFont

ちなみに画像のtop: 0.01px;は、段落の領域のtopに合わせられてます。

topは段落の領域に合わせられている状態

画像とリンクのバランスをみて上から数pxと指定して高さを合わせてくださいね。

親要素をセレクタで指定したら、本文以外の場所まで反映！その時の対処法

マークを付けたくない場所：例えば今どこのページに居るかを示すパンくずリストや記事下のタグやカテゴリ。

著者名や関連記事の内部リンク前、クラス名が違う画像、前後の記事へのリンクなどにもマークが付きます。

• 装飾範囲を指定するセレクタの範囲が広く、これらとコンテンツを全て指定しているからです。

コンテンツの内部リンクのみカスタマイズ方法は2つ！

1. 1つ目はコンテンツ以外を指定して元に戻す方法。下記のとおり
2. コンテンツのみをdivで囲むラクな方法。後述

本文以外の内部リンクにマークと指定した余白が表示さたものを、元に戻す（マークを消して余白を戻す）作業をすれば、コンテンツ内のみにマークが付きます。下記コードに、不要な箇所のセレクタを指定すれば元に戻せます。

.不要マークの親要素を指定 a:before,/*記事以外のマークを消す*/
～　中略　～,
.不要マークの親要素を指定 a:before { 
	content: normal;
}
.消したい余白の要素を指定,
～　中略　～,
.消したい余白の要素を指定 {
	margin-left: auto; /*左の余白を元に初期値に戻すなどの作業と確認*/
}

親要素の指定方法は、下記リンクが解りやすいです。また今後のカスタマイズの役に立つので、良ければどうぞ＾＾

コンテンツの上下のパンくずリストや、タグなどにマークが出て消すのが面倒なときは、2つ目をオススメします。

テーマによって構造が違うので、上述のセレクタを指定しても上手く反映されません。Stingerシリーズはdivで囲むと楽に完了できますよ。

Stingerシリーズや他のテーマ用・コンテンツをdivで囲む

テーマのsingle.phpのコンテンツを読み込むコードをdivで囲む方法が一番簡単！、コンテンツを出力箇所をdivで囲んで完成！

<div class="entry-content">
<?php the_content(); ?> <!--これがコンテンツを出力してる-->
</div>

これで、基本のCSSをコピペしてアドレスなどを自分のモノにすれば、反映されます。変わらない場合は、キャッシュを削除すればOK！

既にコンテンツが親要素で囲まれている場合、<div class="hoge">このクラス.hogeと親要素に指定します。.entry-content部分を→.hogeに変更すれば完璧です＾＾

Gush4のセレクタの指定は！？

Gush4の場合は、基本のコードの.entry-contentの部分を、.article-inner sectionと変更すればOK！

<div class="article-inner">
  <section>
  書いた文のみ表示する場所
  </section>
</div>

Gush4子テーマの場合は、.theContentWrap-cccがコンテンツのみを指定するセレクタです。.entry-contentのトコロだけを、.theContentWrap-cccに変更すればOK！

ページ分割してる場合は、もしかしたらその部分が表示されるかもしれません…。してなければ、このままでOKです。

さいごに、内部・外部・画像リンクの指定：プチ説明

内部リンク前にマークを指定したセレクタa[href^="アドレス★"]、aタグはリンクを表すので、外部リンクと内部リンクに分けるために自分のアドレスhttp://hoge.com/から始まるhref属性を指定し使いました。

a[href^="http://hoge.com/wp-content/"]:beforeは、画像前には表示しないように、content: normal;やcontent: none;やcontent: "";を入れ表示させません。

画像はhttp://hoge.com/wp-content/…というアドレスに必ずなるから、『a』の属性『href』の『http://hoge.com/wp-content/』から始まる要素の『:前』と指定し、装飾を戻したワケです。HTMLはざっくり下記のとおり。

<a href="http://hoge.com/wp-content/…/画像のURL.png/">

プチ説明ですが、属性セレクタと疑似要素を使いました。検索したいとき名前が分からないと困ったことがあるので、検索のヒントになればと＾＾

下記の本はセレクタやHTMLタグを探しやすく、解りやすいのでオススメです！かうたっくでした。

できるポケット HTML5&CSS3/2.1全事典 できるポケットシリーズ

posted with カエレバ

小川 裕子,加藤 善規,できるシリーズ編集部 インプレス 2015-03-06

Amazonで探す

楽天市場で探す