【おすすめはどっち?】ブログカード機能で比べてみるTHE THORとSWELL

【使いやすいのはどっち?】ブログカード機能で比べてみるTHE THORとSWELL

THE THORとSWELLの「ブログカード」機能について比較してみました。

関連記事を紹介するときに単純なテキストリンクではなく、アイキャッチ画像や説明文を一緒に表示できる「ブログカード」はリンクのクリック率を高めるために欠かせない機能です。

この記事のSWELL公式マニュアルはこちら

【SWELLブロック】関連記事ブロックで簡単にブログカード作成! | 【公式サイト】WordPressテーマ SWELL

この記事の目次

THE THOR ブログカード

THE THORのブログカードは内部リンクと外部リンクで使う機能が分かれます。

内部リンク:自分のサイト内の別ページへ誘導するリンクのこと
外部リンク:別サイトのページを紹介するリンクのこと

サイトカード(内部記事リンク)

内部リンクの場合は「サイトカード」を使用します。

THE THOR サイトカード(内部記事リンク)
※画像です
ブログカード(外部サイトリンク)

外部リンクの場合は「ブログカード」です。

THE THOR ブログカード(外部サイトリンク)
※画像です

ブログカードの設置方法

STEP
ショートコードの設置

THE THORのブログカードはツールバーの「ショートコード」→「ブログカード(サイトカード)」で設置できます。

THE THOR ブログカード 設置方法
STEP
ショートコードの編集

設置するとエディターにショートコードが表示されます。

url=にリンクしたいURLを入力すればブログカードが設置できます。

ショートコード

サイトカード(内部記事リンク)

[sitecard subtitle=関連記事 url=ここにURL入力 target=]

ブログカード(外部サイトリンク)

[blogcard url=ここにURL入力]

サブタイトルの変更

サイトカードではサブタイトルが表示されます。

デフォルトで「関連記事」と表示される部分です。

THE THOR サイトカード サブタイトル
※画像です

ここのテキストを変更する場合はsubtitle=に任意のテキストを入力してください。

サブタイトル 設定

[sitecard subtitle=好きなテキストを入力 url=ここにURL入力 target=]

サイトカードのリンクを別タブで開くようにする

サイトカードのリンクを別タブで開くようにしたい場合は、「target=」に「_blanck」を入力します。

_blanck 設定

[sitecard subtitle= 好きなテキストを入力 url= ここにURL入力 target=_blanck]

ブログカード(外部サイトリンク)については、すべて別タブで開くようになっています。

ブログカードのデザイン変更方法

THE THORのカスタマイザーにサイトカード・ブログカードのデザインを調整する機能が用意されていません。

どうしてもデザインを変更したい場合は「追加CSS」機能でサイトカード・ブログカードのスタイルコードを登録することで変更可能です。

「追加CSS」の設定場所は「外観」→「カスタマイズ」→「追加CSS」です。

THE THOR フッターカラー設定方法
THE THOR 追加CSSの設定画面

具体的なCSSの書き方はネットで調べてみてください。

大変ですが、CSSの理解度次第でお洒落なブログカードが作れるようになります。

SWELL ブログカード(関連記事ブロック)

SWELLでは「関連記事ブロック」がブログカードの役割を果たしています。

内部リンクも外部リンクどちらも「関連記事ブロック」を使います。

内部リンク
SWELL 関連記事ブロック 内部リンク
※画像です
外部リンク
SWELL 関連記事ブロック 外部リンク
※画像です

関連記事ブロックの設置方法

STEP
関連記事ブロックの設置

エディターの「ブロックを追加」から「関連記事」を選択します。

「関連記事」を選択
STEP
「内部リンク」「外部リンク」の選択

「関連記事ブロック」を設置したら、タブで「内部リンク」か「外部リンク」を選択します。

内部リンクの設定方法

リンク先が内部リンクの場合は、投稿IDを入力するか、記事タイトルを検索して表示する記事を選択します。

外部リンクの設定方法

外部リンクの場合はURLを直接入力します。

ショートコードではなくプレビューで表示されるので、とても分かりやすいですね!

関連記事ブロックの詳細設定

「関連記事ブロック」を選択すると、エディターの右サイドメニューに設定パネルが表示されます。

いくつか設定項目をご紹介します。

SWELL 関連記事ブロック 設定パネル

キャプションの変更

関連記事ブロックの「あわせて読みたい」の部分は「キャプション」で変更できます。

SWELL 関連記事ブロック キャプション

画像と抜粋文の表示設定

