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

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

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

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

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

 

おすすめASP

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編集から変更できます)

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

関連記事

こんにちは! HTML&CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマのSTORK(ストーク)をインストールしたら、初めにしておいた方がいいのが「子テーマ」の導入です。 今回は、「子テーマ」を導入する仕方[…]

STORK(ストーク)をインストールしたら「子テーマ」を入れよう!

 

補足

色を変更する方法

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

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

色コードの参考には、コチラ(↓)のサイトがおすすめです。

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色…

 

アイコンを変更する方法

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

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

 

まとめ

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

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

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

 

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

関連記事

こんにちは! カスタマイズにハマってしまっているネイネイ(@NEYNEYx2)です。 今回は、WordPressテーマのSTORK(ストーク)でこれまで紹介してきたカスタマイズをまとめましたので、ご紹介いたします。 STORK(ストーク[…]

【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ

 

おすすめASP

 

ポチして頂くことで、ランキングの順位が上がります

人気ブログランキングへ
にほんブログ村 本ブログ 書評・レビューへ
Amazonでお得にお買い物
amazonギフト券

Amazonでお買い物するなら、Amazonギフト券の利用がおすすめ!

チャージするたびに、プライム会員なら最大2.5%分通常会員なら最大2.0%分のAmazonポイントが貯まる。

\ TRY NOW!! /

\ こちらも読まれています! /