ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑤おすすめカードを整えるCSS】

ブログ

こんにちは
ニワトリです

『ヘッダーのメニュー
 を見やすくオシャレにしたい・・・』

『ヘッダーにおすすめ記事
 入れてきれいに並べたい・・・』

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

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

私もそのひとりです!!

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

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

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

今回はおすすめカードについて
紹介をしていきますね!

当ブログのおすすめカードは
このようになっています。

パソコン
スマホ

アピールエリアの下にあるのが
おすすめカードです!

訪問者の方に今おすすめしたい記事を
画像付きで表示することができます!

今回のカスタマイズ
  • おすすめカードの編集
  • おすすめカードの設定
  • おすすめカードの調整

おすすめカードを設定する

設定方法
  • おすすめカードに表示する
    メニューを作成する
  • おすすめカードを設定する
  • 【コピペでOK!】デザインを調整する

おすすめカードに表示するメニューを作成する

やり方
  • wordpressメニュー
  • 外観
  • メニュー
  • 新しいメニューを作成しましょう
    を押します

やり方
  • メニュー名を入力
  • 右下「メニューを作成」を押す

やり方
  • メニュー項目を追加の下にある
    「投稿」横の▼を押す
  • 「すべて表示」のタブを押す
  • おすすめカードに表示したい
    おすすめ記事を4つ選び☑
    ※4つが良いです
     2つだとパソコンで見たときに寂しい
     6つだとスマホで見たときにウザいです
  • 「メニューに追加」を押す
  • 右の箱に選択した4つの記事が移動
    したら右下の「メニューを保存」を押す

やり方
  • 表示されるラベルを編集する場合は
    投稿横の▼を押します
  • ナビゲーションラベルに
    表示したい言葉を入力します
    ここに入力した文字が
    おすすめカードに表示されます
  • 上から並んでる順で
    左から順番に表示されます
  • 順番を変更したい場合は
    変更したい記事をドラッグします
    または移動の横にある
    ひとつ上へ/ひとつ下へで移動させます
  • 編集が完了したら
    「メニューを保存」を押します

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

おすすめカードの設定をする

やり方
  • wordpressメニュー
  • cocoon設定
  • おすすめカード

やり方
  • 全ページで表示
    (全てのページで表示させたい場合)
    フロントページのみ表示
    (TOPページのみで表示させたい場合)
    ※お好きな方を選択してください
  • メニュー選択
    ・先ほど作成したメニューを選択
  • 表示スタイル
    ・画像中央に白文字タイトル
  • カード余白
    ・おすすめカード毎に余白を設ける
  • カードエリア左右余白
    ・おすすめカードエリアの左右に余白を設ける

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

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

おすすめカードの画像設定をする

やり方
  • wordpressメニュー
  • cocoon設定
  • 画像

やり方
  • サムネイルをRetinaディスプレイ対応にする
    に☑を入れる
  • 「変更をまとめて保存」を押す

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

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

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

スタイルシート用追加CSS

/*——————-
おすすめカード
———————-*/
div#recommended-in.recommended-in.wrap.cf{/*おすすめカード上にスキマをつくる*/
margin-top: 20px;
max-height:220px;
}
@media screen and (min-width: 1024px){
div#recommended-in.recommended-in.wrap.cf{/*おすすめカード左右にスキマをつくる*/
padding:0 2em;
}}
div#content.content.cf{/*メインカラムの上5ミリ、おすすめカードの↓*/
margin-top:0;
}
.widget-entry-cards .a-wrap:hover {
transform: translateY(-1px);
transition: all .3s;
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{
opacity:.8;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content {
transition: all .1s;
opacity: 1;
}
.widget-entry-cards.large-thumb-on .card-content{/*写真の上に若干黒かかってる*/
background: rgba(151, 151, 151, 0);
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{/*影*//*retina対応にしたら余白ができたので、高さ上限設定*/
border-radius:10px!important;
margin:1em .5em;
background-color:#EFF1F5;/*Cocoon設定の「サイト背景色」に合わせる*/
}
div.navi-entry-card-title.widget-entry-card-title.card-title{/*おすすめカード上の文字*/
color:#333333;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@media (max-width:834px){
a.navi-entry-card-link.widget-entry-card-link.a-wrap{/*影*//*retina対応にしたら余白ができたので、高さ上限設定*/
margin:.3em 0em;
}
div.navi-entry-card.widget-entry-card.e-card.cf{/*高さ上限設定*/
border-radius:10px!important;
overflow:hidden;
max-height:100px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
@media (max-width:834px){
div.navi-entry-card-title.widget-entry-card-title.card-title{/*おすすめカード上の文字*/
font-size:.6em;
padding: .5em;
}
div#recommended-in.recommended-in.wrap.cf{/*おすすめカードサイドにスキマをつくる*/
margin: .7em .2em .3em;
}
.widget-entry-cards.large-thumb-on .card-content{/*写真の上に若干黒かかってる*/
background: rgba(151, 151, 151, 0.2);
}
}
main#main.main{/*新着記事の真上空白をへらす*/
margin:0;
}

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

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

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

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

選択した4つの記事がキレイに並んで
いれば設定は完了です。

おすすめカードに選んだ記事の
サムネイルサイズが揃っていないと

並べた後に画像高さがバラバラになります。

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

まとめ

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

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

今回はおすすめカードについて
紹介してきました。

次回はインデックスカードについて
記事をまとめていきますね!

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

ニワトリでした。

ニワトリ
ニワトリ

Twitterやってます。

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

コメント

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