ワードプレステーマSealのカテゴリーラベルを丸くする方法

ワードプレステーマSealのカテゴリーラベルを丸くする方法

ワードプレステーマSealのカテゴリーラベルを丸く表示する方法をご紹介致します。

この方法はCSSに追記をする方法ですが、これから紹介するコードをコピペするだけで簡単に実装する事ができます。

カテゴリーラベルを丸くする事で少し柔らかい見た目に変更する事ができます。

カテゴリーラベルを丸くする方法

[topic color=”blue” title=”完成イメージ図”]
[/topic] [topic color=”blue” title=”手順と変更する部分”]

  1. 管理画面の外観を選択します
  2. 外観の中のテーマ編集を選択します
  3. style.cssが選択されている事を確認します
  4. コードを貼り付けます
  5. ファイルを更新します
[/topic]

管理画面からCSSを編集する画面を開く

まず、ここでは上記画像の①、②、③の部分に注目してください。

管理画面から外観>テーマの編集へ進みます。

そして、③のstyle.cssを選択します。

デフォルトでここが開かれているかと思いますが、他のファイルを変更してしまった場合バグが起きるのでstyle.cssが選択されている事を入念にチェックしてください。

CSSにコードを記述する

.category_info p {
    border-radius: 25px;
    top: 5px !important;
    left: 5px !important;
    padding: 1px 10px !important;
}

上記コードを④の部分、style.cssに貼り付けてください。

そして⑤のファイルを更新をします。

キャッシュを削除して確認する

CSSはパソコン上に残っているデータで表示してしまうためキャッシュの削除が必要です。

キャッシュ削除をした後に再読み込みをしてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です