画像と抜粋文を非表示にしたい場合は「キャプション」の下のスイッチボタンをONにします。

SWELL 関連記事ブロック 表示設定

内部リンクの関連記事を別タブで開く

関連記事が内部リンク場合に限り、そのリンクを別タブで開くように設定することができます。

関連記事設定パネルの「新しいタブで開く」のスイッチボタンをONにしてください。

SWELL 関連記事ブロック 新しいタブで開く

外部リンクは強制的に別タブで開くようになっています。

関連記事ブロックのデザイン

SWELLでは関連記事ブロックのデザインを変更することができます。

ブログカード(内部リンク)のデザイン一覧

タイプ1
SWELL 関連記事ブロック 内部リンク タイプ1
タイプ2
SWELL 関連記事ブロック 内部リンク タイプ2
タイプ3
SWELL 関連記事ブロック 内部リンク タイプ3

ブログカード(外部リンク)のデザイン一覧

タイプ1
SWELL 関連記事ブロック 外部リンク タイプ1
タイプ2
SWELL 関連記事ブロック 外部リンク タイプ2
タイプ3
SWELL 関連記事ブロック 外部リンク タイプ3

デザインの変更方法

関連記事ブロックのデザインは「SWELL設定」→「エディター設定」にある「その他」タブで行います。

SWELL エディター設定 その他 ブログカード

「ブログカード」のプルダウンメニューを選択するだけでデザインの変更が可能です。

変更したその場でデザインがプレビューされるところが素晴らしいです!

SWELL エディター設定 ブログカード タイプ選択

ブログカードに限らず、SWELLではほとんどのデザインでプレビュー機能が実装されているので、デザインを確認する作業が大幅に短縮できます!

プレビュー機能はSWELLのエディター設定は一見の価値あり!

わたしはこれ見てSWELL買うこと決めました!

まとめ 使いやすさもデザインもSWELLです!

THE THORの総評

THE THORのブログカード機能はエディター上だとショートコードで表示されるため、実際の表示イメージがその場で確認できません。

設定もショートコードに直書きというのも、使いづらいなと思います。

そして、なによりデザイン変更するのに追加CSSの編集が必要というのが残念です。

デフォルトのデザインもお洒落とはいえないので、ここは頑張ってほしかった。

THE THORのここがダメ
  • エディター上でブログカードがプレビューされない
  • ショートコード入力の手間
  • デザイン変更機能がない(追加CSS編集が必要)

SWELLの総評

SWELLのブログカード機能は非常に使いやすいです。

エディター上でも表示イメージを確認することができますし、細かな設定はすべて右サイドメニューのパネルでクリックしながら変更できるので、パソコン操作が不慣れな人でも簡単に設定することができます。

デザインも3パターン用意されているのも嬉しいです。

どのサイトでも馴染みやすいデザインなので、追加CSSを使わなくても十分お洒落なブログカードが出来上がると思います。

SWELL全般に言えることですが、SWELLで用意されているデザインはどれも使いやすいデザインが多いです。
わたしはSWELLにしてから追加CSS機能を使っていません。

書くことに集中するならSWELLがおすすめ

ご紹介した通り、SWELLはブロックの設置もデザインの変更も時間がかからないような工夫がたくさん施されています。

特に変更したデザインがその場で確認できないのは本当に大変(汗)!

今ではSWELLのプレビュー機能がないとブログ書けないです。

それくらい圧倒的な書き心地の良さがSWELLにはあります。

他のワードプレステーマだと追加CSSの編集が必要だったりする部分もSWELLならマウス操作だけで設定できることが本当に多いので、HTMLの知識がない人にこそSWELLをおすすめしたいです。

失敗しないワードプレステーマ選びをするために

おすすめのワードプレステーマを探すとSWELLがおすすめされている情報がまだまだ少ないなと思います。

今回のように一つひとつの機能を比べてみると、SWELLは本当にいいワードプレステーマだなとつくづく思うので、もっとおすすめテーマとして広まって欲しいです。

ワードプレステーマを検討する際は、ざっくりした比較情報だけでなく、今回のように一つひとつの機能を比べてみるのがおすすめです。

サマリーの比較だけじゃ、
本当の違いは分からないから。
機能一つひとつ丁寧に比較してます。

ここまで読んでいただきありがとうございました。

もしこの記事がお役に立ったのなら、下のバナーからSWELL公式サイトの訪問お願いできますか?

ブログ継続のやる気につながります。

もっと気軽に、楽しく記事を書こう。

【使いやすいのはどっち?】ブログカード機能で比べてみるTHE THORとSWELL

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次
閉じる