SWELLのブログカードをカスタマイズする方法と7つのコツ

ブログカードをもっとおしゃれにしたいのに、Swellの設定画面やCSSを前に手が止まっていないでしょうか。

この記事では、Swellのブログカードカスタマイズの全体像を整理しつつ、なるべく失敗しにくい順番で手を動かすための考え方や手順をまとめました。

先に結論を一言でまとめると、「まずは管理画面で土台を整えたうえで、ポイントを絞ってシンプルなCSSを少し足す」のが、一番安全で効果が出やすいブログカードカスタマイズの進め方です。

Swellでブログカードをカスタマイズする前に知っておきたい基本

Swellのブログカードの種類と役割

Swellでは、リンクを見やすく表示するためのスタイルがいくつか用意されています。いわゆる「ブログカード」と呼ばれるものも、このリンク表示のひとつです。

種類	見た目の特徴	向いている使い方
テキストリンク	文字だけのシンプルなリンク	文中でさらっと紹介したいとき
スリムカード	画像が小さめで横長、スッキリしたカード	箇条書きの中で複数記事を並べたいとき
ブログカード	画像・タイトル・説明がしっかり表示される	イチ押しの記事を目立たせたいとき

ざっくり言うと、テキストリンクは「邪魔をしない案内板」、スリムカードは「一覧で並べる用のカード」、ブログカードは「しっかり読んでほしい記事への入り口」といった役割をイメージしてもらえると分かりやすいと思います。この記事では主に、スリムカードとブログカードまわりのカスタマイズに焦点を当てていきます。

ブログカードを使うメリット

ブログカードを使うと、普通のテキストリンクだけのときと比べて、読者にとって情報がグッと拾いやすくなります。

• サムネイル画像で記事の雰囲気が一瞬で伝わる
• タイトルと説明文で「クリックした先で何が分かるか」がイメージしやすい
• カード状に囲まれるので、本文との区切りがついて視線が止まりやすい

結果として、内部リンクのクリック率が上がり、関連記事を読んでもらえる回数も増えます。内部リンクをていねいに貼ることは、多くのブロガーがSEO面でも重要だと触れているポイントなので、ブログカードの整え方を知っておく価値は大きいです。

カスタマイズの基本方針

「カスタマイズ」と聞くと、個性的な見た目を追い求めたくなりますが、ブログカードはあくまで記事へ誘導するための案内板です。デザインだけが主役になってしまうと、本来読んでほしい本文がかすんでしまいかねません。

私が意識している基本方針は次の通りです。

このあたりを頭の片隅に置きながら、Swellのブログカードを整えていくと、見た目と読みやすさ、どちらもバランスの良い形に近づいていきます。

Swellブログカードの作り方3パターン

関連記事ブロックで内部リンクブログカードを作る

もっともよく使うのが、「関連記事ブロック」を使って内部リンクや外部リンクをカード化する方法です。ブロックエディターに慣れている人なら、このやり方が一番しっくりくると思います。

手順	やること	ポイント
1	ブロックの追加から「関連記事ブロック」を選ぶ	ブロック検索で「関連記事」と入れると探しやすいです。
2	内部リンクなら記事タイトル検索や投稿IDで記事を指定	自分のブログ内の記事を選びます。
3	外部リンクならURLをペーストして登録	相手サイトにOGPが設定されているときれいに表示されます。
4	表示タイプ（ブログカード・スリム・テキスト）を選ぶ	迷うときは、まずブログカードから試すのがおすすめです。
5	キャプションや別タブ設定などを調整	「あわせて読みたい」などの文言も変更できます。

私の場合は、重要な内部リンクにはブログカードを使い、外部リンクはスリムカードかテキストリンクにすることが多いです。外部リンクまで大きなカードにしてしまうと、読者から見ると「どこを押せば自分のブログ内を回遊できるのか」が分かりづらくなるためです。

ショートコード「post_link」でブログカードを出す

