こんにちは、yujiです！WordPressで立ち上げたブログを自分なりにデザインしています。
「ブログ初心者なりに、ブログのおすすめカードをおしゃれにデザインしてみたい。」
WordPressのテーマの多くは、隅々まで洗練されたデザインが行き届いていて本当に使いやすいものばかりです。
しかし多くの人が同じテーマを使っているので、どうしてもブログの雰囲気が似てきてしまいます。
そんな時、WordPressの醍醐味として、ちょっとした色味や幅の変更など、自分の好みに合わせてデザインすることができます！
ということで、この記事ではブログ初心者でもできる『おすすめカード』のカスタマイズを紹介します。
『おすすめカード』の完成形はこちらです。
このページにも使われているとおり、おすすめカードの完成形はコチラです。
✔ PC表示
✔ モバイル表示
以上のような『おすすめカード』について、コピペでできるカスタマイズを紹介します。デザインは、モバイル表示にも対応しています。
※このブログはWordPress/Cocoonをベースにカスタマイズしています。
おすすめカードの設定方法
おすすめカード設定
メニューの「Cocoon設定」から「おすすめカード」を開きます。
✔ チェックを入れる箇所
・画像中央に白文字タイトル
・おすすめカード毎に余白を設ける
・おすすめカードエリアの左右に余白を設ける
このように、各項目にチェックを入れます。
※おすすめカードはメニューに対応しているので、表示したいページをあらかじめメニュー化しておきましょう。
画像設定
メニューの「Cocoon設定」から「画像」を開きます。
「Retinaディスプレイ」にチェックを入れます。
以上で設定は完了です。
コードはこちらです。
「外観」の「テーマエディター」から「style.css」を開き、以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。
✔ style.cssにコピペするコード
/*——————-
おすすめカード
———————-*/
div#recommended-in.recommended-in.wrap.cf{/*おすすめカード上にスキマをつくる*/
margin-top: 20px;
}
div#content.content.cf{/*メインカラムの上５ミリ、おすすめカードの↓*/
margin-top:0;
}
.widget-entry-cards.large-thumb-on .card-content{/*写真の上に若干黒かかってる部分*/
background: none;
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{/*影*//*retina対応にしたら余白ができたので、高さ上限設定*/
border-radius:10px!important;
margin-top:1.6em;
margin-bottom:2.3em;
background-color:#f7f7f7;
}
@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:70px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.2)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
div.navi-entry-card-title.widget-entry-card-title.card-title{/*おすすめカード上の文字*/
color:#565656;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@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;
}
}
main#main.main{/*新着記事の真上空白をへらす*/
margin:0;
}
.recommended.rcs-center-white-title .card-content {
background-color: rgba(51, 51, 51, 0.2);
}
コピペができたら「ファイルを更新」をクリックします。
これで『おすすめカード』のカスタマイズは完了です！
この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました！
・【その画像の著作権、大丈夫ですか？】僕がおすすめする『安心のフリー素材サイト』9選！
・【Twitterデータ公開してます】14日間でフォロワーを2,000人増やすノウハウ。
・【2020年最新版】キャッシュレス初心者向け、おすすめのQRコード決済4選！
・【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！
コメント