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

リンク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エディタ用)に貼ってください。

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

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

display: inline;のときの装飾

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

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

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

  • 好みの色に変更したい場合

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

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

LINKグリーン系

LINKグリーンブルー系

LINKイエロー系

LINKオレンジ系

LINKレッド系

LINKグレー系

さいごに

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

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

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

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

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

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

スポンサーリンク

シェアする

フォローする

  • Follow Me →
トップへ戻る