クラシックエディターを使っている人や、文章の途中にカードをちょこんと挟みたい場合は、ショートコードを使う方法もあります。Swellでは、投稿IDやURLを指定してカードを出せるショートコードが用意されています。

文章の中にショートコードを書き込んでおくと、その部分がカードに変わるイメージです。キャプションの文言を変えたり、別タブで開くように設定したりもできます。具体的な書き方やオプションは、Swellのマニュアルや管理画面の説明を一度確認しておくと安心です。

「関連記事はこちら」のように、ひとつだけ目立たせたいリンクがあるときは、ショートコード方式のほうがレイアウトの自由度が高く感じるはずです。

URL自動変換でブログカード化する

Swellには、段落にURLをそのまま貼るだけで、自動的にブログカードに変換してくれる機能もあります。わざわざ関連記事ブロックを挿入しなくても、URLの行がカードに変わってくれるので、とても手軽です。

• 段落ブロックにリンク先のURLだけを1行で貼る
• エンターキーで確定すると、カード表示に変わる

他テーマからSwellに乗り換えたときに、テキストで残っているURLをカードに変えたい場合にも、この機能が役立ちます。ただし、外部サイトの場合は、相手側でOGP情報が設定されていないと画像やタイトルが出ないことがあります。このときはこちらの設定では対処できないので、そのサイトにリンクするときはテキストリンクに切り替えるなど、柔軟に対応していきましょう。

管理画面だけでできるSwellブログカードのカスタマイズ

ブログカードのデザインタイプ（タイプ1〜3）を切り替える

Swellでは、ブログカードの見た目をいくつかのタイプから選べるようになっています。設定画面でタイプを切り替えるだけで、サイト全体のカードの雰囲気を一気に変えられます。

タイプ	雰囲気のイメージ	向いているサイト例
1	標準的でバランスが良い	雑記ブログ・特化ブログ問わず使いやすい
2	線が細めでスッキリ、ミニマル	シンプルなデザインが好きな人、文字多めの記事
3	枠がはっきりしていて、カード感が強い	レビュー記事や商品紹介が多いブログ

迷ったときは、まずタイプ1で全体の雰囲気を整え、そのあとタイプ2や3も順番に試してみると、自分のブログに合うデザインが見つかりやすいです。いきなり装飾が強いタイプを選ぶと、本文よりカードのほうが主張してしまうこともあるので、最初は控えめなものから試していきましょう。

画像・抜粋・キャプションを調整する

関連記事ブロックでは、カードの中に表示する要素を細かく切り替えられます。ここをうまく使うと、「じっくり読んでほしいリンク」と「軽く紹介したいリンク」を見た目で分けることができます。

項目	できること	おすすめの使い方
アイキャッチ画像の表示	画像を表示するかどうかを切り替え	重要な記事は表示、軽い補足リンクは非表示にする
抜粋文の表示	説明文を出すかどうかを切り替え	長文記事では、抜粋ありのほうが親切
キャプション	「あわせて読みたい」などの文言を変更	記事の流れに合わせて、自然な日本語に変える
別タブで開く	同じタブか、新しいタブかを選べる	外部リンクは別タブ、内部リンクは同じタブが無難

たとえば、本気で読んでほしい関連記事には、画像と抜粋文を表示して、キャプションも丁寧に整えます。一方で、補足程度の外部リンクはスリムカードにして抜粋を省略するなど、役割ごとに見せ方を変えると、ページ全体がグッと読みやすくなります。

内部リンクと外部リンクで見た目を変えておく

Swellでは、内部リンク用と外部リンク用で、ブログカードのタイプを別々に設定できます。これを活用すると、読者から見て「ここを押すと自分のブログ内を回遊できる」「ここは外部サイト」という違いが直感的に伝わります。

• 内部リンク：ブログカードやスリムカードでしっかり目立たせる
• 外部リンク：スリムカードやテキストリンクで控えめに見せる

