Before
After
[wp-svg-icons icon="checkmark-circle" wrap="i"] カスタマイズは自己責任でやろう！
「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら
カスタマイズをする準備
| 追加方法 | 難しさ |
|---|---|
| 追加CSS | |
| テーマエディター | |
| FTPソフト |
はじめてカスタマイズをする方におすすめなのは追加CSSです。
カスタマイズのコード
コメントあり
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*-------------------------------------- 更新マークに丸い背景色を追加 --------------------------------------*/ .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;/*中央寄せ*/ } |
コメントなし
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*-------------------------------------- 更新マークに丸い背景色を追加 --------------------------------------*/ .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; } |
うまくいったか確認
確認の手順
- カスタマイズコードを保存
- カスタマイズしたページを開く
- cntrl+F5を押す
いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。
MEMO
投稿日マークを変更する場合.updatedの部分を.pubdateに変更してください。PORIPUで表示される砂時計マークの場合は.fa-hourglass-halfに変更してください。まとめ・雑談
なぁなぁ、このカスタマイズもあれやろ？
はい！！サルワカさんを参考にしました！！！！
くまさんはじめまして！なかたくと申します。
記事を参考に更新マークに丸い背景をつけようと試みましたが、CSS編集で「padding: 3px;」の横に「！マーク」が表示されます。
それが原因なのか不明ですが丸い背景もつけれませんでした。
オレンジ色の「！マーク」でしたら、幅を指定してるのに内側の余白を追加しちゃうとはみ出ちゃうよ！的な警告なので問題はないはずです。
ただ、丸い背景自体が出てこないのはちょっと見てみないとわからないですね…非公開サイトで無ければURLを教えていただけると嬉しいです。
よろしくお願いいたします。