Amazon Gaming Week【9月19日~9月29日まで】

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

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

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

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

 

おすすめASP
  1. A8.net:定番の最大手
  2. もしもアフィリエイト:独自の報酬制度が魅力的
  3. バリューコマース:定番・独自案件が豊富
  4. afb(アフィビー):美容系の案件に強い
  5. アクセストレード:通信系・転職系に強い
目次(タップできます)

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%;
}

 

CSSコピペの場所

CSSにコピペする場合には、下記のどちらかお好みな方で編集ください。

  1. 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
  2. 追加CSSを編集する。(外観/CSS編集から変更できます)

子テーマの導入については、コチラ( ↓ )の記事にありますのでそちらをご覧ください。

あわせて読みたい
STORK(ストーク)をインストールしたら「子テーマ」を入れよう! こんにちは! HTML&CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマのSTORK(ストーク)をインストールしたら、初めにしておいた方がいいのが「子テーマ」の導...

 

補足

色を変更する方法

これまで紹介してきた見出しデザインの色を変更する場合の方法を説明していきます。

色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇とコメントがある行の「 #78b4ff 」の #〇〇〇〇〇〇をお好きな色コードに変更してください。

色コードの参考には、下記のサイトがおすすめです。

色コードの参考サイト

 

アイコンを変更する方法

アイコンを変更する場合は、下記のサイトからアイコンのコードを取得してください。

アイコンのコード取得サイト

 

アイコンの変更は、「 /* アイコンを指定 */ 」とコメントがある行の「content:”\f06c”;」のf06cを下記画像の赤枠部分を参考に変更してみてください。

 

まとめ

お好みのワンポイント用のマークは見つかりましたか?

これであなたの投稿記事が、よりおしゃれに見やすくなること間違いなしですね!

それでは、まったです。 (‘◇’)ゞ

 

コチラで紹介している「【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ」の記事もよかったらどうぞ。

あわせて読みたい
【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ こんにちは! カスタマイズにハマってしまっているネイネイ(@NEYNEYx2)です。 今回は、WordPressテーマのSTORK(ストーク)でこれまで紹介してきたカスタマイズをまとめま...

 

おすすめASP
  1. A8.net:定番の最大手
  2. もしもアフィリエイト:独自の報酬制度が魅力的
  3. バリューコマース:定番・独自案件が豊富
  4. afb(アフィビー):美容系の案件に強い
  5. アクセストレード:通信系・転職系に強い

 

Amazonギフト券 チャージタイプ

 

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

30代の元開発エンジニア。本の書評多め(ミステリ、ファンタジー、気になった本を読む雑食系)。現在は、自由な働き方で生活していけるように、日々の『喜び・怒り・悲しみ・楽しみ』を書きつづっています。

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次(タップできます)