ブログカードで比較しよう
JIN・SANGO・STORK19・AFFINGER 6・THE THOR・SWELL・Muum・賢威を比較
この記事は、有料テーマを購入しようと思っているが迷っているという方を対して、様々な視点からテーマをみて本当に良いものを選んでほしいために作成しています。
今回は「ブログカード」というお題で比較していきたいと思います。
リンク構築はWEBサイトを運営していく上で非常に重要なSEO対策となります。ブログカードのデザインは少なからず、ユーザーの行動喚起に関わると思われます。（リンクに関して学びたい方は下の記事も併せてご覧ください）
-
【令和版】内部リンクの7つの貼り方：キラーコンテンツ戦略ではじめの一歩
はじめに：サイトを強化する内部リンク戦略とは？ 内部リンクに関するほぼすべての記事は、いかに複雑でいかに重要であるかという議論から大体が始まると思います。一方で、内部リンクはとてもシンプルな概念であり ...
続きを見る
また、リンクはどの記事でも必要となってくるため、手軽さも欲しいところです。どんなブログカードのデザインや設定方法があるか楽しみですね。早速みていきたいと思います。
記事の信頼性
●有料テーマを複数有し実際に使用した管理人が記事を作成しています
●WordPressで企業のホームページ作成サポート
●ドメインパワー40超えの企業にて500記事以上のブログ作成
●WordPress歴7年
有料テーマを選ぶ際の前提的なポイントを記事にまとめていますので併せて読んでくださいね。
-
【2022年最新版】複数の有料テーマを持つ私が教える「WordPressテーマ」の選び方
はじめに：WordPressのテーマの決め方のポイント AdminWordPressのテーマを複数持つ管理人がお伝えしていくよ 本記事をおすすめしたい方 ・WordPressのテーマを探している ・自 ...
続きを見る
ブログカードのデザインと貼り方の比較
JINブログカード
ブログカードは「URLを貼り付けるだけ」でaタグも不要で生成されます。ビジュアルエディターでもテキストエディターでも同様の方法で利用可能です。
注意点：ブログカードの前後に余白をとっていないと、うまく表示されないことがあります。
外部リンクはPz-LinkCardなどプラグインを使用する必要があります。
AFFINGER6ブログカード
「ブロックの追加」を押したのちに、「クラシック」をクリックします。次に「カード」を選択しましょう。
そうすると内部リンクをブログカードとして表示するためのコードが現れます。次にコードの中の【id=""】の"と"の間の部分に記事IDを入れると左のようなブログカードが現れます。これはデフォルトです。
外部リンクはPz-LinkCardなどプラグインを使用する必要があります。
AFFINGER6ではカードボタンを押すとの下記ようなコマンドが出現します。
st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""
ここに様々な値をコードに入力することで、デザインやタイトル文章などのカスタマイズが可能となります。また、カスタマイズ画面からリボン風にしたり、カラーを変えるなどデフォルトを変更することも可能です。
| 値 | ブログカードの変更される内容 |
| label="〇〇" | 文字を入力する、文字入りのラベルが出現します |
| name="〇〇" | ラベルのタイトル（文字）を変更できます |
| bgcolor="〇〇" | ラベルの背景色を変更で来ます |
| color="〇〇" | ラベルの文字色を変更できます |
| readmore="on" | onで続きを見るを表示し、offで非表示に変更できます |
| webicon="〇〇" | ショートコード補助のWebアイコンから選択 |
少しコードをいじってみると、
AFFINGER6では細かく設定することが可能です。
The Thorのブログカード
THE THOR（ザ・トール）では、サイトカード（内部リンク）とブログカード（外部リンク）を使うことができます。
手順は、「ショートコード」→「ブログカードorサイトカード」を選択することで使用できます。
左がデフォルトのブログカードになります。
ホームページ→ THE THORホームページで詳細を
THE THORでは細かなブログカードの調整は「追加CSS」で実施します。追加CSSは覚えると便利なので、まずはコピペからでも慣れると便利だと思いますので勉強してみてください。
STORK19のブログカード
関連記事ショートコードと同様の機能をもったブロックで、記事のURLまたは、IDを入力することで表示されるようになります。（両方入力した場合、IDが優先）
実際にスタイルを見ながら作成でき、感覚的にブログカードを作れます。
HP→STORK19ホームページはこちら
公式ブログカード記事→ブログカード関連記事の作成
SANGOのブログカード
ブログ内の記事へのリンクを貼るときにのみ使用できます。
左図の投稿ID部分に記事のIDを挿入します。（投稿IDは、投稿編集ページのURLを見れば確認できます。post=◯◯の数字が投稿IDとなります。）
右下のように外部リンクも作成することができます。
ホームページ→SANGOホームページ
ブログカード記事→SANGOブログカード関連記事はこちら
Muumのブログカード
下の図のようにクイックタグから容易にブログカードを作成できます。URLを挿入するだけでシンプルで見やすいブログカードを作成できます。
ホームページ→TCD Muumホームページはこちら
ブログカード関連の公式記事は→こちら
画像を消して文字のみにしたい場合は、管理画面【外観】→【TCDテーマオプション】→【基本設定】→「カスタムCSS」の最下部に下記をコピー&ペーストして表示を確かめてみましょう。
1 | .cardlink_thumbnail { display: none; } |
GridrerはじめTCDテーマは概ねこのクイックタグからの形をとります。TCDをご検討の方はご参考にしてください。
SWELLのブログカード
ショートコード名は[post_link]です。一番シンプルな使い方だと、投稿IDを指定するだけでその記事へのリンクがブログカードとして出力されます。
ブロックエディターでは、「SWELLブロック」の中に「関連記事」というオリジナルブロックを用意されています。
そのほかにも次の様な属性を指定できるようです。
id="投稿ID"cap="キャプション名"（「あわせて読みたい」部分のテキスト）target="_blank"（別窓で表示できます）url="外部サイトのURL"
ホームページ→SWELLホームページはこちら
公式ブログカード記事は→こちら
賢威のブログカード
［keni-linkcard url=”https://リンク先URL”]のURL部分に挿入することで図のようなリンクカードを作成可能です。次に外部リンクなどで使う別窓リンクで表示する方法は、賢威リンクカード内に「target=”_blank」タグを設置します。そうすることで自動的に外部リンク化してくれます。
イメージ図は公式のものが見当たらないため、Amehati様のリンクカードに関する記事を気になる方はご参考にしてみてください。
総評：ブログカードを比べてみた
（こちらはAFFINGER6専用のギャラリーのプラグインです。画像をタッチするとホームページに飛ぶことができます。）
ここに表示しているブログカードについて今回は比べてみました。個人的なランキングを1〜3位で勝手に決めてみたいと思います。
第3位
AFFINGER6
メリット：主にバリエーションの幅が広いことがメリットとして挙げられます。
デメリット：デザインの幅は広いが、直感的に作成しづらく、ある気にいったデザインを作成するのに少し時間はかかるか。
第2位
THE THOR
メリット：内部・外部ともにブログカードを簡単に作成できる。CSSも駆使すれば幅広い可愛いブログカードを作成できる。
デメリット；追加CSSなどやや上級者向けの部分が難点。
第1位
SWELL
メリット：幅の広さと手軽さを兼ね備えている。
デメリット：SWELL愛好者が猛烈に増えている分、他と同じ雰囲気にはなりやすい。
今回は、「ブログカード」で有料テーマを比べてみました。個人的にJINやSTORK19・SANGOの配色・デザインは他より可愛いので、順位に入れたいところですが、自分自身のサイトに導入するとなると、その配色という点は自分のデザイン能力次第になってくるため要素から抜かなければなりませんでした。機能という点で3位まで勝手に決めさせていただきました。
ランキング・特集のカテゴリーではこれからも様々な視点で有料テーマを比べていきたいと思います。下の記事では「価格」でテーマを比較していますので、併せてご覧ください。
-
【最新版】WordPress有料テーマの予算・値段（価格）を比較！無料テーマじゃダメ？
有料テーマの選び方のコツとは？ テーマ選びを始めるにあたって、実は世界でWordPressのテーマは1万以上存在するらしいんです。そのすべてに目を通すには、何日もかかってしまうほどです。では、どのよう ...
続きを見る