アフィリエイトリンクや外部サービスへのリンクも、内部リンクとまったく同じ見た目にしてしまうと、かえって読者が戸惑うことがあります。あらかじめ「内部リンクはこのデザイン」「外部リンクはこのデザイン」というゆるいルールを決めておくと、長期的に見て運用しやすくなります。

CSSでSwellブログカードをおしゃれにカスタマイズする方法

CSSを追加する場所を決める

まずは、どこにCSSを書いていくか決めておきましょう。いくつか方法がありますが、代表的なのは次の3つです。

• 「外観」→「カスタマイズ」→「追加CSS」に書く
• 子テーマのstyle.cssに書く
• Swellのカスタマイズエリア（テーマの機能による）に書く

ブログを始めたばかりなら、「追加CSS」にまとめて書くのが一番手軽で分かりやすいです。カスタマイズの量が増えてきたら、子テーマのstyle.cssに移して整理すると、あとから見返すときも楽になります。

枠線・影・角丸など、定番カスタマイズの考え方

ブログカードの印象を変えたいときは、余計なことをやる前に、まず次の4つだけ触ってみるのがおすすめです。

カスタム項目	どんな印象が変わるか	よく使うプロパティの例
枠線	カードの存在感やきっちり感	border
角丸	やわらかさやポップさ	border-radius
影	立体感や少しリッチな雰囲気	box-shadow
背景色	サイト全体との一体感や読みやすさ	background-color

たとえば、薄いグレーの枠線を足して、角をほんの少し丸めるだけでも、もともとのブログカードがやさしい雰囲気になります。そこに、hover（カーソルを乗せたとき）にうっすら影が出るようにしてあげると、「お、クリックできるボックスなんだな」と伝わりやすくなります。

よくある失敗は、影を濃くしすぎたり、角を丸めすぎたりして、カードだけがやたらと派手になってしまうパターンです。迷ったときは、最初に「デフォルトからほんの少しだけ変える」と意識すると、極端なデザインになりにくくなります。

タイプごとにデザインを変える応用テク

Swellのブログカードには、タイプごとにクラス名や識別用の情報が付いています。CSSでそのクラスを指定すれば、「タイプ1だけ」「タイプ2だけ」といった形でデザインを変えることも可能です。

イメージとしては、「タイプ1はほぼデフォルト」「タイプ2は枠線をつけて少しだけ主張」「タイプ3は影も付けてしっかり目立たせる」といった役割分担をしておく感覚です。こうしておくと、カードを挿入するときに「この場面ではタイプ2だな」と選ぶだけで、自然とメリハリがついた内部リンク設計になります。

具体的なセレクタの書き方やクラス名は、ブラウザの検証ツールで実際のHTML構造を確認しながら決めていくと、より確実です。慣れていない場合は、公式マニュアルや信頼できるカスタマイズ記事のコードをベースに少しずつ調整していくと安心です。

デザインの事例と真似しやすいパターン

ミニマルでシンプルなブログカード

ミニマル系のデザインは、どんなジャンルのブログにも合わせやすく、長く使えるのが魅力です。私がノウハウ系の記事を書くときは、基本的にこのスタイルに寄せることが多いです。

このくらい抑えたデザインにしておくと、長文の記事でもカードが邪魔にならず、「読み進めながら必要なリンクだけ拾える」という状態をつくりやすくなります。

アフィリエイト向け、目立つブログカード

商品レビューやアフィリエイト記事では、もう少し目立たせたい場面もあります。その場合でも、やりすぎて「広告の塊」のように見えてしまわないよう、バランスに気をつけたいところです。

• 背景をほんのり色付きにする（淡い黄色や水色など）
• 枠線の色をサイトのメインカラーに合わせる
• hover時にわずかに拡大させて、影をうっすら付ける
• キャプションを「詳しいレビューはこちら」などに変える

派手にしようとすると、つい背景を濃くしたくなりますが、背景はあくまで淡い色にとどめ、文字と枠線でメリハリをつけるほうが、結果的に読みやすくなります。読者が引いてしまわない程度の「ちょっと特別感」を目指して微調整してみてください。

