こんにちは。
今日は、アイキャッチ画像の上に表示されるカテゴリーの表示位置を左上から右上に変更する方法をご紹介します。
理由としては、アイキャッチ画像の左上に文字を書くことが多いのですが、
それに覆い被さってしまうため、スペースの空いていること右上に表示したい！と思ったのがきっかけです。
ニッチな変更内容かもしれませんが、ネットで検索しても見つからなかったため個人の備忘録として残します。
アイキャッチ画像の文字とカテゴリーが重ならない位置に移動したい！
カテゴリーの表示位置を右上に設定したい！
以上のことができるようになっていますので、ぜひ最後までご覧ください＾＾
それでは、今回の目次です。
[temp id=2]
環境
今回の設定を実施した環境は以下の通りです。
WordPress 5.7.1
Cocoon Child 1.1.2
CSSで表示位置を変更する
①WordPressの管理画面にアクセス
WordPressの管理画面にアクセスし、「外観」メニューにマウスを重ねます。
②外観タブのカスタマイズを開く
右側に開いたメニューの中から「カスタマイズ」をクリックします。
③追加CSSを開く
追加CSSをクリックします。
④CSSを記述する
赤枠の部分に、以下のCSSを記載します。
.cat-label {
left: auto;
right: 13px;
}
⑤変更を確認する
アイキャッチ画像に表示されているカテゴリーの表示位置が右上に変わっていることが確認できます。
⑥公開ボタンをクリックする
問題ないことが確認できたら、公開ボタンをクリックします。
公開ボタンをクリックすることで、変更が確定されます。
変更を元に戻す
①CSSに記載した内容を削除する
CSSに記載した内容を削除します。
この時点で、プレビュー画面で表示位置が左上に戻っていることが確認できます。
②公開ボタンをクリックする
問題ないことが確認できたら、公開ボタンをクリックします。
終わりに
いかがでしたでしょうか。
作りたてのブログをより良いものにするために、これからもアップデートしていきます！
アップデートした内容は記事で公開するようにしますので、お楽しみに！
今回は以上です。また次回お会いしましょう＾＾
