コピペでOK!リンクの前に「関連」とラベルを表示させる方法。

あくろ
こんにちは!今回は、コピペで簡単実装シリーズです。
サイトを眺めている時には気にならなかった事も、作り手の立場になると気がつく事ってありますよね。
検索してもやり方がわからなかったり、難しかったりで挫折する前にコピペで簡単にサクッと実装しちゃいましょう。

外部リンクや内部リンクの前に「関連」ラベルをつける方法

とりあえずコピペって方は以下のコードを子テーマor親テーマのstyle.cssファイルの一番下にコピペしてください。

※コピーする際はマウスオーバーで表示されるタブの右から二番目”copy”を押してコピーしてくださいね。そのままドラッグしてコピーすると番号までコピーされます。

コピペが完了したら、投稿編集画面のテキストエディタにて

といれていただければ

このように表示されます!

ラベルの文字や背景色のカスタマイズ

PRのラベルをつけたアフィリエイトリンクをさりげなく見出し下に置いているサイトさんって結構多いですよね。

画像などもないため邪魔になりにくく、見出しの下なので内容にマッチしたテキストリンクならついつい押してしまいます。

上記のコードの

この部分を

に変えていただければ

こんな感じで実装可能です。

2箇所を変えるだけで、色や文字を自由に変更できます。
カラーコードは「色 見本」と検索するとgoogleさんが検索画面トップにツールを出してくれるので活用しましょう!

cssの擬似要素がすごく便利

このコードはcssの擬似要素::beforeタグを使っています。

簡単に言えば、HTMLには書かれていない要素もどきを作り出すことなんですが、文字列はもちろん画像なんかにも使えてかなり便利です。

サルワカさんが丁寧で詳しく解説してくださってるので、気になる方はこちらを参照ください。

擬似要素は前後左右どこにでもcssを効かせることでどこにでも表示が可能ですので極めると手軽にオリジナリティが出せていいですね。

小太郎
小太郎にはまだちょっと難しいかも・・・

コメント欄

メールアドレスが公開されることはありません。

メニュー