【後編】CSSコピペ可!初心者でも簡単にできる「Cocoon」のカスタマイズ

WordPress無料テーマ「Cocoon」をカスタマイズ

こんにちは!たこ焼きが食べたいサボちゃんです。

前回「【前編】CSSコピペ可!初心者でも簡単にできる「Cocoon」のカスタマイズ」に引き続き、CSSの追記コードを載せていきます。

投稿ページサイドバー(右)各見出し

/*h3文字茶色く、下に破線*/
.sidebar h3 {
    position: relative;
    padding-left: 32px;
  border-bottom: 4px dotted rgba(95,75,75,0.2);
    background-color: unset;
    color: #5f4b3b;
}
/*h3の右に丸2つ*/
.sidebar h3::before {
    position: absolute;
    content: '';
    border-radius: 100%;
    top: 1em;
    left: .1em;
    z-index: 2;
    width: 18px;
    height: 18px;
    background: rgba(95, 75, 75, .5);
}
.sidebar h3::after {
    position: absolute;
    content: '';
    border-radius: 100%;
    top: 1.5em;
    left: .6em;
    width: 13px;
    height: 13px;
    background: rgba(150, 150, 150, .5);
}

投稿ページサイドバー(右)人気記事部分

2019.08.27 Cocoon更新により少しズレが出ていたので修正しました!

/*角丸く、茶色に*/
.widget-entry-cards.large-thumb-on .card-content {
    background-color: rgba(95, 75, 75, 0.7);
    border-radius: 0 0 4px 4px;
}
.widget-entry-cards.card-large-image figure img {
    border-radius: 4px;
}
.widget-entry-cards.ranking-visible .card-thumb::before {
    border-radius: 4px 0 0 0;
}
/*文字サイズをデフォルトに*/
.widget-entry-cards.card-large-image .e-card {
    font-size: initial;
}

投稿ページサイドバー(右)カテゴリー部分

/*左に>つけて下線、マウスオーバーで背景白*/
.widget_categories ul li ul li a::before {
    font-family: FontAwesome;
    content: "\f105";
    color: #d9ceb8;
}
.widget_categories ul li a::before {
    font-family: FontAwesome;
    content: "\f101";
    color: #d9ceb8;
    padding-right: 6px;
}
.widget_categories ul li a {
    border-bottom: dotted 1px #d9ceb8;
}
.widget_categories ul li a:hover {
   background-color: rgba(255,255,255,0.8);
    border-radius: 4px;
}

投稿ページサイドバー(右)新着記事部分

/*マウスオーバーで背景白*/
a.new-entry-card-link.widget-entry-card-link.a-wrap:hover {
   background-color: rgba(255,255,255,0.8);
    border-radius: 4px;
}

投稿ページサイドバー(右)気になる話題をチェック部分

/*マウスオーバー時の背景色を薄橙に*/
.tagcloud a:hover {
    background-color: rgba(247,182,67,.5);
}
スポンサーリンク

投稿ページサイドバー(右)検索窓部分

/*枠太く、中の文字少し小さく、高さ1px小さく*/
/*404ページで検索窓と一緒にアーカイブやカテゴリーを表示しているので、そちらも一緒に変更*/
.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
    padding: 10px;
    border: 4px solid #ccc;
    font-size: 16px;
}

投稿ページサイドバー(右)この記事を読んだ人におすすめ部分

/*マウスオーバーで背景白*/
a.widget-related-entry-card-link.widget-entry-card-link.a-wrap:hover {
   background-color: rgba(255,255,255,0.8);
    border-radius: 4px;
}

投稿ページサイドバー(右)この記事を書いた人部分

/*外枠*/
.author-box {
    text-align: center;
    max-width: 336px;
    padding: 20px;
    background-image: linear-gradient(-20deg, #f7eed3 0%, #e9defa 20%, #f7eed3 100%);
    border: none;
}
/*内側*/
.author-content {
    border-radius: 200px 200px 4px 4px / 60px 60px 4px 4px;
    color: #5F4B3B;
    padding: 32px 20px 20px;
    width: 110%;
    margin-left: -5% !important;
    background-color: rgba(255,255,255,0.9);
}

ヘッダー関連

/*PCとSPの切り替わり時のヘッダーサイズバグ修正*/
.header .header-in {
    min-height: auto;
}
/*SPヘッダーbg白から薄青に*/
.mobile-menu-buttons {
    background: #bfe0e5;
}
/*SP時のメニューボタンの色を黒から茶色に*/
.mobile-header-menu-buttons .menu-button {
    color: #5f4b3b;
}
.mobile-menu-buttons .menu-button > a {
    color: #5f4b3b;
}
/*SP時のメニュー閉じるボタンの色を茶色に*/
.menu-close-button {
    background-color: #f7eed3;
}
/*SP時サイドバー閉じるボタンを黒から茶色に*/
.menu-close-button::before {
    color: #5f4b3b;
}
/*SP時サイドバー閉じた後のハンバーガーの色を黒から茶色に、背景色変わらないように*/
.mobile-menu-buttons .menu-button:hover {
    background-color: #bee0e5;
    color: #5f4b3b;
}

終わりに

いかがでしたか?

色や数値を変更してみるだけでガラッと印象が変わるので、面白いですよね〜!みなさんのカスタマイズに少しでも役立てば嬉しいです。

一緒に楽しくブログ運営していきましょう!