ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑨サイドバー:人気記事を整えるCSS】

ブログ

こんにちは
ニワトリです

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

『人気記事をサイドバーに入れたい・・・』

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

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

私もそのひとりです!!

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

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

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

今回はサイドバーに人気記事を
追加し調整する方法にを紹介していきます!

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

今回のカスタマイズ
  • 人気記事の設定
  • 人気記事の調整

人気記事をサイドバーに設定する

前回までのカスタマイズで
このようになっています。

サイドバーには

  • プロフィール
  • 検索
  • カテゴリー
  • アーカイブ
  • タグ

が配置されています。

設定方法
  • サイドバーに人気記事を設定
  • CSSをスタイルシートに貼り付ける
  • デザインの確認

サイドバーに人気記事を設定する

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

やり方
  • 追加する[C]人気記事横の▼を押す
  • サイドバーを選択
  • 「ウィジェットを追加」を押す

  • 表示モード
    ・全ての人気記事(全ページで表示)
  • 人気記事のタイトル
    ・タイトルを入力します
  • 表示数(半角数字)
    ・5
  • 表示タイプ
    ・デフォルト
  • 集計期間
    ・全期間

  • 表示設定
  • ウィジェットの表示
    ・チェック・入力したページで表示
  • カテゴリータブ
    ・すべてのカテゴリーを選択
  • ページタブ
    ・投稿のみ選択

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

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

【コピペでOK!】人気記事のデザインをCSSで調整する

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

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

スタイルシート用追加CSS

/************************************
**  サイドバーブログカード
************************************/
.sidebar a.popular-entry-card-link.a-wrap{ /*——————-miniブログカード*/
margin:0;
padding:0;
}
.sidebar figure.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb{/*サムネイル周り*/
margin:1em 0 1em .5em;
}
.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{/*スニペット*/
padding:1.3em .5em .9em 1.3em!important;
text-align: justify;
line-height:1.5;
}

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

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

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

サイドバーに追加した人気記事が
反映しているか確認をします。

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

まとめ

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

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

今回は人気記事について
紹介してきました。

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

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

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

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

コメント

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