サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Cocoonテーマに関する質問
8
投稿
4
ユーザー
5
Reactions
778
表示
Topic starter
2022年5月23日 02:34
不具合・カスタマイズ対象ページのURL： https://kpop-waiwaisou.com/youtube/
相談内容：埋め込みが制限されているYoutubeの動画について、ブログカードのようにして記事に入れたいのですが、ブロックを利用するなどして対応することは可能でしょうか？
上記URLにて、上から、①Youtubeの埋め込み、②クラシックにURLをコピペ、③アメーバブログでのカード表示を載せています。埋め込みが許可されていない場合①、②のように「動画を再生できません」となるため、③のようにカードでリンクを作成したいです。
アメーバブログで、Youtube動画のURLをコピペすると、ブログカードのようになるため、それをコピペして貼っています。
環境情報：
----------------------------------------------
サイト名：歌詞でハングル勉強 カサコンブ
サイトURL： https://kpop-waiwaisou.com
ホームURL： https://kpop-waiwaisou.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/monochrome/style.css
WordPressバージョン：5.9.3
PHPバージョン：7.4.25
ブラウザ：Mozilla/5.0 (iPhone; CPU iPhone OS 15_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/101.0.4951.58 Mobile/15E148 Safari/604.1
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja
----------------------------------------------
テーマ名：Cocoon
バージョン：2.4.3
カテゴリ数：10
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2022/05/BAE4AEBE-369E-4629-9DDB-7F8E087BE18F.jpeg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 4.2.4
ConoHa WING コントロールパネルプラグイン 1.2
ConoHa WING 自動キャッシュクリア 1.0.0
EWWW Image Optimizer 6.5.2
SiteGuard WP Plugin 1.6.1
WP Multibyte Patch 2.9
XML Sitemap & Google News 5.3.3
Yoast Duplicate Post 4.4
----------------------------------------------
----------------------------------------------
2022年5月23日 02:55
waisouさん
添付のように、ブログカードブロックを使用し、URLを半角の"["、"]"で囲めば、ブログカードにはなるようです。
ただし、サムネイルはYouTubeサイトのスクリーンショットになってしまうようです。
わいひら reacted
Topic starter
2022年5月23日 04:59
ご返答ありがとうございます。
ブログカードブロックでの確認はできました。ですが、Youtubeサイトのサムネイル、タイトルになっているので、使用できません。
既存のブロックなどで、URLリンク先の動画サムネイル、タイトルを表示したカードにすることは可能でしょうか？
絶対ブログカード形式にしたいというこだわりはなく、動画サムネイルにタイトルを表示し、リンクで飛べるような形でも問題ないです。
下記のコードは一例ですが、Youtubeのタイトルが取得できる方法も、併せてご教示いただきたいです。
▼一例のコード
<a href="https://youtu.be/Os_6c5j6YiQ"><img src="http://i.ytimg.com/vi/
Os_6c5j6YiQ/hqdefault.jpg"></a>
Youtube動画タイトル部分
2022年5月23日 05:30
waisouさん
すみませんが、スマホからなもので調べられないです。
YouTubeのサムネイルは取得できるみたいですから、ブログカードのサムネイルを置き換えることもできそうですけど。
あとは、ブログカード形式のものを作ってくれるサービスもありますから、それを使ってみるとか。
はてなブログカードのような美しい外部リンクをクリック一発で作成する方法
https://nelog.jp/hatenablogcard
上記のはてなの方法だと上手くいきそうですけど。
ちなみに、最初にご要望は書いて欲しいです。
付け足したり、これはダメという条件を後から言われても・・・とは思ってしまいます。
私はこれにて失礼します。
そろそろ準備がありますので。
わいひら reacted
Topic starter
2022年5月23日 08:29
再度、ご返答ありがとうございます。
cocoonにあるもので、はてなやアメーバのようなブログカードを作成できるか確認をしたかったのですが、現状無いように見受けられます。
アメーバブログにURL貼るやり方が、自分が知る一番早い方法なので、それで対応しようと思います。
2022年5月23日 12:25
@waisou さん
この方法ではご希望に合わないのでしょうか？以下の動画を例にします。
https://www.youtube.com/watch?v=V77Zk9VMF-I
① 段落ブロックに以下のどちらかを記入する。
URL をそのまま記入。
https://www.youtube.com/watch?v=V77Zk9VMF-I
共有にある短縮 URL を記入。
https://youtu.be/V77Zk9VMF-I
② リンクに変換する
埋め込みが制限されている YouTube の URL を段落ブロックに記入すると「このコンテンツを埋め込めませんでした。」と表示されます。また、その下に「リンクへ変換」ボタンがあります。この「リンクへ変換」をクリックします。
③ Cocoon 設定で外部ブログカードを有効にする。
添付画像は、その結果です。
This post was modified 2年前 2回 by Akira
わいひら reacted
2022年5月23日 18:52
@waisou さん
アメブロをお使いということなので
以下の方法で、如何でしょうか？
少し手間ですが
① 画像１は、通常のブログカード（外部ブログ）のままです。
② 画像２は、アメブロに１度URL貼り付けして、アメブロ上のHTMLを
エディタ（VS Code）等で編集し後、WordPressサイトのカスタムHTMLに貼りつけたもの
③ 画像３は、YoutubeのURLをアメブロに貼り付け、２と同様に加工したもの
④ 画像４は、アメブロ上の（Yotube分の）HTMLをエディタで編集しているところ
・ここでは、全体の枠のwidthやheightの値をお好みに変更
・また、内部の画像にwidthやheightの値をお好みに変更
・そして、最も肝心な部分のogpCard_TitleやogpCard_description部分も変更しています。
（＜br＞や＜ｂ＞＜/b＞なども適度に）
This post was modified 2年前 by Yamachan11
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。