リンクaタグ前にリンク元の内容を表す『参考』・『Link』・『引用元』などボタンのようなバッジで、行の頭を揃えスッキリしたスタイル。HTMLとCSSをコピペで活用できるコードを紹介します。
リンクaタグのアンカーテキストが長いとき、スマホ・PCビューともに、テキストをリンク前バッジの下に回り込ませたくない人におすすめのカスタマイズです＾＾
以下画像のように、好みにあわせてカラーバリエーションを増やしたので、HTML・CSSはコピペで使ってください❦
ボタンバッジ下にリンクが回り込まないHTML
バッジの下に回り込まないよう、コピペで使えるHTMLタグはLINK・参考・引用元の『3種類』準備しました。
LINKのHTML・表示例
<div class="clearfix"><span class="b-b-link">LINK</span><a href="ここにURL">リンク先のテキスト</a></div><p></p>
▲LINL用の（コピペ）HTML ▼表示例
<div class="clearfix"></div>で囲っているのは、spanに変更して改行しないと、左上が回りこみ表示がおかしくなり、なくなく使用をやめるなどなって欲しくないからです。※段落さえつけてリンクを置くと、なくても問題ありません。
最後にpタグ<p></p>があるのは、次文章を書き込みやすくしている為です。
参考のHTML・表示例
<div class="clearfix"><span class="b-b-sanko">参考</span><a href="ここにURL">リンク先のテキスト</a></div><p></p>
▲参考用の（コピペ）HTML ▼表示例
引用元のHTML・表示例
<div class="clearfix"><span class="b-b-quot">引用元</span><a href="ここにURL">リンク先のテキスト</a></div><p></p>
▲引用元用の（コピペ）HTML ▼表示例
画像を借りる時は、画像制作者さんが作成したものを勝手に借りてしまうとトラブルになる可能性があるかも知れません。それを回避するには、使われた人が気持ち良く感じる使い方も大事ですね。
リンク・アンカーテキストを編集する方法
上記HTMLはWordPressの『ビジュアル』エディタにコピペしても文字列が並ぶだけです。
プラグインadclickタグに登録して利用しない場合は、『テキスト』エディタで（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><p></p>
下記のような感じで表示。
<div class="clearfix"><span class="link-badge">LINK</span><a href="ここにURL">リンク先のテキスト</a></div><p></p>
WordPressビジュアル画面で編集する場合
リンクをクリック
リンクの編集をクリック
『リンクの挿入/編集画面』が出るので、URL・文字列を入力して新しいタブで開くか決めればOK！
LINKビバ★りずむ
プラグイン：アドクイックタグに定型文として、開始タグにコードを登録しておくと便利ですよ＾＾
CSSコピペOK！バッジ下に文字列が回り込まないスタイル
上記HTMLのスタイル・CSSです。コピペでstyle.css（サイト用）やeditor-style.css（WordPressエディタ用）、amp用CSSに貼ってください。
/*ボタン：バッジの基本装飾*/
.b-b-link,
.b-b-sanko,
.b-b-quot {
padding: 0.7em 0.7em 0.5em;
margin: 0 8px 0 1px;
font-size: 75%;
border-radius: 3px;
font-weight: bold;
float: left;
}
/*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: block;
overflow: hidden;
word-wrap: break-word;
}
/*ボタン：バッジに隣接するリンク・onマウス時の装飾*/
#main span[class^="b-b"] + a:hover {
color: #e196ff; /* 薄紫 */
}
/*floatの解除*/
.clearfix {
display: block;
}
- 好みの色に変更したい場合
.b-b-link {
color: #53a4ab;
background-color: #d5fbfe;
border: 1px solid #78dbe3;
}
2～4行目のカラー・背景・ボーダーを、後述のスタイルに差し替えて変更してください。
リンク前ボタンバッジの色、変更例
グリーン系
color: #13bf00; background-color: #d9fed5; border: 1px solid #6fde63;
ブルーリンク
color: #5ebbc3; background-color: #d5fbfe; border: 1px solid #78dbe3;
イエローリンク
color: #64672d; background-color: #fcffba; border: 1px solid #d0d476;
オレンジリンク
color: #eca700; background-color: #fef2d5; border: 1px solid #ffd672;
レッドリンク
color: #ec0000; background-color: #fed5d5; border: 1px solid #ff7272;
グレーリンク
color: #000000; background-color: #b7b7b7; border: 1px solid #787777;
さいごに
ボタンバッジの下にリンクが回り込まない方がスッキリすると思って、カスタマイズしました。
サイトの色にあったカラーを置いたつもりですが、好みのものがなければ、適当に変更してくださいねっ＾＾
最後にCSSが効かないときは、ブラウザ・プラグイン・場合によってサーバー上にあるキャッシュを削除してください。
バッジ横のリンクが反映しない場合、#main の指定がテーマに存在しない可能性があります。#main を削除して、color: #0029ff !important;と指定すれば反映しますよ。
LINK初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは
それでは、かうたっくでした❦
できるポケット HTML5&CSS3/2.1全事典 できるポケットシリーズ
Comments