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

wordpress
Sponsor Link
この記事は 約6分 で読めます。

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

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

やっているカスタマイズ

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

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

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

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

before

after

装飾部分のコード

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

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

margin、paddingで空間の調整をしてborder-bottomで枠線を下部のみに二重線で表示
フォントサイズ、太さをそれぞれfont-size、font-weightで変更
font-familyで表示フォントファミリーの変更です

visibilityは表示フォントをWebフォントにしているのでチラツキ防止で指定しています

.wf-active #sidebar h3 {
    visibility: visible;
}

このような物を子テーマのstyle.cssへ追記してあります ※実際に追記してあるものはもっと多いですが
指定してある部分が読み込まれるまではvisibility: hidden;で非表示にしておき
読み込まれるとvibility: visible;で表示されるといった感じです

visibility設定をしているとamp対応ページでhidden状態のままになる事案が発生していたため
現在は削除してあります

Sponsor Link

ウィジェット部分

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

ページ上部から
1. 検索部分
2. 新着・人気記事一覧
3. タグクラウド
4. 目次部分(サイドバースクロール追従)

広告の部分は…良いですよねw

一応使っているウィジェットは以下

通常ページの検索と広告のセット、AMP用の検索
カテゴリ用の人気記事、新着記事、トータルの人気記事
モバイル用に表示させるためのタグクラウド、下の2つが通常ページ用とAMP用の広告です

調整コード

では肝心のコード部分を

検索

/* 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-weight: bold;
    font-size: 14px;
    position: relative;
    padding: 3px;
    font-family: "M PLUS Rounded 1c";
}

/* 画像位置調整 */
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標準機能の目次

/* 目次ウィジェット */
.nwa .toc {
    border: 0;
    padding: 0 5px;
    margin: 1.2em;
    width: 300px;
    border-left: 5px double #cccfd2;
    border-right: 5px double #cccfd2;
}

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

おわり

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

[share]

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