見ていただきありがとうございます。ぽぽです。
Cocoonのブログカードで、こんなところで止まっていませんか。
- カードの画像が小さい
- 大きさを変えたいのに、設定が見つからない
- 結局、文字のリンクで済ませている
※ブログカードは、ほかの記事を「画像＋タイトル」の箱で紹介する部品です。この記事の下のほうにもあります。
私も、ここで止まった側です。
スケートボードのブログはCocoonで書いています。
カードの大きさがうまく設定できず、文字のリンクで妥協しました😇
先に答えを書いておくと、こうです。
| やりたいこと | Cocoonで |
|---|---|
| 自分の記事をカードで出す | |
| 画像を左・右に置く | |
| 画像の縦横の比率を変える | |
| カードや画像の大きさを変える |
ということで、私のブログの実物から順に書いていきます。
- 過去の自分：ブログカードという言葉を知らず、文字のリンクで済ませていた
- いま：SWELLでブログ4年目（スケートボードのブログはCocoonのまま）
私は「ブログカード」という言葉を知らなかった
正直に書くと、この記事を書くまで言葉を知りませんでした。
カードの画面を見て、やっと「ああ、これか」となったくらいです。
画像があると、押したくなりますよね。
文字だけのリンクより、どんな記事かがひと目でわかります。
スケートボードのブログは、文字リンクが195本
今回あらためて、スケートボードのブログを数えてみます。
| 数えたもの | 数 |
|---|---|
| 記事 | 66本 |
| ブログカード | 2つ（どちらも外のサイト） |
| 自分の記事へのブログカード | 0 |
| 自分の記事への文字リンク | 59記事に195本 |
文字リンクは、こんな形です。
＞＞初心者向け１５０００円以下スケートボード購入方法！！
66本も書いて、自分の記事をカードで紹介したことは一度もなし。
たぶん、やり方を知らなかったんですよね。
ちなみに犬のブログでは、カードを使っていました。
URLを1行貼るやり方のカードが、15記事に25個あります。
Cocoonの設定でできることは5つ
Cocoon設定には、ブログカードの画面が2つあります。
「内部」と「外部」です。
- 内部＝同じブログの中の、ほかの記事を紹介するカード
- 外部＝ほかのサイト（別のブログやYouTubeなど）を紹介するカード
私のスケボーのブログにあるカード2つは、どちらも「外部」です。
1つは自分の犬のブログ、もう1つはYouTubeへのカードでした。
自分のブログでも、別のサイトなら「外部」になるんですね。
設定の項目は、Cocoonの公式が公開している最新のプログラムで確かめています。
見本の画像は、私のスケートボードのブログのカードです。手元で設定だけ変えて表示しました。
① ブログカードを有効にする
自分の記事のURLを1行貼ると、カードになります。
② サムネイルの位置
画像を「左側」「右側」から選べます。
③ 日付
「なし」「投稿日」「更新日」から選べます。
④ 画像の縦横の比率
はじめは16:9です。4:3や1:1（正方形）などにも変えられます。
⑤ 新しいタブで開く
カードを押したとき、別のタブで開くかどうかを選べます。
見た目は変わりません。
外のサイトのカードも、同じような項目です。
でも、どの画面にも「大きさ」の項目はありません。
設定画面で変えられない部分があるのは、ブログカードだけではありません。
前に調べた見出しとサイドバーも、同じでした。
Cocoonでは、見た目の細かいところはCSSを足して変えることが多いんですね。
見出しの話は、こちらです。
サイドバーの話は、こちら。
画像サイズは160pxで固定されている
では、大きさはどう決まっているのか。
Cocoonの見た目を決めるファイル（CSS）を読むと、こうなっています。
| 場所 | パソコン | スマホ（画面の幅834px以下） |
|---|---|---|
| カード全体の幅 | 本文の90% | 本文の100% |
| 画像の幅 | 160px | 120px |
| 文字の部分の高さ | 最大140px | 最大120px |
画像の幅は、数字で決め打ちです。
だから設定画面を探しても、見つからないわけです。
私が「大きさがうまく設定できない」と感じたのは、ここでした。
設定がないので、うまくできなくて当然だったんですね。
大きさを変えるならCSSを足す
大きさを変えたいなら、CSSを書き足します。
| 押す場所 | どうなるか |
|---|---|
| 外観 → カスタマイズ → 追加CSS | 書いたCSSが、すぐ画面に反映される |
たとえば、パソコンで画像を1.5倍（240px）にするなら、こうです。
@media screen and (min-width: 835px) {
.blogcard-thumbnail { width: 240px; }
.blogcard-content { margin-left: 250px; max-height: none; }
}- 1行目＝パソコンの画面だけに効かせる
- 2行目＝画像の幅を240pxにする
- 3行目＝文字を画像の横にずらす。高さの上限も外す
これは、画像が「左側」（はじめの設定）のときの例です。
スマホの見た目は変わりません。
反映されないときは、ブラウザの再読み込みを試すとよいと言われています。
私が妥協した理由
当時の私は、大きさを変えようとして止まりました。
設定画面に項目がない。
CSSは、わからない。
それで、文字リンクの「＞＞」で済ませています。
195本も書いたので、慣れてしまったのもありますね。
今回調べ直すと、CSSは数行です。
ただ、当時の私に書けたかというと、正直あやしいです。
いまのブログ（SWELL）のブログカード
いまのブログは、SWELLで書いています。
ブログカードは、22記事のうち16記事で使っています。
SWELLにして変わったのは、ひと言でいうと「簡単」。
ブロックを選んで、紹介したい記事を選ぶだけです。
CocoonとSWELLの画面の違いは、こちらで並べています。
SWELLを買うまで迷った話は、こちら。
ほかの場所のカスタマイズは、こちらにまとめています。
まとめ
- ブログカードは、ほかの記事を「画像＋タイトル」で紹介する部品
- Cocoonでは、自分の記事のURLを1行貼るとカードになる
- 設定できるのは、画像の位置・比率・日付・開き方
- 大きさの設定はない（画像はパソコン160px・スマホ120pxで固定）
- 大きさを変えるなら、追加CSSに数行
- 私は文字リンク195本で、妥協しています
Cocoonで止まっているなら、まずはURLを1行貼るところからで大丈夫ですよ。
コメント