スマホで読みやすいレイアウトのコツ

ブログカードのカスタマイズは、PC画面だけで見ていると気づきにくい部分があります。実際には、スマホで読む人のほうが多いことも多いので、「スマホでの見え方」を最優先にチェックしておきたいところです。

PCでは「ちょうどいい」と感じていても、スマホで見ると想像以上に窮屈に見えるケースがあります。プレビューや実機で確認しながら、「自分が読者ならここでクリックしたくなるか」を意識して調整してみてください。

ブログカードと内部リンク設計・SEOの考え方

どこにブログカードを置くとクリックされやすいか

実際にいろいろ試してみると、ブログカードを置くとクリックされやすい位置にはある程度パターンがあります。

• 導入文のすぐ後（読者の悩みに共感した直後）
• 大きな見出し（h2）の直後
• 具体例や図解の直前
• まとめ前の「さらに深く知りたい人向け」の部分

読者が「もう少し詳しく知りたい」と思ったタイミングでカードが目に入ると、自然にクリックされやすくなります。逆に、本文と関係が薄いリンクカードを次々に差し込むと、「結局このページで何を言いたいのか分からない」と感じられてしまうこともあるので注意が必要です。

テキストリンクとの使い分け

ブログカードは便利ですが、すべてのリンクをカードにしてしまうとページが落ち着かなくなります。テキストリンクとブログカードは、役割を分けて考えるとバランスが取りやすいです。

テキストリンクのほうが、文章の流れを邪魔しない場面も多くあります。ブログカードは「ここを読んでくれると、この記事がもっと分かりやすくなる」というポイントに絞って使うと、1つ1つのカードの価値が上がります。

「関連記事まみれ」にならないためのルール

便利だからといってブログカードを貼りまくると、読者がどこを読めばいいのか分からなくなってしまいます。ありがちなNGパターンと、どう直すと良いかを表にまとめてみました。

NGパターン	問題点	改善のヒント
各見出しの下に必ず2〜3個ブログカードを置く	本文よりリンクのほうが目立ちすぎる	本当に必要な場所だけ1つに絞る
同じリンクカードを1記事に何度も出す	しつこい印象になってしまう	同じリンクは1記事1回までにして、別の関連記事を紹介する
外部リンクも内部リンクも同じ見た目	どこが自サイトか分かりにくい	内部＝カード、外部＝スリムやテキストと使い分ける
アフィリエイトリンクだけ極端に派手	押し売り感が出てしまう	全体のトーンになじませつつ、少しだけ強調する

内部リンクは、読者に別の記事を読んでもらうための大事な導線です。Swellの関連記事ブロックをうまく使って、読み進めやすい道筋を作ってあげましょう。

トラブルシューティング：Swellブログカードが表示されないとき

ブログカードにならないときのチェックリスト

「URLを貼ってもカードにならない」「関連記事ブロックを入れたのに表示がおかしい」といったときは、次のような原因が多いです。

症状	主な原因	確認ポイント
URLを貼ってもテキストのまま	URL以外の文字やスペースが混ざっている	行の先頭からURLだけを1行で書いているか
外部サイトの画像やタイトルが出ない	相手サイト側でOGPが設定されていない	他の外部サイトURLでも同じ症状か試してみる
内部リンクなのに外部リンクの見た目になる	関連記事ブロックの設定や移行プラグインの影響	内部リンク・外部リンクの設定を見直す
ブログカードのデザインが急に変わった	テーマやプラグインの設定変更、CSSの追記	直前に変更した項目やCSSを振り返る

特に、URL自動変換の場合は「その行にURL以外の文字を混ぜない」ことが大切です。URLの前後に日本語が入っていると、普通のテキストリンクとして扱われてしまうことが多いので、改行してURLだけを別の行に置くようにしてみてください。

CSSが反映されない・デザインが崩れるとき

CSSでブログカードをいじっていると、「なぜか反映されない」「別の部分までデザインが変わってしまった」といったことも起こりがちです。よくある原因は次のようなものです。

