埋め込みURL（ブログカード）～内部リンク・外部リンク

ACTIONではサイト内部のURLを貼り付けるとブラウザ表示時に自動でブログカードデザインに変換されます

サンプル

※LazyLoadSEOプラグインを使用してると管理画面側でアイキャッチ画像が表示されない場合がございます

投稿画面の表示

投稿画面（管理画面側）はデフォルトの仕様のままとなっております。

その為、下部に余白が生じたり、設定しているアイキャッチサイズにより投稿画面での見た目が異なります（大きなアイキャッチ画像の場合、上図のように下部が見切れます）が予めご了承ください。

カスタマイズ

原則としてショートコードの「ブログカード」とは異なる仕様です。

ラベルの表示

キャプションを入力するとラベルデザインで表示します

カラー変更

ラベルのカラーはカスタマイザーの「オプション（その他）」＞「ブログカード / ラベル」のラベル背景色、ラベルテキスト色と連動しています。

ラベルデザインはリボンタイプのみです

ちなみに当マニュアルの「関連」は以下のCSSで実装しています

.st-cardbox::before {
	content: "関連";
	position: absolute;
	top: -2px;
	left: -2px;
	font-size: 12px;
	color: #fff;
	background: #757575;
	padding: 5px 10px;
	z-index:1;
}

サムネイル画像設定

ver20210921より従来の記事一覧設定との連動からブログカード専用の設定に変更になりました。

テーマ管理の「全体設定」＞”サムネイル画像設定”＞”ブログカード・埋め込みURL” にて設定できます。

内部リンクのサムネイル画像をそのまま表示する

「内部」リンクの画像をトリミングせずに表示します（EX版のYouTubeサムネイル画像及び外部リンクは設定に応じて適宜、調整されたサイズで表示されます。）

その他注意事項

• 「スマホ（599px以下）でもサムネイル画像を大きくする」を有効化すると「カードスタイルB」適応時でもスマホ（599px以下）では1列になります
• PC閲覧（960px以上）時のサイドバー及びフッター表示は原則としてサイズ設定から除外される。959px以下の閲覧時は設定に応じて適宜、調整されたサイズで表示されます
• 600px以上閲覧時且つ「サムネイル画像をさらに大きく」有効時ののカラム（ブロック）内のブログカードは縦型で表示されます。

※使用しているカラムブロック及び列数によってはレイアウトが破綻する場合がございます

抜粋設定

「テーマ管理」＞「デザイン」＞”抜粋設定”にて抜粋に関する変更が可能です。

通常のテキストリンクにする

エラーになるリンクやテキストのリンクで表示したい場合は「段落ブロック」に変換することで通常のテキストリンクに変更できます。

こんな感じ

https://affinger.com/action-manual/gutenberg-info/

埋め込みブロックが選択できない場合は①のタブで選択できます

注意事項　～上手く表示されない場合は？

表示は読込先の状態にも影響されるため、必ずしも変換することを保証しておりません。

• 存在しない外部・内部リンクの読込では不具合を起こす場合がございます。
• 読み込み先の外部サイトのonEmbed機能がなんらかの理由で停止又は阻害されている。
• 「Gutenberg設定」＞「全般」＞”URLの自動ブログカード化を停止する”が有効だと変換されません
• 対応していない外部URLやURLに誤りがあると変換されません
• AMPでは変換されません

表示速度改善のためカードには標準で 1 時間 (60 * 60 秒)のWordPressのキャッシュが設定されております。キャッシュが更新されるまで反映されない、表示が崩れる場合がございます。※ブラウザのキャッシュとは異なります

上手く読み込めない場合や時間が経ってからお試し頂くか該当URLのパーマリンクを変更をお試しください。

また、正常に表示がされない場合は新規記事で新たに再埋め込みを行うと改善される場合もございます。

テーマの埋め込みURL機能を停止する

なんらかの原因でテーマの埋め込みURL変換がエラーを引き起こす場合はGutenberg設定の「全般」＞”デフォルトの埋め込みURL（ブログカード）の変換を停止”にてWordPressのデフォルト機能に戻すことが出来ます。

「Gutenberg 設定」＞「全般」＞”デフォルトの埋め込みURL（ブログカード）の変換を停止”

を有効化して下さい。

上記で改善されない場合は内部リンクはショートコードのブログカード、外部リンクは「ブログカード外部URL対応プラグイン2」をご検討下さいませ。

その他参考

• WordPress の記事埋め込み oEmbed がうまく表示されない件