記事ページの更新マークに丸い背景をつける

Before

マーク変更前

After

マーク変更後

[wp-svg-icons icon="checkmark-circle" wrap="i"] カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

見たい場所へジャンプ

1 カスタマイズをする準備
2 カスタマイズのコード
- 2.1 コメントあり
- 2.2 コメントなし
3 うまくいったか確認
4 まとめ・雑談

カスタマイズをする準備

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

ブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズのコード

コメントあり

/*--------------------------------------
  更新マークに丸い背景色を追加
--------------------------------------*/
.entry-header .updated:before {/*更新マークのクラス名*/
display: inline-block;/*位置調整ができるブロックに*/
padding: 3px;/*内側の上下左右の余白*/
margin-right: 6px;/*外側-右側の余白*/
color: #fff;/*アイコンの色*/
background: #ff5252;/*丸い背景の色（お好みで）*/
width: 25px;/*横幅*/
height: 25px;/*縦幅*/
border-radius: 50%;/*角を丸く*/
line-height: 24px;/*文字の高さ*/
text-align: center;/*中央寄せ*/
}

/*--------------------------------------

更新マークに丸い背景色を追加

--------------------------------------*/

.entry-header .updated:before {/*更新マークのクラス名*/

display: inline-block;/*位置調整ができるブロックに*/

padding: 3px;/*内側の上下左右の余白*/

margin-right: 6px;/*外側-右側の余白*/

color: #fff;/*アイコンの色*/

background: #ff5252;/*丸い背景の色（お好みで）*/

width: 25px;/*横幅*/

height: 25px;/*縦幅*/

border-radius: 50%;/*角を丸く*/

line-height: 24px;/*文字の高さ*/

text-align: center;/*中央寄せ*/

}

コメントなし

/*--------------------------------------
更新マークに丸い背景色を追加
--------------------------------------*/
.entry-header .updated:before {
display: inline-block;
padding: 3px;
margin-right: 6px;
color: #fff;
background: #ff5252;
width: 25px;
height: 25px;
border-radius: 50%;
line-height: 24px;
text-align: center;
}