こんにちは! おしゃれなマークを手に入れたネイネイ(@NEYNEYx2)です。
今回は、WordPressテーマのSTORK(ストーク)でワンポイント用のマークをカスタマイズしてみましたので、まとめをご紹介いたします。
STORK(ストーク)でオリジナルのワンポイント用マークをお探しでしたら、ご覧になってください。
- A8.net
:定番の最大手
- もしもアフィリエイト
:独自の報酬制度が魅力的
バリューコマース:定番・独自案件が豊富
- afb(アフィビー)
:美容系の案件に強い
- アクセストレード
:通信系・転職系に強い
STORK(ストーク)でワンポイント用のマークをカスタマイズ
四角
四角の形をした、シンプルなデザインです。
<span class="badge1">関連</span>ここにリンクを入力
/* ----------- 四角 ----------- */
.badge1{
margin: 0 10px 0 3px;
padding: 2px 5px;
background-color: #82c8e2; /* 背景色 */
color: #fff; /* 文字色 */
border-radius: 2px;
font-weight: bold;
font-size: 0.9em;
}
丸角
角が丸みをおびた、シンプルなデザインです。
<span class="badge2">関連</span>ここにリンクを入力
/* ----------- 丸角 ----------- */
.badge2{
margin: 0 10px 0 3px;
padding: 2px 7px;
background-color: #e77373; /* 背景色 */
color: #fff; /* 文字色 */
border-radius: 15px;
font-weight: bold;
font-size: 0.9em;
}
タグ風
タグ風の形をした、デザインです。
<span class="badge9">関連</span>ここにリンクを入力
/* ---------- タグ風 ---------- */
.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;
}
しおり風
しおり風の形をした、デザインです。
<span class="badge4">関連</span>ここにリンクを入力
/* --------- しおり風 --------- */
.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; /* 背景色と同色 */
}
タグ+しおり風
タグとしおりをあわせた形をした、デザインです。
<span class="badge9">関連</span>ここにリンクを入力
/* ------ タグ+しおり風 ------ */
.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; /* 背景色と同色 */
}
アイコン+四角
先頭にアイコンがある、シンプルなデザインです。
<span class="badge8">関連</span>ここにリンクを入力
/* -------- アイコン+四角 -------- */
.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;
}
アイコン+丸角
先頭にアイコンがあり、角が丸みをおびたシンプルなデザインです。
<span class="badge9">関連</span>ここにリンクを入力
/* -------- アイコン+丸角 -------- */
.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;
}
吹き出し下向き
吹き出しが下向きの形をした、デザインです。
<span class="badge6">ここに文字を入力</span>
/* ------ 吹き出し下 ------ */
.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%;
}
吹き出し上向き
吹き出しが上向きの形をした、デザインです。
<span class="badge7">ここに文字を入力</span>
/* ------ 吹き出し上 ------ */
.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にコピペする場合には、下記のどちらかお好みな方で編集ください。
- 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
- 追加CSSを編集する。(外観/CSS編集から変更できます)
子テーマの導入については、コチラ( ↓ )の記事にありますのでそちらをご覧ください。
補足
色を変更する方法
これまで紹介してきた見出しデザインの色を変更する場合の方法を説明していきます。
色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇色とコメントがある行の「 #78b4ff 」の #〇〇〇〇〇〇をお好きな色コードに変更してください。
色コードの参考には、下記のサイトがおすすめです。
アイコンを変更する方法
アイコンを変更する場合は、下記のサイトからアイコンのコードを取得してください。
アイコンの変更は、「 /* アイコンを指定 */ 」とコメントがある行の「content:”\f06c”;」のf06cを下記画像の赤枠部分を参考に変更してみてください。
まとめ
お好みのワンポイント用のマークは見つかりましたか?
これであなたの投稿記事が、よりおしゃれに見やすくなること間違いなしですね!
それでは、まったです。 (‘◇’)ゞ
コチラで紹介している「【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ」の記事もよかったらどうぞ。
- A8.net
:定番の最大手
- もしもアフィリエイト
:独自の報酬制度が魅力的
バリューコマース:定番・独自案件が豊富
- afb(アフィビー)
:美容系の案件に強い
- アクセストレード
:通信系・転職系に強い
コメント