• CSSセレクタの指定が弱く、もともとのテーマのCSSに負けている
• !importantを多用しすぎて、別のスタイルとぶつかっている
• .p-blogCardなどカード用のクラス以外にも影響する書き方をしている

最初のうちは、公式マニュアルや信頼できるカスタマイズ記事に載っているセレクタを書き写し、そこから色や線の太さなど小さい部分だけ変えていくのが安全です。反映されないときは、そのCSSだけコメントアウトして様子を見るなど、原因を切り分けながら調整していきましょう。

外部サイトの画像が表示されないとき

外部サイトのブログカードで、画像やタイトルがうまく取得できないケースもよくあります。これは、こちらの設定ではなく、相手サイト側でOGP情報が設定されていないことが原因のことも少なくありません。

この場合はこちらからどうこうできないので、

• そのリンクだけテキストリンクに切り替える
• 自分で画像付きの紹介ブロックを作る

といった形で対応していきます。「自分のブログの設定が悪いのか」「相手サイトの都合なのか」を切り分けるためにも、他の外部サイトURLをいくつか試してみると判断しやすくなります。

よくある質問（FAQ）

Q1. Swell ブログカード カスタマイズは、初心者でもCSS必須ですか？

A. CSSがまったく書けなくても、基本的な部分は問題ありません。

Swellのブログカードは、関連記事ブロックや管理画面の設定だけで、タイプの切り替えや画像・抜粋・キャプションの調整など、かなりのところまでカスタマイズできます。最初からCSSでがっつりいじる必要はなく、「管理画面だけでできる範囲」をしっかり整えるだけでも印象は大きく変わります。

CSSを使ったブログカードカスタマイズは、「もっと自分好みにしたい」「他のブログと少し差をつけたい」と思うようになってから、少しずつ手を伸ばしていけば大丈夫です。

Q2. Swellのブログカードを増やしすぎると、SEO的に良くないですか？

A. 数そのものより、「どんな意図でどこに置いているか」のほうが大切です。

ブログカードを貼りすぎて本文が読みづらくなると、読者が途中で離脱しやすくなり、結果的にSEOにも悪影響が出る可能性があります。とはいえ、適切な位置に必要な数だけ置いていれば問題になることはほとんどありません。

基本的には、「本文の理解に必要な内部リンクだけブログカードにする」「補足情報はテキストリンクにする」「同じカードを何度も出さない」といったシンプルなルールを決めておけば、Swellのブログカードカスタマイズが逆効果になることはまずないはずです。

Q3. 他テーマからSwellに乗り換えたのですが、過去記事のURLをブログカードに変える簡単な方法はありますか？

A. 段落にURLを置くだけでカード化してくれる機能が役に立ちます。

Swellには、段落にURLだけを1行で書くと、自動的にカード表示に変えてくれる機能があります。これを使えば、過去記事に残っているURLリンクも、ひとつずつ関連記事ブロックに置き換えなくても、ある程度まとまってブログカード化できます。

外部サイトの場合は、相手側でOGP情報が設定されていないときれいなカードにならないこともあるので、その場合はテキストリンクのままにするなど、ケースバイケースで使い分けてみてください。

まとめ：今日からできるSwellブログカードカスタマイズの一歩

ここまでの内容をおさらいします

今日からできる最初の一歩としては、まず1記事だけ選んで、次の3つを試してみてほしいです。

• 関連記事ブロックを使って、内部リンクのブログカードを1〜2個だけ設置してみる
• 管理画面からブログカードのタイプを1つ選び直して、雰囲気の違いを確認する
• スマホで記事を表示して、「読みやすさ」と「押しやすさ」を自分の指でチェックする

この小さな一歩を積み重ねていけば、自分のブログに合ったブログカードの形が少しずつ見えてきます。慣れてきたタイミングで、CSSを使ったSwellのブログカードカスタマイズにも挑戦して、あなただけのデザインに育てていきましょう。