情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

【CSS3】アイコン画像を使わずにCSSのみで外部リンクアイコンを設置した方法メモ

CSS (6) CSS3 (1) HTML (15)

よく、外部リンクの末尾に、小さいアイコン画像を配置することがあります。これは、aタグにpadding-rightを追加し、backgroundにアイコン画像を指定して右に配置すれば比較的簡単に実現できます。しかし、最近は画像を極力使わずにサイトを構築していたので、これも画像を使わずにCSSアイコンで実現しようと挑戦しました(PHP・JavaScriptでのタグ追加もしない)。その過程をメモしておきます。

CSS3アイコン(擬似要素before, after)を作るも配置に失敗

最近はアイコンをCSS3で作り、画像を極力使わないようにしていたので、今回もbackground+urlを使わないで、作ってみることにしました。

pタグの中のaタグに対して、before・after擬似要素を使い、position:absolute + right/bottom を使って配置してみるました

#contentleft .entry-body p a:link {
	background-color: rgba(229,107,33,0.1);

	position:relative;

	padding-right: 15px;
	}

#contentleft .entry-body p a:link:before {
	content: '';
	display:block;
	position:absolute;

	height:6px;
	width:10px;
	bottom:7px;
	right:0px;
	background:#E56B21;
	}

#contentleft .entry-body p a:link:after {
	content: '';
	display:block;
	position:absolute;

	height:5px;
	width:9px;
	bottom:5px;
	right:2px;
	border-left:1px #E56B21 solid;
	border-bottom:1px #E56B21 solid;
	}

しかし、aタグ(リンク)の文章が長くて改行されている場合は、rightとbottomの基準位置がよくわからないことになり、意図しない位置に配置されてしまいました

css-external-link-icon-1

↑画像では、下のリンクで、アイコンが変なところに表示されている。

afterだけで頑張る

問題は、before要素をright、bottomで上手くaタグの末尾に配置できなかったことなので、beforeを使わず、afterだけでどうにかすることにしました。

とりあえず、afterをinline要素にして四角は簡単に作れます。今回のアイコンは形状があまりに簡単なので、左下の部分をbox-shadow(CSS3)で書き、境目部分をborder-left・border-bottomで作ることにしました

ただ、実際にやってみると配置が難しく、box-shadowで作られる影のサイズはborderも含んでしまうようだったので、隠すのに使ったborder-leftとborder-bottomの分まで、左下の箱が大きくなってしまい、変になります。そこで、box-shadowの4番目の引数に負を指定して、少し小さいサイズにしました

#contentleft .entry-body p a:link {
	background-color: rgba(229,107,33,0.1);

	position:relative;

	padding-right: 5px;
	}

#contentleft .entry-body p a:link:after {
	content: '';
	display: inline-block;
	height: 6px;
	width: 10px;

	margin-bottom: 2px;
	margin-left: 3px;
	border-top: 0px #E56B21 solid;
	border-right: 0px #E56B21 solid;
	border-bottom: 1px #FDF0E9 solid;
	border-left: 1px #FDF0E9 solid;
	background-color: #E56B21;
	box-shadow: -2px 2px 0 -1px #E56B21;
	}

その結果、まぁまぁいい感じになりました(※背景がrgbaで透過してしまっていて、直接指定すると変なことになるので、rgba(229,107,33,0.1)を白背景での不透明化した色#FDF0E9に変更しています)

css-external-link-icon-2

↑下のリンクも、正しい位置に配置されている。

外部リンクにだけ適用する

ここまでだと、外部リンクかどうか関係なく適用されてしまうので、内部リンクを無視するように記述を付け足しました(コンパクト重視)

#contentleft .entry-body p a[href*="//did2memo.net/"]:link {
	padding-right: 0px;
	}
#contentleft .entry-body p a[href*="//did2memo.net/"]:link:after {
	content:none;
	}

URLは(いや、他色々も)、適宜読み替えてください。

コメント(0)

新しいコメントを投稿