![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
ブログカードを「関連記事ブロックで表示させる」と「本文に記事URLを貼って表示させる」違いを教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- ブログカードの設置方法が分かる
- ブログカードのカスタマイズ方法が分かる
- ブログカードを「関連記事ブロック」と「本文に記事URLに貼って」表示させる違いが分かる
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELL】関連記事ブロックの使い方【ブログカードを表示させる】
![](https://hrdyuic.com/wp-content/uploads/gui-2457113_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/gui-2457113_1920.jpg)
SWELLブロックの関連記事とは
記事を読んでいると以下のようなブログカードを目にすることがあると思いますが、SWELLではこのブログカードを関連記事ブロックで設置できます。
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-2024-07-12-19_30_33.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-2024-07-12-19_30_33.jpg)
エディター設定
※ ブログカードのタイプ(見た目)を決めます。
管理画面メニューから、「SWELL設定」>「エディター設定」を選択します。
![](https://hrdyuic.com/wp-content/uploads/dcbe71c9b54f4f588768c90c94c228fd.jpg)
![](https://hrdyuic.com/wp-content/uploads/dcbe71c9b54f4f588768c90c94c228fd.jpg)
エディター設定から、「その他」を選択します。
![](https://hrdyuic.com/wp-content/uploads/880f70a14327515f5c4c68b6c31f0e9c.jpg)
![](https://hrdyuic.com/wp-content/uploads/880f70a14327515f5c4c68b6c31f0e9c.jpg)
ブログカード(内部)
※ 内部 = 自サイトの記事
タイプ1 今回の解説で使用
![](https://hrdyuic.com/wp-content/uploads/d5d1aeb60414754b5c872ebabc64271c.jpg)
![](https://hrdyuic.com/wp-content/uploads/d5d1aeb60414754b5c872ebabc64271c.jpg)
タイプ2
![](https://hrdyuic.com/wp-content/uploads/0659cb0139667960da6588cb89363e3b.jpg)
![](https://hrdyuic.com/wp-content/uploads/0659cb0139667960da6588cb89363e3b.jpg)
タイプ3
![](https://hrdyuic.com/wp-content/uploads/9072f4afd7b2301c30fd952e3a26d956.jpg)
![](https://hrdyuic.com/wp-content/uploads/9072f4afd7b2301c30fd952e3a26d956.jpg)
ブログカード(外部)
※ 外部 = 他サイトの記事
タイプ1
![](https://hrdyuic.com/wp-content/uploads/b95e8ad4f38d07c641a7edeba6c8bafb.jpg)
![](https://hrdyuic.com/wp-content/uploads/b95e8ad4f38d07c641a7edeba6c8bafb.jpg)
タイプ2
![](https://hrdyuic.com/wp-content/uploads/b0e2d8f02a8c7f9fe11c225f45640c4d.jpg)
![](https://hrdyuic.com/wp-content/uploads/b0e2d8f02a8c7f9fe11c225f45640c4d.jpg)
タイプ3 今回の解説で使用
![](https://hrdyuic.com/wp-content/uploads/8932882e9bab8dd13858521804b92fea.jpg)
![](https://hrdyuic.com/wp-content/uploads/8932882e9bab8dd13858521804b92fea.jpg)
ブログカードを表示させる
関連記事ブロックを挿入
管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/433fbbe64e27eae16dc31b27110131f6.jpg)
![](https://hrdyuic.com/wp-content/uploads/433fbbe64e27eae16dc31b27110131f6.jpg)
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「関連記事」を選択します。
![](https://hrdyuic.com/wp-content/uploads/845cb088326bcb9024d66b2f569ddfaa.jpg)
![](https://hrdyuic.com/wp-content/uploads/845cb088326bcb9024d66b2f569ddfaa.jpg)
関連記事ブロックから、「リンク先を設定する」をクリックします。
![](https://hrdyuic.com/wp-content/uploads/63839769724a78a8f5d408cba3f36692.jpg)
![](https://hrdyuic.com/wp-content/uploads/63839769724a78a8f5d408cba3f36692.jpg)
下記、赤枠内にURLや投稿・タームIDを入力してブログカードを表示させます。
![](https://hrdyuic.com/wp-content/uploads/34371f75afa5b51d23c70e4894758078.jpg)
![](https://hrdyuic.com/wp-content/uploads/34371f75afa5b51d23c70e4894758078.jpg)
タームとは
※ 当サイトを例に解説
タクソノミー | ターム |
---|---|
カテゴリー | WordPress SWELL レンタルサーバー Web制作 |
タグ | SWELLでカスタマイズされた代表的なWP標準搭載ブロック SWELL専用のカスタムブロック SWELL推奨プラグイン |
関連記事ブロックでブログカード(内部)を表示させる
- 「投稿」を選択します。
- 「投稿ID」を入力します。
![](https://hrdyuic.com/wp-content/uploads/7700395072ce1000d1db175365f524e9.jpg)
![](https://hrdyuic.com/wp-content/uploads/7700395072ce1000d1db175365f524e9.jpg)
投稿IDは、投稿一覧から確認できます。
![](https://hrdyuic.com/wp-content/uploads/c731a2f626633b05d1a77153a0a3fa69.jpg)
![](https://hrdyuic.com/wp-content/uploads/c731a2f626633b05d1a77153a0a3fa69.jpg)
ブログカード(内部)が表示されました。
![](https://hrdyuic.com/wp-content/uploads/6f7af32cc49b3951e8dbab587bd128e6.jpg)
![](https://hrdyuic.com/wp-content/uploads/6f7af32cc49b3951e8dbab587bd128e6.jpg)
本文に記事URLを貼ってブログカード(内部)を表示させる
下記、赤枠内に記事URLをコピペします。
![](https://hrdyuic.com/wp-content/uploads/94f85f0f44e0011aa096fbe6db8f664f.jpg)
![](https://hrdyuic.com/wp-content/uploads/94f85f0f44e0011aa096fbe6db8f664f.jpg)
記事URLをコピーします。
![](https://hrdyuic.com/wp-content/uploads/68e500bba024d668fdecf9fd1f3c76b4.jpg)
![](https://hrdyuic.com/wp-content/uploads/68e500bba024d668fdecf9fd1f3c76b4.jpg)
記事URLをペーストするとブログカードが表示されます。
![](https://hrdyuic.com/wp-content/uploads/f1dd354540c604acf463c240a6bd0244.jpg)
![](https://hrdyuic.com/wp-content/uploads/f1dd354540c604acf463c240a6bd0244.jpg)
プレビューするとブログカード(内部)として表示されています。
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-2024-07-12-19_30_33-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-2024-07-12-19_30_33-1.jpg)
関連記事ブロックでブログカード(外部)を表示させる
- 記事URLをコピペします。
![](https://hrdyuic.com/wp-content/uploads/8a6f2ac46925bf80cf6aa1b2983a534e.jpg)
![](https://hrdyuic.com/wp-content/uploads/8a6f2ac46925bf80cf6aa1b2983a534e.jpg)
記事URLをコピーします。
![](https://hrdyuic.com/wp-content/uploads/52fa4a2d54f70731cdb9e372e08b2db9.jpg)
![](https://hrdyuic.com/wp-content/uploads/52fa4a2d54f70731cdb9e372e08b2db9.jpg)
ペースト後、
(送信)をクリックするとブログカードが表示されます。![](https://hrdyuic.com/wp-content/uploads/2ba080a454b746ca7554c72c7434a58b.jpg)
![](https://hrdyuic.com/wp-content/uploads/2ba080a454b746ca7554c72c7434a58b.jpg)
本文に記事URLを貼ってブログカード(外部)を表示させる
記事URLをコピペする方法は既に解説しているので割愛しています。
関連記事ブロックを使った時とは異なり以下のように表示されます。
![](https://hrdyuic.com/wp-content/uploads/23c5addd91728294e988521f47608b73.jpg)
![](https://hrdyuic.com/wp-content/uploads/23c5addd91728294e988521f47608b73.jpg)
プレビューするとブログカードが表示されます。
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-2024-07-12-19_29_47.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-2024-07-12-19_29_47.jpg)
関連記事ブロックでタームをブログカードで表示させる
- 「ターム」を選択します。
- 「タームID」を入力します。
![](https://hrdyuic.com/wp-content/uploads/46e7bccdf05c0394af09ccdffec81d73.jpg)
![](https://hrdyuic.com/wp-content/uploads/46e7bccdf05c0394af09ccdffec81d73.jpg)
タームIDは、カテゴリーまたはタグから確認できます。
![](https://hrdyuic.com/wp-content/uploads/db6f8a9b542847676d30fb0719b38162.jpg)
![](https://hrdyuic.com/wp-content/uploads/db6f8a9b542847676d30fb0719b38162.jpg)
タームのブログカードが表示されます。
![](https://hrdyuic.com/wp-content/uploads/e607cd4a83f34ebf05a865d5c456222f.jpg)
![](https://hrdyuic.com/wp-content/uploads/e607cd4a83f34ebf05a865d5c456222f.jpg)
本文にタームURLを貼ってブログカードを表示させる
記事URLをコピペする方法は既に解説しているので割愛しています。
プレビューするとブログカードは表示されますが、関連記事ブロックを使った時と見た目が異なります。
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-2024-07-13-16_36_17-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/screencapture-hrdyuic-2024-07-13-16_36_17-1.jpg)
【SWELL】関連記事ブロックの使い方【カスタマイズ】
![](https://hrdyuic.com/wp-content/uploads/website-6700615_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/website-6700615_1920.jpg)
スタイル
![](https://hrdyuic.com/wp-content/uploads/a03792e28956723103e0606b362b4d30.jpg)
![](https://hrdyuic.com/wp-content/uploads/a03792e28956723103e0606b362b4d30.jpg)
デフォルト
![](https://hrdyuic.com/wp-content/uploads/06d773f936f22b6194228a316105b5c7.jpg)
![](https://hrdyuic.com/wp-content/uploads/06d773f936f22b6194228a316105b5c7.jpg)
スリム
![](https://hrdyuic.com/wp-content/uploads/c6931fb3a24f6f8bc5f536dd199106e3.jpg)
![](https://hrdyuic.com/wp-content/uploads/c6931fb3a24f6f8bc5f536dd199106e3.jpg)
テキスト
![](https://hrdyuic.com/wp-content/uploads/57031c18787f9746194de7325dcaad10.jpg)
![](https://hrdyuic.com/wp-content/uploads/57031c18787f9746194de7325dcaad10.jpg)
設定
画像・抜粋文の表示・非表示を設定
- 画像を非表示にする
- 抜粋文を非表示する
![](https://hrdyuic.com/wp-content/uploads/a6f4aae213479fc95aee45fa824f8241.jpg)
![](https://hrdyuic.com/wp-content/uploads/a6f4aae213479fc95aee45fa824f8241.jpg)
「ON」にすると画像と抜粋文が非表示になります。
![](https://hrdyuic.com/wp-content/uploads/cb4d7efa30b05fc0de709267b66bc0af-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/cb4d7efa30b05fc0de709267b66bc0af-1.jpg)
キャプション・ページタイトルの上書き設定
- キャプション(上書き用)
- ページタイトル(上書き用)
![](https://hrdyuic.com/wp-content/uploads/86e1fd1930432d595009ffd85ada2fda.jpg)
![](https://hrdyuic.com/wp-content/uploads/86e1fd1930432d595009ffd85ada2fda.jpg)
アイコン
※ アイコンを内部リンクと外部リンクで使い分けることができます。
- :内部リンク
- :外部リンク
![](https://hrdyuic.com/wp-content/uploads/9a1c3535575e0fcafd8e6c9969696b75.jpg)
![](https://hrdyuic.com/wp-content/uploads/9a1c3535575e0fcafd8e6c9969696b75.jpg)
【SWELL】関連記事ブロックの使い方【まとめ】
![](https://hrdyuic.com/wp-content/uploads/the-end-3408301_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/the-end-3408301_1920.jpg)
「関連記事ブロック」と「本文に記事URLを貼る」違い
項目 | 関連記事ブロック | 本文に記事URLを貼る |
---|---|---|
スタイルの変更 | ||
画像を非表示にする | ||
抜粋文を非表示にする | ||
キャプションの上書き | ||
ページタイトルの上書き | ||
アイコンの設定 | ||
デバイス制限 | ||
ブロック下の余白量 | ||
高度な設定 |
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
今回は以上です。