ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑬関連記事を見やすくするCSS】

ブログ

こんにちは
ニワトリです

『自分のブログを見やすく
 オシャレにしたい・・・』

『デフォルトも悪くないけど
 カスタマイズしたい・・・』

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

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

私もそのひとりです!!

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

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

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

今回は記事の下にある関連記事を整える
方法を紹介していきます!

当ブログ記事の下の関連記事は
このようになっています。

今回のカスタマイズ
  • 関連記事の設定
  • 関連記事の編集

関連記事を設定する方法

cocoon設定のデフォルトは
上の画像のようになっています。

少し物足りないですよね・・・

関連記事の設定方法
  • 関連記事の設定
  • 関連記事の編集

関連記事の設定をする

やり方
  • wordpressメニュー
  • cocoon設定
  • 投稿

■関連記事設定

  • 表示タイプ
    ・ミニカード(推奨表示数:偶数)
  • 表示数
    ・10

■関連記事設定

  • 投稿関連情報の表示
    ・すべてのチェックを外す

設定が完了したら
左下の「変更をまとめて保存」を押します。

ファイルを保存を押さないと
変更内容が反映されないため気をつけてください!

関連記事の設定はこれで終わりだよ!

【コピペでOK!】ブログカードのデザインをCSSで調整する

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

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

スタイルシート用追加CSS

/************************************
** 関連記事
************************************/
.related-entry-card.e-card.cf{
height:4.5em;
color:#7b7b7b;
}
.rect-mini-card .related-entry-card-title {
font-size: 13px;
padding-top:.3em;
padding-right:0.5em;
text-align: justify;
}
@media screen and (max-width: 1023px){
.rect-mini-card .related-entry-card-title {
padding-left:1em;
}}
@media screen and (max-width: 480px){
.rect-mini-card .related-entry-card-title {
line-height:1.3;
}
}
.related-entry-card .cat-label{/*MOREの中のカテゴリ表示なくす*/
display:none;
}

.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {/*SHARE MORE COMMENT*/
font-weight: normal;
letter-spacing:.4em;
border-radius:20px;
border: 0;
padding: 0.1em 4em;
background-color:#8b968d;
color:#fff;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}

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

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

スマホとPCで変更したデザインが反映しているか確認する

変更した関連記事が
スマホとPC画面の両方で
反映しているか確認をします。

目次が上の画像のように
表示されていれば設定は完了です

まとめ

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

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

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

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

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

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

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

コメント

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