CSSでリンク横に「参考・LINK」バッジをつけてみよう | vdeep

こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSSでかわいいバッジをつける方法を解説いたします。 バッジを作るだけなので拍子抜けするぐらいかんたんです。CSSがあんまりよく分からない方でもコピペで作れますので、お気軽に試してみてください。 HTML+CSSで作っていくので、WordPress等のCMSでも同じように表示されるはずです。WordPressで運営している当サイトでも、本記事の方法でバッジを設置しています。 ではさっそくCSSでバッジをレイアウトしてみましょう。 スポンサーリンク バッジを並べるにはspanタグを使おう！ 文字の横に並べて何かを表示したいときは、spanタグを使うと良いです。 CSSでレイアウトできるように、classもつけておきましょう。 <span class="sankou-badge">参考</span> この右隣にテキストリ

[jinnoren]

こういうのが知りたかったです、明日やってみよ。 CSSでリンク横に「参考・LINK」バッヂをつけてみよう - vdeep

[hiroh61]

これいいな！僕も真似してみよう！///CSSでリンク横に「参考・LINK」バッヂをつけてみよう

[yopitore]

リンクをかっこよく見せれますね。後でやってみます。

[murase0725]

ありがとうございます！丁度やりたかったので！

[masayoshinym]

バッヂを作るときに読む。

[underd]

あとでよむ

[cooshin]

これいい！いつもわかりやすい解説重宝しておりますm(__)m

[piece-hairworks]

これやっぱりCSSなんだなー！面白そう〜( ´ ▽ ` )ﾉ"CSSでリンク横に「参考・LINK」バッヂをつけてみよう"

[kon_guutara]

まさに！これがやりたかったのです (*´o`*)！ありがたやー！＞ CSSでリンク横に「参考・LINK」バッヂをつけてみよう - vdeep

[okutani]

【ブログ更新】紺さまー用。 CSSでリンク横に「参考・LINK」バッヂをつけてみよう - vdeep

[defender_21]

これやりたかったやつやー

[kaeru-kana]

これは、全く知らない人には凄すぎるページだぁ❣❣ 取り入れる❣❣

[sukkirikumiko]

【この記事サイコー！】おくやん！記事にしてくれてありがとう！もう、おくやんのデザイン大好き！最高！最高！本当にありがとう～！！ CSSでリンク横に「参考・LINK」バッヂをつけてみよう - vdeep