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

リンク前、ボタンバッジ!行頭を揃えた、おしゃれなカスタマイズ

スポンサーリンク

リンクaタグ前にリンク元の内容を表す『参考』・『Link』・『引用元』などボタンのようなバッジで、行の頭を揃えスッキリしたスタイル。HTMLとCSSをコピペで活用できるコードを紹介します。

リンクaタグのアンカーテキストが長いとき、スマホ・PCビューともに、テキストをリンク前バッジの下に回り込ませたくない人におすすめのカスタマイズです^^

以下画像のように、好みにあわせてカラーバリエーションを増やしたので、HTML・CSSはコピペで使ってください❦

リンク前ボタンバッジのカスタマイズ

スポンサーリンク
スポンサーリンク

ボタンバッジ下にリンクが回り込まないHTML(LINK・参考・引用元)

link下に回り込まないようにしたい人にコピペで使えるHTMLタグは下記の通り。

  • LINKのHTML・表示例
<div class="clearfix"><span class="b-b-link">LINK</span><a href="http://ここにURL/hoge">リンク先のテキスト・リンク先のテキスト・リンク先のテキスト・リンク先のテキスト</a></div>

<div class="clearfix"></div>で囲っているのは、spanに変更して改行しないと、左上が回りこみ表示がおかしくなり、なくなく使用をやめるなどなって欲しくないからです。※段落さえつけてリンクを置くと、なくても問題ありません。


  • 参考のHTML・表示例
<div class="clearfix"><span class="b-b-sanko">参考</span><a href="http://ここにURL/hoge">リンク先のテキスト・リンク先のテキスト・リンク先のテキスト・リンク先のテキスト</a></div>

  • 引用元のHTML・表示例
<div class="clearfix"><span class="b-b-quot">引用元</span><a href="http://ここにURL/hoge">リンク先のテキスト・リンク先のテキスト・リンク先のテキスト・リンク先のテキスト</a></div>

画像を借りる時は、画像制作者さんが作成したものを勝手に借りてしまうとトラブルになる可能性があるかも知れません。それを回避するには、使われた人が気持ち良く感じる使い方も大事ですね。

リンク先とリンク先タイトル:テキストを編集する方法

  • HTMLは:テキスト(HTMLが表示される)画面で変更
  • <a href=””>の””内にアドレスを入れ
  • 続けてリンク先テキストを入れる
<div class="clearfix"><span class="b-b-link">LINK</span><a href="https://bibabosi-rizumu.com/additional-media/">WordPress初心者に画像追加時のメディアを説明!画像サイズ変更・画像のURLの場所・キャプション・代替テキストは超大事</a></div>

下記のような感じで表示。

WordPressでHTMLを編集する場合

  • テキスト画面でする場合

以下のピンクの文字の、URLとタイトル(アンカーテキスト)を変更するだけでOK!

<div class="clearfix"><span class="link-badge">LINK</span><a href="http://ここにURL/hoge">リンク先のテキスト・リンク先のテキスト・リンク先のテキスト・リンク先のテキスト</a></div>
  • ビジュアル画面でする場合

反映されたリンクから編集する

リンクをクリックしたら、上記のようにリンクの挿入/編集画面が出るので、リンクのURL・リンクの文字列を入力してリンクを新しいタブで開くかどうか決めればOK!

WordPressでのリンクの編集

LINKビバ★りずむ

プラグイン:アドクイックタグに定型文として、開始タグにコードを登録しておくと便利ですよ^^

CSSコピペOK!バッジ下に文字列が回り込まないスタイル

上記HTMLのスタイル・CSSです。コピペでstyle.css(サイト用)やeditor-style.css(WordPressエディタ用)に貼ってください。

/*ボタン:バッジの基本装飾*/
.b-b-link,
.b-b-sanko,
.b-b-quot {
	display: table-cell;
	float: left;
	line-height: 1.6;
	padding: 0.5em 0.5em 0.3em;
	border-radius: 0.2em;
	margin-right: 0.3em;
	font-size: 0.8em;
}
/*LINKの装飾*/
.b-b-link {
	color: #53a4ab;
	background-color: #d5fbfe;
	border: 1px solid #78dbe3;
}
/*参考の装飾*/
.b-b-sanko {
	color: #ff84c6;
	background-color: #ffe3f2;
	border: 1px solid #f2b3d5;
}
/*引用元の装飾*/
.b-b-quot {
	color: #7550ff;
	background-color: #e8e2fe;
	border: 1px solid #c3b2ff;
}
/*ボタン:バッジに隣接するリンクの装飾*/
#main span[class^="b-b"] + a {
	text-decoration: none; /*テキスト下:線なしに*/
	color: #0029ff;
	transition: 1s; /*ふわ~っと色変更*/
	display: inline; /*縦方向の位置変更用style*/
	line-height: 1.5; /*行間*/
	vertical-align: -3px; /*ボタンバッジに合わせリンク上下の位置調整*/
	word-wrap: break-word;
}
/*ボタン:バッジに隣接するリンク・onマウス時の装飾*/
#main span[class^="b-b"] + a:hover {
	color: #e196ff;
}
/*floatの解除*/
.clearfix {
	display: block;
}

/*追記:スマホビュー*/
@media screen and (max-width: 500px) {
	#main span[class^="b-b"] + a {
		display: table-cell; /*回り込み防止*/
	}
}

13行目~30行目までの装飾は下記の通り。

LINK参考引用元
  • 50行目以降display: table-cell;入れない場合

display: inline;のときの装飾

このように回り込みます。

50行目display: table-cell;に変更

スマホビューでも回り込みません^^

  • 好みの色に変更したい場合
.b-b-link {
	color: #53a4ab;
	background-color: #d5fbfe;
	border: 1px solid #78dbe3;
}

2行目~4行目を、後述のスタイルに変更してください。

リンク前ボタンバッジの色、変更例

LINKグリーン系
color: #13bf00;
	background-color: #d9fed5;
	border: 1px solid #6fde63;
LINKグリーンブルー系
color: #5ebbc3;
	background-color: #d5fbfe;
	border: 1px solid #78dbe3;
LINKイエロー系
color: #64672d;
	background-color: #fcffba;
	border: 1px solid #d0d476;
LINKオレンジ系
color: #eca700;
	background-color: #fef2d5;
	border: 1px solid #ffd672;
LINKレッド系
color: #ec0000;
	background-color: #fed5d5;
	border: 1px solid #ff7272;
LINKグレー系
color: #000000;
	background-color: #b7b7b7;
	border: 1px solid #787777;

さいごに

ボタンバッジの下にリンクが回り込まない方がスッキリすると思って、カスタマイズしました。

サイトの色にあったカラーを置いたつもりですが、好みのものがなければ、適当に変更してくださいねっ^^

最後にCSSが効かないときは、一度キャッシュを削除してください。

バッジ右のリンクが反映しない場合は、#mainを削除して、color: #0029ff !important;など指定すれば反映しますよ。

LINK初心者のCSSが反映されない原因の1つ!優先順位の詳細度とは

それでは、かうたっくでした❦

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
スポンサーリンク
カスタマイズ
フォローする
ビバ★りずむ

コメント

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

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

トップへ戻る