ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑧サイドバー:プロフィール以外の項目を整えるCSS】

ブログ

こんにちは
ニワトリです

『ブログのサイドバーを見やすく
 オシャレにしたい・・・』

『デフォルトのサイドバーは
 物足りないしダサい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

前回はサイドバーに表示する
プロフィールについて調整したので

プロフィール以外のサイドバーを
紹介していきます!

当ブログのサイドバーは
このようになっています。

  • カテゴリー
  • タグ
  • 新着記事

この3つについてカスタマイズしていきます。
(並び順は設定から簡単に変更ができます)

今回のカスタマイズ
  • サイドバーの設定
  • サイドバーの調整

サイドバーを設定する

設定方法
  • サイドバーの設定
  • CSSをスタイルシートに貼り付ける
  • スマホとPCでデザインの確認

サイドバーに表示させる項目を設定する

やり方
  • wordpressメニュー
  • 外観
  • ウィジェット

やり方
  • 追加する項目横の▼を押す
  • サイドバーを選択
  • 「ウィジェットを追加」を押す

「タグクラウド」「アーカイブ」「検索」
も同様にサイドバーに追加します。

ご自身のブログに合わせて、
追加項目を選択してください。

サイドバーに「おススメカード」を入れる場合は
ウィジェット選択画面で「余白を有効にする」に✓

サイドバーの並び順は
ドラッグすることで変更が可能です。

各項目に表示する名称を
「タイトル」に入力します。

「投稿数を表示」に✓

編集が完了したら右下の
「保存」を押します。

ウィジェットはこれで設定完了だよ!

【コピペでOK!】サイドバーのデザインをCSSで調整する

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター
  • スタイルCSS

スタイルシート用追加CSS

/************************************
**  サイドバー
************************************/
#sidebar>.widget{
border-radius:10px;
}
.widget_search{
padding:0;
}
.sidebar h3{/*サイドバーのタイトル表記と緑の点線*/
color:#7b7b7b;
border-radius: 0%;
border-bottom:3px dotted;
border-color:#90C31F;
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {/* widgetsの中身*/
background-color:#f7f7f7;
color:#afafb0!important;
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{/* widgetsの中身 hover */
background-color:#90C31F;
color:#fffff4!important;
}
.tagcloud a{/*tag cloud*/
background-color:#f7f7f7;
color:#afafb0!important;
}
.tagcloud a:hover{
background-color:#90C31F;
color:#fffff4!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {/*おすすめカード*/
margin: 0 0 1em;
width: 90%;
}

サイドバータイトル下の線の色
マウスホバー時の色を変える場合は
上の#90C31Fの部分の色番号を
変更してください。

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

デザインが反映しているか確認する

サイドバーに追加した項目が
反映しているか確認をします。

サイドバーに上の画像のように表示されて
いれば設定は完了です。

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回はサイドバーについて
紹介してきました。

次回もcocoonカスタマイズについて
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

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