デザイナーが教える初心者のための超簡単【おすすめカード】設定方法

最近、ブログ始めたけどコードとかわからなくて、サイトのデザインがデフォルトのままだからちょっといじってみたいなぁ、、、
なかなかサイトのデザインが決まらなくて悩むなぁ、、、

こんな疑問を解決します。

本記事の内容
  • デザイナーがおすすめするサイトのデザイン方法
  • おすすめカードをカスタマイズする方法

ブログのデザインを考えるようになるといろんなところいじりたくなりますよね。

今回はこの【初心者のための超簡単「おすすめカード」設定方法】を解説していきます。

この記事で設定するとこんなデザインのおすすめカードが設定できます↓

この記事では初心者の人やブログのデザインに悩んでいる人にむけて、僕が初心者のときに悩んでいた事を中心に書いていきます。

学生時代に4年間学んだデザインの知見を生かしたサイトデザインを発信していきます。

この表示設定は初心者でも簡単にカスタマイズできるので、ぜひ自分のブログにも取り入れてほしいと思います。

デザイナーが教える初心者のための超簡単【おすすめカード】設定方法

このブログでも愛用中のワードプレステーマ【cocoon】におけるおすすめカードの設定方法を解説していきます。

やはり、おすすめカードがあったほうが見やすいですね。ユーザーが自分のサイトに来たときに迷子にならないための目印にもなります。

これはプログラミングができない・コードが読めない初心者でも超簡単につけることができるので、その方法を順番に解説します。

おすすめカードとは?

おすすめカードとは、トップページにブログを構成するカテゴリーや読んでほしい記事を画像(カード)として掲載することです。

PC版

モバイル版

おすすめカードの手順はたったの4つ

流れから説明していくとこんな感じです↓

大まかな流れ
  • おすすめカード用にメニューを作成する
  • デザインを整える(ここ重要)

手順はたったの4つです。

手順
  • 手順1:外観からおすすめカード用のメニューを作成
  • 手順2:おすすめカードの設定
  • 手順3:画像選ぶ(デザイン重視)
  • 手順4:スタイルシートにコピペ

では一つずつ解説していきます。

手順1:外観からおすすめカード用のメニューを作成

「外観」→「メニュー」をクリックします↓

新しいメニューを追加します↓

おすすめカード(分かれば何でもいい)を入力し、メニューを作成をクリックします↓

ここまでで「おすすめカード」のメニューは完成です。

手順2:おすすめカードの設定

次に「おすすめカード」の設定をしていきます。

おすすめカードには「記事」「カテゴリー」を埋め込むことができます↓

ここで、おすすめカードに「記事」がいいのか「カテゴリー」がいいのか迷うと思います。

「記事」を埋め込んだ方がいい人

始めたばかりの人は「記事」を埋め込んで、その記事のPVを徹底的に増やす方がいいと思います。

カテゴリー」を埋め込んだ方がいい人

記事が20,30記事溜まってきた人は、読者が迷子にならないように「カテゴリー」を埋め込むほうがいいと思います。

①記事編

「記事」を埋め込む手順を解説します。

左の投稿から投稿した記事を選択して、メニューに追加をクリックします↓

メニューに追加した記事の名前(おすすめカードに出てくる名前)を変更するときは、「ナビゲーションラベル」で名前を編集できます↓

埋め込みたい記事を選択してメニューに追加したら、確認してメニューを保存をクリックします↓

これでおすすめカードの設定は完了です。

②カテゴリー編

次に「カテゴリー」を埋め込む手順を解説します。

左の投稿から投稿したカテゴリーを選択して、メニューに追加をクリックします↓

メニューに追加したカテゴリーの名前(おすすめカードに出てくる名前)を変更するときは、「ナビゲーションラベル」で名前を編集できます↓

埋め込みたいカテゴリーを選択してメニューに追加したら、確認してメニューを保存をクリックします↓

これでおすすめカードの設定は完了です。

手順3:画像選ぶ(デザイン重視)

次に画像の設定です。

「Cocoon設定」→「Cocoon設定」をクリックします↓

「おすすめカード」をクリックします↓

「メニュー選択」で先程設定した「おすすめカード」を選択します。

「表示スタイル」はお好みのスタイルを選定して見てください。
上のプレビューも見れるので、試してみるのもいいですね。

次に「画像」をクリックします↓

下にスクロールすると「Retinaディスプレイ」の設定がでます。これはチェックを入れましょう↓

これで画像の設定は完了です。

手順4:スタイルシートにコピペ

最後にスタイルシートにコードをコピペしていきます。

「外観」→「テーマエディター」をクリックします↓

「子テーマ」にしてスタイルシートに以下のコードをコピペしてください↓

以下がコードになります↓

このコードをコピーしてスタイルシートにペーストしてください。

/*——————-
おすすめカード
———————-*/
div#recommended-in.recommended-in.wrap.cf{/*おすすめカード上にスキマをつくる*/
margin-top: 20px;
}
div#content.content.cf{/*メインカラムの上5ミリ、おすすめカードの↓*/
margin-top:0;
}
div.navi-entry-card.widget-entry-card.e-card.cf{
opacity:.8;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
opacity: 1;
}
.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;
}
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,.2)!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;
}
}
main#main.main{/*新着記事の真上空白をへらす*/
margin:0;
}
.recommended.rcs-center-white-title .card-content {
background-color: rgba(51, 51, 51, 0.2);
}

コピペしたら最後に「ファイルを更新」をクリックしてください↓

これでおすすめカードの設定は完了です。

一旦ブログ画面にもどって確認してみましょう。

PC↓

モバイル↓

このように表示されていたらオッケーです。

いかがでしたか?
初心者の方でも簡単にできたとおもいます。

このようにブログではブログのカスタマイズ方法を発信しています。
カスタマイズしていくときにどんなデザインにしていけばいいのかについても今後記事を増やしていきます。

他にも「グローバルメニューにアイコンを表示する方法」などいろんなカスタマイズ方法を投稿しています。
興味のある方は以下の記事からどうぞ!

最後まで読んで頂いてありがとうございます。

当ブログではビジネスに関しても多く発信しています。興味のある方は以下の記事からどうぞ!

【2020年8月最新】MUPって入った方がいい?

なぜビジネスで失敗するのか【経営拡大に最低条件の仕組み化を解説】

サラリーマンが起業前に知っておくべき【価格設定】の考え方

カフェではコーヒーを売らない方がいい?ビジネス初心者が戸惑う経営の基礎

お宝物件選びの方がわからん!サラリーマンが戸惑う不動産屋での第一歩

この記事を書いた人

アバター

takuma

【経歴】
●1997年年生まれ、岐阜県出身。たくまと言います。

●高校3年間は成績学内1位。その後、名古屋の名城大学を卒業

●2020年4月に東証一部上場企業に新卒入社し、webデザインとコンテンツ販売で副業をしています。

●webデザイン / コンテンツ販売 / ブログなどで月6桁達成。