2016/10/28

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

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

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

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

内部リンクと外部リンクを見分けるアイキャッチ:緑の草木の背景で花を一輪持つ妊婦

スポンサーリンク

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

内部リンクにマークを付けたカスタマイズ例:可愛い小さな★マーク

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

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

追記人用のサイトマップ:プラグイン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を指定してます。

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)と入れてください^^

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Gush4のセレクタの指定は!?

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

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はざっくり下記のとおり。

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

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

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー