Warning: Undefined variable $post in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

Warning: Attempt to read property "ID" on null in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

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

マークに丸い背景をつける


Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
Before

マーク変更前

After

マーク変更後

[kjk_temp id=”2523″]

カスタマイズをする準備

[kjk_temp id=”3370″]

カスタマイズのコード

コメントあり

/*--------------------------------------
  更新マークに丸い背景色を追加
--------------------------------------*/
.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;
}
[kjk_ab id="4"]

うまくいったか確認

[kjk_temp id=”3406″]
MEMO
投稿日マークを変更する場合.updatedの部分を.pubdateに変更してください。PORIPUで表示される砂時計マークの場合は.fa-hourglass-halfに変更してください。

まとめ・雑談

まとめ

[kjk_balloon id=”13″]なぁなぁ、このカスタマイズもあれやろ?[/kjk_balloon] [kjk_balloon id=”4″]はい!!サルワカさんを参考にしました!!!![/kjk_balloon]