こんにちは、yujiです！このブログでは、WordPressを使ったブログ運営について詳しくまとめています。
「ブログ初心者なりに、トップページのインデックスカードをおしゃれにデザインしてみたい。」
この記事では、以上のようなブログデザインについての質問に答えます。
このブログではWordPressテーマのCocoonを使っていますが『トップページのインデックスカード』は以下のようなデザインにしています。
以前からお問い合わせページや、ツイッターのDMで「インデックスカードのカスタマイズを知りたい」との要望が多くいただいていました。
そこで今回、当ブログのオリジナルデザインを公開することにしました！
この記事にまとめた方法で、以上のようなCocoonのインデックスカードを再現できるので、是非参考にしていただけたらと思います。
✔Amazaonアソシエイトに挑戦中の方にお知らせ。
2020年3月以降、Amazaonアソシエイト審査方法が変更されました。この変更についてはまだネット上に情報が不足しているので、ブログをはじめたてで混乱している方もいると思います。
変更点の詳細とその攻略法を、以下の記事に詳しくまとめました。
▶【2020年最新攻略法】Amazonアソシエイトの審査方法が変わる！
▶【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較！
▶【大変だけど、ちゃんと稼げる】ブログ収益化方法をすべて解説。
▶【Audible】月額料50%OFFのお得な使い方を公開します。
インデックスカードの設定方法
Cocoonのデフォルトではこのようなシンプルなデザインになっています。
インデックス設定
WordPressメニューから「Cocoon設定」を開きます。
「Cocoon設定」から「インデックス」タブを選択し、上から順に設定していきます。
✔リスト設定
カードタイプ
・縦型カード2列
・スマホ端末で縦型＆タイル型のエントリーカードを1カラムにする
枠線の表示
・カードの枠線のチェックを外す
✔リスト設定
投稿関連情報の表示
・スニペット（抜粋）の表示
・スマホ端末でスニペットを表示（480px以下）
・投稿日の表示
・更新日が存在しない場合は投稿日を表示
・更新日の表示
その他はデフォルトでOKです。
このように設定できたら「変更をまとめて保存」をクリックします。
これで縦型カード2列表示になりました。
スタイルシートにコードをコピペします。
「外観」から「テーマエディター」に進み「style.css」を開きます。
スタイルシートに以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。
✔スタイルシートに入力するときの注意点
・編集前に必ずスタイルシートのバックアップを取りましょう。
・編集するテーマが「CocoonChild」になっていることを確かめましょう。
・「@charset “UTF-8”;」から始まる最初から入力されている部分には触れないようにしましょう。
スタイルシートにコピペするコードはこちらです。
✔コード
/************************************
**** インデックス
************************************/
a.entry-card-wrap.a-wrap.border-element.cf{/*カード本体*/
padding:0 0 .5em;
border-radius:10px;
width:48%;
margin-bottom:2em;
}
figure.entry-card-thumb.card-thumb.e-card-thumb{/*サムネイル大きさ・位置をflexで中心に*/
max-height:150px;
border-radius:10px 10px 0 0/ 10px 10px 0 0;
overflow:hidden;
display: 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;
}}
@media screen and (max-width: 600px){/*画面幅600pxまで、1カラムにする*/
a.entry-card-wrap.a-wrap.border-element.cf{
margin:.5em 1em!important;
}
.ect-vertical-card .entry-card-wrap {
width: 95%!important;
}
figure.entry-card-thumb.card-thumb.e-card-thumb{/*サムネイル大きさ・位置をflexで中心に*/
max-height:250px;
}
}
@media screen and (max-width: 480px){/*カード本体*/
a.entry-card-wrap.a-wrap.border-element.cf{
margin:.5em 1em!important;
border-radius:10px;
}
.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;
}
コピペができたら「ファイルを更新」をクリックします。
これで『インデックスカード』のカスタマイズは完了です！
デザインを確認します。
このように表示されていればOKです！
このブログでは、以上のようなWordPress/Cocoonを使ったブログでのオリジナルカスタマイズを他にもたくさん紹介しています。
すべてコピペでOKなので、初心者の方にもおすすめです。興味のある方は以下の記事からどうぞ！
▶【コピペでOK！】ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル【WordPress】
この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました！
▶【大変だけど、ちゃんと稼げる】ブログ収益化方法をすべて解説。
▶【その画像の著作権、大丈夫ですか？】僕がおすすめする『安心のフリー素材サイト』9選！
▶【利用者が増えている理由とは？】『もしもアフィリエイト』を実際に使ってみた感想【口コミ・評判・メリットまとめ】
▶【もしもアフィリエイト】初心者でもできる『かんたんリンク』のおしゃれなカスタマイズ【コピペでOK！】
コメント