こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSSでかわいいバッジをつける方法を解説いたします。 バッジを作るだけなので拍子抜けするぐらいかんたんです。CSSがあんまりよく分からない方でもコピペで作れますので、お気軽に試してみてください。 HTML+CSSで作っていくので、WordPress等のCMSでも同じように表示されるはずです。WordPressで運営している当サイトでも、本記事の方法でバッジを設置しています。 ではさっそくCSSでバッジをレイアウトしてみましょう。 スポンサーリンク バッジを並べるにはspanタグを使おう! 文字の横に並べて何かを表示したいときは、spanタグを使うと良いです。 CSSでレイアウトできるように、classもつけておきましょう。 <span class="sankou-badge">参考</span> この右隣にテキストリ
![CSSでリンク横に「参考・LINK」バッジをつけてみよう | vdeep](https://cdn-ak-scissors.b.st-hatena.com/image/square/d087cdbd59f52d8d83bb2099aff26b65eb492eef/height=288;version=1;width=512/http%3A%2F%2Fvdeep.net%2Fwp-content%2Fuploads%2F2015%2F09%2Fbadge-css.png)