【SANGOを自分でカスタマイズ】更新マークに丸い背景をつける

カスタマイズは自己責任で！

このブログのワードプレス環境

ワードプレステーマ

子テーマ

この記事では
更新マークに丸い背景をつけたカスタマイズを説明。

投稿日のマークや、PORIPUを使っている人は砂時計マークもありますね。

Before

マーク変更前

After

マーク変更後

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

見たい場所へジャンプ

1 カスタマイズをする準備
2 カスタマイズコードを追加する
3 更新マークに丸い背景をプラスする手順まとめ

カスタマイズをする準備

追加CSSの手順

外観

カスタマイズ

追加CSS

子テーマの手順

外観

テーマの編集

FTPソフトの手順

FTPソフト起動

自サイトに接続

style.cssを開く

追加CSSの使い方はこちら

ブログのカスタマイズを加速させる「追加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;/*中央寄せ*/

}

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