【コピペ可】 WEBで最新情報を掲載したい時に使用しやすい『NEW』ボタンを作成して見た。｜サンプル7個

はじめに

最新情報を掲載する時に、アイキャッチがあると読み手にも伝わりやすく、書き手にとっても伝えたい情報を提供する上で、効果的だと思います。

今回は自身のWEBデザインの勉強も含めて、「NEW」を例にアイキャッチボタンのサンプルを7個作成しましたので、宜しければご活用いただければと思います。

※不具合等御座いましたら、ご連絡いただければ幸いです。

０.事前準備

「Googleフォント」にて文字を設定致します。今回、ゲーム等でよく使用されるドット調の文字? VT323を使用していきたいと思います。

<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">

・こちらを設定からhead要素に追加してして下さい。(はてなの場合)

・その他フォントをお探しの方はこちらより

Googleフォント

0-1.作業手順

1.HTML編集に直接HTMLを入力し、リンクを挿入・加工

2.CSSに好きな番号のCSSコードを挿入してください

SPONSORED LINKS

1.「丸みをつけたデザイン」

NEW : リンク名をこちらに

NEW : リンク名をこちらに

NEW : リンク名をこちらに

1-1.HTML

<p><span class="NEW01">NEW</span> : <a href="#">リンク名をこちらに</a></p>

1-2.CSS

.NEW01 {
   font-family: 'VT323', monospace; /* Googleフォントを指定 */
   font-size: 15px; /* フォントを指定 */
   background: linear-gradient(to right, #e52d27, #b31217); /* 背景色を指定 */
   padding: 0.1em 0.3em; /* 余白調整 */ 
   margin-right: 0.4em; /* 右の余白調整 */
   border-radius: 3px; /* 丸みを指定 */
   color: #fff; /* 文字色を指定 */
}

2.「丸みをつけて枠線を追加したデザイン」

NEW : リンク名をこちらに

NEW : リンク名をこちらに

NEW : リンク名をこちらに

2-1.HTML

<p><span class="NEW02">NEW</span> : <a href="#">リンク名をこちらに</a></p>

2-2.CSS

.NEW02 {
    font-family: 'VT323', monospace;
    font-size: 15px;
    background: #ff6d82;
    padding: 0.1em 0.3em;
    margin-right: 0.4em;
    border-radius: 3px;
    border: 3px double #fff; /* 枠を指定 */
    color: #fff;
}

3.「丸みをより丸くしたデザイン」

NEW : リンク名をこちらに

NEW : リンク名をこちらに

NEW : リンク名をこちらに

3-1.HTML

<p><span class="NEW03">NEW</span> : <a href="#">リンク名をこちらに</a></p>

3-2.CSS

.NEW03 {
   font-family: 'VT323', monospace;
   font-size: 15px;
   background: #d7003a;
   padding: 0.1em 0.3em; 
   margin-right: 0.4em;
   border-radius: 25px; /* 丸みをより丸く */
   color: #fff;
}

4.「立体感を出したデザイン」

NEW : リンク名をこちらに

NEW : リンク名をこちらに

NEW : リンク名をこちらに

4-1.HTML

<p><span class="NEW04">NEW</span> : <a href="#">リンク名をこちらに</a></p>

4-2.CSS

.NEW04 {
    font-family: 'VT323', monospace;
    font-size: 15px;
    background: #d7003a;
    padding: 0.05em 0.3em;
    margin-right: 0.4em;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.40); /* 影をつける */
    color: #fff;
}

5.「正方形のデザイン」

NEW : リンク名をこちらに

NEW : リンク名をこちらに

NEW : リンク名をこちらに

5-1.HTML

<p><span class="NEW05">NEW</span> : <a href="#">リンク名をこちらに</a></p>

5-2.CSS

.NEW05 {
    display: inline-block; 
    margin-right: 0.4em;
    width: 30px; 
    height: 30px;
    line-height: 30px;
    background: #fd6969;
    border-radius: 3px;
    font-family: 'VT323', monospace;
    font-size: 15px;
    text-align: center; /* 文字位置を指定 */
    color: #FFF;
}

6.「円のデザイン」

NEW : リンク名をこちらに

NEW : リンク名をこちらに

NEW : リンク名をこちらに

6-1.HTML

<p><span class="NEW06">NEW</span> : <a href="#">リンク名をこちらに</a></p>

6-2.CSS

.NEW06 {
    display: inline-block;
    margin-right: 0.4em;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #d7003a;
    border-radius: 50%; /* 円に */
    font-family: 'VT323', monospace;
    font-size: 15px;
    text-align: center;
    color: #FFF;
}

7.「吹き出し風」

NEW : リンク名をこちらに

NEW : リンク名をこちらに

NEW : リンク名をこちらに

7-1.HTML

<p><span class="NEW07">NEW</span> : <a href="#">リンク名をこちらに</a></p>

7-2.CSS

.NEW07 {
    position: relative;
    display: inline-block;
    margin-right: 0.4em;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #FFF;
    font-size: 15px;
    font-family: 'VT323', monospace;
    background: #d7003a;
    border-radius: 50%;
}
.NEW07:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -8.1px;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left: 5px solid #d7003a;
}

最後に

NEW以外にも番号Ver.したり、

1 : リンク名をこちらに

2 : リンク名をこちらに

人気記事を「HOT」Ver.にしたり

HOT : リンク名をこちらに

HOT : リンク名をこちらに

HOT : リンク名をこちらに

使い道は色々。是非、背景色変えたり、自分なりのナイスボタンにして下さい！！

2次転載だけはご勘弁を～。

【文字数：3535文字、作成時間:3時間00分】

SPONSORED LINKS