このサイトのテーマはSimplicity を使っていて、デフォルトでは、記事を更新すると更新した日付の前に「」という表示がされます。ただ、「更新しました！」ということを、もう少し強くアピールできたらいいな…、と思っていました。
そこで今回は、更新した記事の日付部分の表示変更の方法を紹介していきたいと思います。
変更したい部分と、完成した表示
前述のように、Simplicity のデフォルトでは、このように更新した日付の前に「」が表示されます。
この赤枠の部分を変更します。
変更後は、このように「[更新日 0000/00/00]」という表示になります。
変更の方法
それではここから、変更の方法を説明していきたいと思います。
今回の変更は、CSSの編集によって行います。WordPressのダッシュボード > 外観 > テーマの編集 と進んでください。
更新した日付の前のアイコンを消す
|
1 |
.post-meta .post-update .fa { display: none; } |
まず、CSSにこの記述を追加して、「」という表示を消します。
CSSに追加すると、このように「」が消えます。
更新した日付の前に「 [更新日 」と入れる
|
1 |
.post-meta .post-update::before { content: "[更新日 "; } |
次に、CSSにこの記述を追加して、更新した日付の前に「[更新日 」という表示を入れます。
CSSに追加すると、このように「[更新日 」と表示されます。
更新した日付の後に「 ]」を入れて完成
|
1 |
.post-meta .post-update::after { content: "]"; } |
最後に、CSSにこの記述を追加して、更新した日付の後に「]」という表示を入れます。
![Simplicity 更新の日付の後に「 ]」を入れる](https://fscene.net/wp-content/uploads/2017/07/3fb0c4a2c88c4a65b60d1efdd7dea1f9.png)
CSSに追加すると、このように「[更新日 0000/00/00]」と表示されます。これで完成です。
以上のCSSをまとめると、次のようになります。
|
1 2 3 4 5 6 |
/* 記事の更新日のアイコンを消す*/ .post-meta .post-update .fa { display: none; } /* 記事の更新日の前後に「 [更新日 ] 」と入れる*/ .post-meta .post-update::before { content: "[更新日 "; } .post-meta .post-update::after { content: "]"; } |
おわりに
筆者は公開した記事を後から修正したり、新しい内容を追加したりして、更新することはよくあります。その際に、今回のように表示を少し変えるだけで、「更新しました！」ということがよりアピールできたら、サイト運営者にとっても、読者にとっても、良いことではないかと思います。
