【cocoon】のカテゴリー色分けと少し見た目を変更【シンプルデザイン CSS コピペでOK】

スポンサーリンク

スポンサーリンク

カテゴリーの色分け方法

とても簡単です。

ダッシュボードから投稿のカテゴリーに移動します。

作成したカテゴリーの編集画面の中に「カテゴリーの色」という項目があります。

お好きな色に変更してください。

各カテゴリー毎に色分けすると、パッと見もかなり良くなります。

エントリーカードのカテゴリー表示を変更

デフォルトでは、ただ四角いカテゴリー表示です。

デザインを変更する

私は、以下のようにカテゴリー表示を少しだけ変更しました。

トップページにたくさん表示されますので、あまりコテコテにならない方がいいと思います。

わかりますか? 少し上に浮いてる感じです。

CSSを追加する

こちらと同じデザインでよければ、CSSを記述してますので、
コピペで利用していただいても結構です。

以下のCSSを、ダッシュボードの外観 → テーマエディターにコピペして下さい。

/* カテゴリーアイコンを変更 */
.cat-label {
top: 0;
left: 10px;
border: none;
font-size: 12px;
color: #fff;
background-color: #49add1;
padding: 1px 5px;
margin: -6px 0 0 0;
overflow: visible;
}
.cat-label::after { /*右上に小さな三角を作る*/
position: absolute;
content: ”;
top: 0;
right: -6px;
border: none;
border-bottom: solid 6px #3089a9; /*小さな三角の色*/
border-right: solid 6px transparent;
}

いかがでしょうか?
うまく表示されましたか?
今回のカスタマイズはあまり重要なことではございませんが、
少しの変化で、格段に見やすくなるブログとなりました。
WordPressブログ運営
スポンサーリンク
シェアして頂けるとすごく嬉しいです^^
フォロー数が増えるとモチベーション上がります!よろしくお願いいたしますm(_ _ )m
スポンサーリンク
はいたか HAITAKA Blog

コメント

タイトルとURLをコピーしました