【Cocoon】カスタマイズ | サイドバー編

Cocoonに変更してからやったカスタマイズという記事でコード自体は書いていますが
備忘録にもなるしという事で個別記事を書いていないカスタマイズ記事を書いていきたいと思います
今回はサイドバーのカスタマイズです、まあ、あまり難しい事はやっていませんけどねー

Cocoonに変更してからやったカスタマイズ

テーマをCocoonに変更後行ったカスタマイズの備忘録記事です

2019/03/01 font指定部分を一部修正しました

Index

やっているカスタマイズ
装飾部分のコード
ウィジェット部分
1. 調整コード
おわり

やっているカスタマイズ

見出しの装飾
ウィジェットを使用している物の調整

多分これぐらいです、装飾と言うよりもほぼ微調整ですね

見出しの装飾は分かりやすいと思いますし多分みんなが手を入れている部分だと思います
サイドバー自体とは少し異なりますが、ついでなので表示させているウィジェット部分も

全て子テーマのstyle.cssへの追記になります

before

after

装飾部分のコード

/* サイドバーの装飾 */
#sidebar h3{
    margin: 0 0 1.5em;
    padding: 0.4em;
    border-bottom: 3px double #9ed1fc;
    font: 700 1.143em "Raleway", sans-serif;
}

この部分を変更するだけでもだいぶ雰囲気が変わると思いますので
まずはこの部分を変更してみると良いかと思いますよ

margin、paddingで空間の調整をしてborder-bottomで枠線を下部のみに二重線で表示
フォントサイズ、太さ、フォントファミリーを一纏めにしfont:で変更
詳しいことは下の記事を見てくださいね

Sponsor Link

ウィジェット部分

ここからは当サイトで表示させているウィジェット部分の調整部分です

通常ページの検索
AMP用の検索
広告
カテゴリ用の人気記事
新着記事
PC用広告
まとめ記事(ナビメニューを使用)
当日の人気記事
広告
アーカイブ
モバイル用に表示させるためのタグクラウド
目次(スクロール追従)

ウィジェットはこんな感じ

調整コード

では肝心のコード部分を

検索

/* google search */
div.gsc-control-cse.gsc-control-cse-ja {
    padding: 0 10px;
}
div.gsc-control-searchbox-only,
.gsc-control-searchbox-only-ja {
    margin: 10px 0 0;
}

検索部分はこんな感じでmargin、paddingの調整です

エントリーカード・人気記事部分

コードを開く

/* エントリーカード */
.widget-entry-cards .widget-entry-card {
    border: 1px solid #d5d5d5;
}

/* タイトル */
.widget-entry-card-title {
    font: 700 14px "M PLUS Rounded 1c";
    position: relative;
    padding: 3px;
}

/* 画像位置調整 */
img.attachment-thumb120,
img.new-entry-card-thumb-no-image,
img.widget-entry-card-thumb-no-image {
    margin-left: 3px;
}

/* 人気記事調整 */
.popular-entry-card-title {
    font-weight: bold;
    font-size: 14px;
    position: relative;
    padding: 2px 3px 0;
    color: #6c6c6c;
}

.widget-entry-cards .a-wrap {
    margin-bottom: 10px;
    padding: 2px;
}

/* 日付・カテゴリーフォントの変更 */
.post-date, .category, .post-update {
    font-family: 'Share Tech Mono', monospace;
}

エントリーカード、人気記事部分はこんな感じです

ランキング部分は個別ページがあるのでそちらを御覧ください

タグクラウド

モバイル表示ではタグクラウドを表示しているフッター部分を非表示にしているので
サイドバーに入れて特定の幅以上では表示させないようにコードを追記しています

/* tag cloud */
@media screen and (min-width: 1023px) {
    aside#tag_cloud-2 {
        display: none;
    }
}

Cocoon標準機能の目次

/* 目次ウィジェット */
.toc-widget-box {
    max-height: 50vh;
    overflow-y: auto;
}
.nwa .toc {
    background-color: #fff;
    border: 0;
    padding: 0 3px;
    margin: 1.2em;
    width: 95%;
    border-left: 5px double #cccfd2;
}

デフォルトだと寂しかったので装飾や調整をしています

目次自体のカスタマイズはこちらです

おわり

以上でサイドバー部分のカスタマイズに関するコード類は終わりです
基本的にコピーしてそのまま使えると思います、勿論自分のサイトに合わせた調整は必要ですが
難しい事をやっている訳ではないので、コピーサイトに合わせた調整をするだけでOK
ちょっと見た目を変更してみたいけど難しそう…という人が居たら試してみてくださいねー

[share]