STORK(ストーク)でワンポイント用のマークをカスタマイズ！

こんにちは！おしゃれなマークを手に入れたネイネイ(@NEYNEYx2)です。

今回は、WordPressテーマのSTORK(ストーク)でワンポイント用のマークをカスタマイズしてみましたので、まとめをご紹介いたします。

STORK(ストーク)でオリジナルのワンポイント用マークをお探しでしたら、ご覧になってください。

おすすめASP

A8.net：定番の最大手
もしもアフィリエイト：独自の報酬制度が魅力的
バリューコマース：定番・独自案件が豊富
afb（アフィビー）：美容系の案件に強い
アクセストレード：通信系・転職系に強い

目次（タップできます）

STORK(ストーク)でワンポイント用のマークをカスタマイズ

四角

四角の形をした、シンプルなデザインです。

　　　　コードを表示

HTML

<span class="badge1">関連</span>ここにリンクを入力

CSS

/* ----------- 四角 ----------- */
.badge1{
    margin: 0 10px 0 3px;
    padding: 2px 5px;
    background-color: #82c8e2; /* 背景色 */
    color: #fff; /* 文字色 */
    border-radius: 2px;
    font-weight: bold;
    font-size: 0.9em;
}

丸角

角が丸みをおびた、シンプルなデザインです。

　　　　コードを表示

HTML

<span class="badge2">関連</span>ここにリンクを入力

CSS

/* ----------- 丸角 ----------- */
.badge2{
    margin: 0 10px 0 3px;
    padding: 2px 7px;
    background-color: #e77373; /* 背景色 */
    color: #fff; /* 文字色 */
    border-radius: 15px;
    font-weight: bold;
    font-size: 0.9em;
}

タグ風

タグ風の形をした、デザインです。

　　　　コードを表示

HTML

<span class="badge9">関連</span>ここにリンクを入力

CSS

/* ---------- タグ風 ---------- */
.badge9{
    margin: 0 10px 0 3px;
    padding: 2px 5px;
    background-color: #79e37c; /* 背景色 */
    color: #fff; /* 文字色 */
    border-radius: 15px 0 0 15px;
    font-weight: bold;
    font-size: 0.9em;
}
.badge9:before{
    content: '●';
    color: #fff; /* マーク色 */
    margin-right: 2px;
}

しおり風

しおり風の形をした、デザインです。

　　　　コードを表示

HTML

<span class="badge4">関連</span>ここにリンクを入力

CSS

/* --------- しおり風 --------- */
.badge4{
    position: relative;
    margin: 0 20px 0 3px;
    padding: 2px 0 2px 5px;
    background-color: #f7b2b2; /* 背景色 */
    color: #fff; /* 文字色 */
    border-radius: 2px 0 0 2px;
    font-weight: bold;
    font-size: 0.9em;
    top: -2px;
}
.badge4:before{
    position: absolute;
    content: '';
    top: 0;
    left: 100%;
    border: 0.85em solid transparent;
    border-left: 0.9em solid #f7b2b2; /* 背景色と同色 */
}

タグ+しおり風

タグとしおりをあわせた形をした、デザインです。

　　　　コードを表示

HTML

<span class="badge9">関連</span>ここにリンクを入力

CSS

/* ------ タグ+しおり風 ------ */
.badge9{
    position: relative;
    margin: 0 20px 0 3px;
    padding: 2px 0 2px 5px;
    background-color: #ffb03f; /* 背景色 */
    color: #fff; /* 文字色 */
    border-radius: 15px 0 0 15px;
    font-weight: bold;
    font-size: 0.9em;
    top: -2px;
}
.badge9:before{
    content: '●';
    color: #fff; /* マーク色 */
    margin-right: 2px;
}
.badge9:after{
    position: absolute;
    content: '';
    top: 0;
    left: 100%;
    border: 0.88em solid transparent;
    border-left: 0.9em solid #ffb03f; /* 背景色と同色 */
}

アイコン+四角

先頭にアイコンがある、シンプルなデザインです。

　　　　コードを表示

HTML

<span class="badge8">関連</span>ここにリンクを入力

CSS

/* -------- アイコン+四角 -------- */
.badge8{
    margin: 0 10px 0 3px;
    padding: 2px 5px;
    background-color: #82c8e2; /* 背景色 */
    color: #fff; /* 文字色 */
    border-radius: 2px;
    font-weight: bold;
    font-size: 0.9em;
}
.badge8:before{
    content: '';
    font-family:"FontAwesome";
    content:"\f00c"; /* アイコン指定 */
    color:#fff; /* アイコン色 */
    margin-right: 5px;
}

アイコン+丸角

先頭にアイコンがあり、角が丸みをおびたシンプルなデザインです。

　　　　コードを表示

HTML

<span class="badge9">関連</span>ここにリンクを入力

CSS

/* -------- アイコン+丸角 -------- */
.badge9{
    margin: 0 10px 0 3px;
    padding: 2px 7px;
    background-color: #e77373; /* 背景色 */
    color: #fff; /* 文字色 */
    border-radius: 15px;
    font-weight: bold;
    font-size: 0.9em;
}
.badge9:before{
    content: '';
    font-family:"FontAwesome";
    content:"\f0a9"; /* アイコン指定 */
    color:#fff; /* アイコン色 */
    margin-right: 5px;
}

吹き出し下向き

吹き出しが下向きの形をした、デザインです。

　　　　コードを表示

HTML

<span class="badge6">ここに文字を入力</span>

CSS

/* ------ 吹き出し下 ------ */
.badge6{
    position: relative;
    margin: 0 20px 0 3px;
    padding: 7px 20px;
    background-color: #82c8e2; /* 背景色 */
    color: #fff; /* 文字色 */
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.0em;
}
.badge6:before{
    position: absolute;
    content: '';
    border: 0.7em solid transparent;
    border-top: 0.7em solid #82c8e2; /* 背景色と同色 */
    top: 100%;
    left: 25%;
}

吹き出し上向き

吹き出しが上向きの形をした、デザインです。

　　　　コードを表示

HTML

<span class="badge7">ここに文字を入力</span>

CSS

/* ------ 吹き出し上 ------ */
.badge7{
    position: relative;
    margin: 0 20px 0 3px;
    padding: 7px 20px;
    background-color: #82c8e2; /* 背景色 */
    color: #fff; /* 文字色 */
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.0em;
}
.badge7:before{
    position: absolute;
    content: '';
    border: 0.7em solid transparent;
    border-bottom: 0.7em solid #82c8e2; /* 背景色と同色 */
    top: -59%;
    left: 25%;
}