ブログカードとは?
![](https://naolog703.com/wp-content/uploads/2023/11/2023-11-12_17h45_33-1024x311.png)
ブログカードとは、上記のようなカード形式のリンクのことです。
このブログカードには、アイキャッチ画像+タイトル+記事の概要が表示されており、リンク先の記事がどんな内容かわかるようになっています。
ブログカードをクリックするだけでリンク先に飛べるようになっているので、読者にとっても利便性あるものと言えるでしょう。
![](https://naolog703.com/wp-content/uploads/2023/07/20230714_014852.jpg)
Word press【Cocoon】では標準で、ブログカードの機能が使えるようになっています
- アイキャッチ画像が入っているため、目を引く
- タイトルや記事概要の表示により、記事内容がわかりやすい
- リンクとして認識されにくい・広告と間違われやすい
(ラベルの設置やクリックを促す文章の補足で、リンクであることを認識もらおう) - 使い過ぎるとごちゃごちゃした記事になる・場所によっては読者が記事を読む時のじゃまになることがある
(テキストリンクと上手く使いわけて読者の読みやすい記事にしよう) - メンテナンスが重要
(「リンク先の記事がない!!」という状態を避けるために定期的に見直そう)
ブログカードの設定
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-06_03h02_05-1024x272.png)
Cocoonのブログカードは、Word press管理画面のCocoon設定をクリック➡ブログカードクリック
これで設定画面が表示されます。
![](https://naolog703.com/wp-content/uploads/2023/07/20230714_014852.jpg)
ブログカードには、「内部ブログカード」と「外部ブログカード」があって、
それぞれ設定する必要があるよ!
「内部ブログカード」と「外部ブログカード」の説明をしておこう!!
内部ブログカード:内部リンクのブログカード(同じブログやサイト内)
外部ブログカード:外部リンクのブログカード(他のブログやサイトに移動する)
内部ブログカードの設定
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-06_20h53_30-1-1024x480.png)
ブログカード表示:ブログカード表示を有効にするにチェック
ここを忘れずにチェックを入れておけばOK🙆
サムネイルスタイル・日付表示・リンクの開き方に関しては、自分の好みに合わせて設定して下さい。
サムネイルスタイル:左
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-06_01h05_44-1024x249.png)
サムネイルスタイル:右
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-06_01h06_35-1024x247.png)
日付表示:なし
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-06_01h29_11-1024x272.png)
日付表示:投稿日/更新日
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-06_21h16_49-1024x261.png)
リンクの開き方:新しいタブで開く
ここにチェックをいれると別のタブが開きます。
外部ブログカードの設定
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-06_21h24_06-1024x330.png)
ブログカード表示・サムネイルスタイル・日付表示までは、内部ブログカードと同じです。
確認したい方はクリックしてください➡内部ブログカードの設定に戻る
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-07_14h48_56-1024x261.png)
リンクの開き方:「新しいタブで開く」にチェック
![](https://naolog703.com/wp-content/uploads/2023/07/20230714_014852.jpg)
読者が外部のブログやサイトに移動して、のちに自分のブログに戻って来れるように
チェックしておくことを、おすすめします。
キャッシュの保存期間:特に気にしない方は、最初から設定されている30日のままでOK!です。
ウェブページの情報を、コンピューターに一時的に保存しておく仕組みのことです。
この仕組みにより、リンク先の記事内容が更新されていたとしても、キャッシュが残っている間は、更新内容が反映されません。
キャッシュの更新:キャッシュの更新モードを有効にする
ここにチェックを入れた状態にしておくと、外部のWebページの情報が更新されると再保存されます。
でも、その分キャッシュ量もたまっていき、表示されるスピードも遅くなってしまうので、チェックを外しておくのがよいでしょう。
![](https://naolog703.com/wp-content/uploads/2023/07/20230714_014852.jpg)
外部リンク先のタイトル・サムネなどの情報が更新されたと気が付いたときに、チェックして更新するようにしましょう。
更新の方法は、「キャッシュの更新モードを有効にする」にチェックして、自分でブログカードをクリックすると、キャッシュが、新しい情報の更新されます。
更新後は、またチェックを外しておきましょう!!
「変更をまとめて保存」をクリック
![](https://naolog703.com/wp-content/uploads/2023/07/20230714_014852.jpg)
「変更をまとめて保存」した後は、プレビューで確認しておこう!
これで、ブログカードの設定ができました。
次にブログカードの使い方について、説明していきましょう。
ブログカードの使い方
WordPress【Cocoon】では、内部・外部ブログカード共に設置方法は同じなので、あわせて説明していきますね。
ブログカードを設置
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-13_17h15_27-1024x265.jpg)
どちらでも良いので、「⊞」をクリックしてブロックを追加します。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-12_01h13_04-1-1024x395.png)
検索に「ブログ」を入力すると、ブログカードが表示されるので選択する。
または「すべて表示する」をクリックして、Cocoonブロックのところまでスクロールして、ブログカードをクリック。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-12_01h15_24-1024x140.png)
上記のようなブログカードブロックが表示されます。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-12_01h18_24-1024x146.png)
ここにURLを貼り付けます。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-13_18h08_52-1024x276.png)
このようにブログカードを表示できます。
![](https://naolog703.com/wp-content/uploads/2023/07/20230714_014852.jpg)
ブログカード・ラベルの設置をした後は、
必ず下書き保存をしてプレビューで確認をしておきましょう!!
ラベルの設置
ブログカードのラベルの設置についても説明しておきますね。
ブログカードのラベルは好みですので、必要ない方はすっとばしてください。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-13_17h48_10-1-1024x282.png)
スタイル設定 ラベルの枠内のプルダウンをクリックすると、「関連記事」などの項目がでてくるので、ここから文字を選びクリックする。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-14_01h31_33-1-1024x165.png)
このように表示されるようになります。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-14_01h45_40-1024x287.png)
ブログカードが表示されない原因
ブログカードが表示されない、よくある原因は3つあげられます。
- 「ブログカードを表示」にチェックが入っていない
- URLに日本語が含まれている
- URLの前後にスペースが入ってしまっている
「ブログカードを表示」にチェックが入っていない
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-06_20h53_30-2-1024x133.png)
「ブログカードを表示」にチェックし忘れるとブログカードは表示されないので、ここは必ずチェックを入れるようにしましょう!!
![](https://naolog703.com/wp-content/uploads/2023/07/20230714_014852.jpg)
「内部ブログカード」・「外部ブログカード」それぞれにチェックが必要!!
URLに日本語が含まれている
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-17_01h25_09-1024x144.png)
上記のようにURLに日本語が含まれていると、ブログカードは正しく表示されず、下記のようなブログカードになってしまいます。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-17_01h26_25-1024x260.png)
URLに日本語が含まれている場合は手打ちせずに、記事ページのアドレスバーからURLをコピーするようにしてください。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-17_02h02_18-1024x336.jpg)
上記の赤枠部分をコピー、または自分のブログ記事であれば下記の赤枠の部分をコピーしてもOK!
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-17_01h33_54-1-1024x393.png)
すると下記のようになります。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-17_01h32_31-1024x184.png)
上記のURLをプレビューで見ると、下記のように正しくブログカードが表示されます。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-14_01h45_40-1-1024x287.png)
ULRの前後にスペースが入ってしまっている
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-18_00h50_00-1024x124.png)
URLの前後にスペースが入っていると、ブログカードは表示されません。
![](https://naolog703.com/wp-content/uploads/2024/01/2024-01-12_01h18_24-1-1024x146.png)
上記のようにスペースが入っていないことを確認しましょう。
まとめ
ブログカードの使い方は簡単でした。
ブログカードを使い過ぎてごちゃごちゃしないように気を付けて、テキストリンクと上手く使いわけるようにしましょう。
![](https://naolog703.com/wp-content/uploads/2023/07/20230714_014852.jpg)
ブログカードを設置後は必ずプレビューで、正しく表示されているか、リンク先に飛べるかの確認をするようにしましょう!!
ポチっとお願いしまーす
![PVアクセスランキング にほんブログ村](https://blogparts.blogmura.com/parts_image/user/pv11169077.gif)
コメント