WordPressテーマ変更!SimplicityからCocoonへ

内部リンクを見分けるマークを付けたい!記号・アイコンフォント・画像を表示するカスタマイズ、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と、その上の行最後に,を追記、2か所しました。2016/10/28

  • 1.5.21.25行目の『★ここにアドレス★』の部分は、自分のURL『http://hoge.com/』に変更
  • content: "★";の『★』は好きな文字やに変更
  • フォントの色やサイズ・数値は、お好みで^^

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

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

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

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

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

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タグ前にアイコンフォントを入れ装飾した例

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

アイコンフォントの導入・最新アイコンを表示できないときのバージョンアップ方法など書いてます。

LINKFont Awesomeアイコンフォントの導入・CSSで表示・最新アイコンが表示しない原因と解決方法

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

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

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

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

解らない場合。下記リンクの目次1.1.1『画像を編集は、アップした画像の縮尺や加工ができる』を参考に、また『画像のURLをコピーする』のも、このページを参照してくださいね。

LINKWordPress初心者に画像追加時のメディアを説明!画像サイズ変更・画像の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の画像を置いた表示例

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

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

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

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

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

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

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

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

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

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

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

パンくずリストとカテゴリ・タグまでマークが付く

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

記事の著者名や関連記事などの内部リンクにもマークが付いてしまう

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

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

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

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

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

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

ブログ画面上でコレを消したい!って場合は、目次2.2.2『ブログ画面上で装飾したい場所の親要素を見る方法もオススメ!』が分かりやすいですよ。

LINK親要素の指定方法!ブログ初心者にCSSのセレクタ簡単な付け方を説明

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

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

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

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

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

難しい場合、3分もあれば完了できる下記ページを参考にどうぞ^^

LINKWordPressでコンテンツ部分だけの親要素を作る!カスタマイズするとき本文以外、装飾を反映させない方法

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

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

コードのセクレタは、テーマのモノにかえ、URLは自分のURLに変更する

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タグを探しやすく、解りやすいのでオススメです!かうたっくでした。

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る