ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑥インデックスカードを整えるCSS】

ブログ

こんにちは
ニワトリです

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

『デフォルトのインデクスカード
 はなんか少しダサい・・・

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

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

私もそのひとりです!!

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

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

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

今回はインデックスカードについて
紹介をしていきますね!

当ブログのインデックスカードは
このようになっています。

インデックスカードを揃えることで
訪問者の方に好印象を与えることができます。

今回はそんなインデックスカードの
設定方法を紹介していきます。

今回のカスタマイズ
  • インデックスカードの設定
  • インデックスカードの調整

インデックスカードを設定する

cocoonのデフォルトでは
このようなインデックスカードになってます。

このなんとも殺風景なインデックスカードを
キレイにしていきましょう!

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

インデックスカードの設定

やり方
  • wordpressメニュー
  • cocoon設定
  • インデックス

上から順番に設定していこう!

  • フロントページタイプ
    ・サンプル画像確認して
     自身のサイトに合う好きなものを選択
  • 表示カテゴリー
    ・表示させたいカテゴリーを✓
  • 並び順
    ・投稿日に✓

  • カードタイプ
    ・縦型カード2列
  • スマホ端末で縦型&タイル型の
    エントリーカードを1カラムにするに✓
  • 枠線の表示
    ・カードの枠線を表示する
     のチェックを外す

  • 投稿関連情報の表示
    ・スニペット(抜粋)の表示に✓
    ・スマホ端末でスニペットを表示
     (480px以下)に✓
    ・投稿日の表示に✓
    ・更新日が存在しない場合は
     投稿日を表示に✓
    ・更新日の表示に✓
  • 設定が完了したら
    「変更をまとめて保存」を押す

保存せずにページを変えると
変更が反映されないため
忘れずに保存をしておきましょう!

【コピペでOK!】インデックスカードのデザインをCSSで調整する

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

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

スタイルシート用追加CSS

/************************************
**** インデックス
************************************/
a.entry-card-wrap.a-wrap.border-element.cf{/*カード本体*/
padding:0 0 .5em;
border-radius:10px;
width:48%;
margin-bottom:2em;
}
a.entry-card-wrap.a-wrap:hover {
transform: translateY(-1px);
transition: all .3s;
background-color: #fff;
}
figure.entry-card-thumb.card-thumb.e-card-thumb{/*サムネイル大きさ*/
max-height:150px;
border-radius:10px 10px 0 0/ 10px 10px 0 0;
overflow:hidden;
display: flex;/*位置をflexで中心に*/
justify-content: center;
align-items: center;
}
.e-card-thumb .cat-label{/*カテゴリラベルを右に寄せる*/
margin-left:.8em;
}
@media screen and (max-width: 1100px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:120px;
}}
@media screen and (max-width: 1023px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:180px;
}}
@media screen and (max-width: 900px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:160px;
}}
@media screen and (max-width: 750px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:130px;
}}
@media screen and (max-width: 600px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:250px;
}
a.entry-card-wrap.a-wrap.border-element.cf{/*画面幅600pxまで、1カラムにする*/
margin:.5em 1em!important;
}
.ect-vertical-card .entry-card-wrap {
width: 95%!important;
}
}
@media screen and (max-width: 480px){/*カード本体*/
.e-card-thumb .cat-label{/*カテゴリラベルを右に寄せる*/
margin-left:1em;
}}
@media screen and (max-width: 1023px){/*画面幅1023未満はカード本体に影を表示*/
div#list a {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}
@media screen and (min-width: 601px) and (max-width: 834px){/*通常記事本文の周囲の空白にも影響している*/
div#content.content.cf{
margin:1em;
}}
h2.entry-card-title.card-title.e-card-title{/*カードタイトル*/
font-size:18px;
color:#7b7b7b;
font-weight:bold;
text-align:center;
line-height:1.8em;
margin-top:3em;
margin-bottom:1em;
padding: 0 1.5em 0;
}
.entry-card-snippet.card-snippet.e-card-snippet{/*スニペット*/
font-size:14px;
color:#7b7b7b;
text-align:center;
border-top:3px dotted #90C31F;
line-height:1.8em;
padding-top:0.6em;
margin-left:2em;
margin-right:2em;
margin-bottom:4em;
max-height:20em;
}
@media (max-width:834px){
h2.entry-card-title.card-title.e-card-title{/*カードタイトル*/
font-size: 1.15em;
font-weight:bold;
line-height:1.7em;
padding: 1.5em .8em 1em;
margin:0;
}
.entry-card-snippet.card-snippet.e-card-snippet{/*スニペット*/
font-size:13px;
text-align:center;
border-top:3px dotted #79c06e;
line-height:1.8em;
padding:1em 0.5em 0;
margin: 0 1em 1.5em;
}
main.main, div.sidebar {/*モバイル表示などの本文全体の周りの空白にも影響している*/
padding:0;
}
}
a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{/*日付・更新日*/
margin-right:1.5em!important;
color:#7b7b7b;
font-size:.86em;
}
.eye-catch .cat-label, .cat-label{/*カテゴリラベル全体デザイン*/
font-size:.7em;
border-radius:10px;
margin:0.5em;
padding:0 0.5em 0;
background-color:#90C31F;
color:#fff;
}
div.admin-pv{/*閲覧数を非表示*/
display:none;
}

色を変更したいとき

■インデックスカードの線の色

.entry-card-snippet.card-snippet.e-card-snippet{/スニペット/
font-size:14px;
color:#7b7b7b;
text-align:center;
border-top:3px dotted #90C31F;

■インデックスカード左上の
 ラベルの色

.eye-catch .cat-label, .cat-label{/カテゴリラベル全体デザイン/
font-size:.7em;
border-radius:10px;
margin:0.5em;
padding:0 0.5em 0;
background-color:#90C31F;
color:#fff;

上の色番号を変更することで
インデックスカードとラベルの色を
変更することができます。

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

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

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

変更したインデックスカードが
スマホ・PC両方に反映しているか
確認をします。

インデックスカードの表示が変わって
いれば設定は完了です。

インデックスカードに表示された記事の
サムネイルサイズが揃っていないと

変更後に画像高さがバラバラになります。

バラバラになってしまった場合は
サムネイル画像のサイズを変更してください。

インデックスカードの幅を変更したい場合

やり方
  • wordpressメニュー
  • cocoon設定
  • カラム

やり方
  • コンテンツ幅
  • コンテンツ余白幅

この2つの数値を変更し
スマホ・PCで確認しながら微調整することで
インデックスカード幅を変更します。

※スマホ表示がメインの方は
 あまり気にしなくて平気です。

まとめ

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

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

今回はインデックスカードについて
紹介してきました。

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

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

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

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

コメント

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