PR

【WordPress/cocoon】内部ブログカードうまく表示できない対処法 2024

アフィリエイト広告を利用しています

Wordpressロゴ wordpress
スポンサーリンク

内部ブログカード作成手順

1. ブログカードの土台を作成

左上の「田」ボタンを押すと「×」に変化してアイテムボタンが展開されます。
その中にある「ブログカード」を選択します。

1、ブログカードアイコンを選択する 完

「ブログカード」が、横長長方形の「四角い枠」として表示されます。

ブログカードの四角い枠

右上のカドにある「ラベルなし」は、ワードプレス右端の設定帯で変更できます。

2. 土台のカードに、記事のリンクを貼る 

作成した土台をクリックすると、カード上にカーソルが点滅します。

他の記事では…

他の記事では「ここに直接URLをコピペで貼るとブログカードができます」と書いてある記事が多数ありましたが、それだけではリンクされず、四角い枠上に「URLという文字」が書いてあるだけで、リンクさせたい記事へは飛びませんでしたので、きちんとリンクできるようにこれから解説します。

また、他の記事の中には「URLに全角日本語が入っているとリンクされません」という記事も多く散見されましたが、解説をよく見ると、上記のようにブログカードの四角い枠上に直接URLをコピペで貼るやり方で解説していたので、その方法だときちんとブログカードになりません。これについても、上記のとまとめて、このあと解説していきます。

手順の解説

1: リンクしたい記事を貼る

作成したブログカードの四角い土台枠の中をクリックするとカーソルが点滅し、横長のメニューバーが現れるので、右側にある「(ー)」マークをクリック

リンクから選ぶ場面

展開された四角の枠に、リンクしたい記事を検索し、出てきたものから希望の記事を選択すると

以下のように、リンクとして貼り付けられます。

1-4-2選択した自分の記事

ただ、このままでは、公開されている記事を見ても下のように、青文字のリンクだけしか表示されておらず、ブログカードとしてしっかり表示できていません。

原因は、HTMLの中に貼られているURLが日本語表記の全角になっていることだったので、ブログカードにしたい記事のURLをコピーしてHTMLの中のブログのURLをそっくり入れ替えます。

2: 貼った記事のURLを表示

その手順 
①作成したブログカード上で右クリックし、出てきたメニューバーの一番右にある「…」の縦バージョンをクリック。

②「HTMLとして編集」をクリック。

HTMLとして編集

「HTMLとして編集」をクリックして展開したURLをよく見ると、赤い四角で囲った部分が全角日本語のタイトルになっているので、

3: リンクしたい記事のURLをコピー

この部分に、リンクさせたい記事の半角英語表記のURLをコピペして入れ替えます。

サイトのURLを選択

リンクさせたい記事を別窓で開き、右帯の設定を開くと、その記事のURLがコピーできます。

備考: 貼りたい記事のURLを半角英文字にする方法

そもそも、この記事のURL自体が半角英文字でなければならないので、事前にブログURLを半角英語で作っておく必要があります。

① ワードプレスの左上「W」マークをクリック

② 展開したメニューの中の「投稿一覧」からリンクさせたい記事を探す

③ 「クイック編集」をクリック

④ 「スラッグ」の欄に半角英文字でスラッグ文を作成。

スラッグ文には、ある一定のルールがあるので、作り方の詳細は、下記の記事をご参照ください。

4: URLをコピーしたら確認してみよう
HTMLとして編集ボタン後

上の画像の全角日本語URL部分を、半角英語のURLに上から貼り付けると、下の画像のようになります。

貼り付けた後 完

そして、しっかり思い描いていたブログカードが表示されます。

上記のように、しっかりアイキャッチ画像とタイトル文とが表示されていたら成功です。

この記事を書いた経緯

ブログカードを作ろうと、ググって調べた記事に書いてあるとおりに試しましたが、全く成功しなかったので、あれよこれよで成功するまでたくさんの記事を読み漁る結果となってしまい、結果、どれもこれも失敗に終わりました。

「もういいや」と諦めて別の作業に取り掛かろうとした時に「ハっと」閃きました。

試しに閃いた方法でやってみたところ、これがなんと大成功!

忘れないうちに、備忘記録として記事に収めました。

自分も忘れた頃に、またこの作成した記事を読むことにはなるでしょうけど、皆さんにも同じところでつまづいている方がいらっしゃったら、きっとお役立てになるかなと思い、公開記事にしています。

自分は、相当数の記事をググって検索したものをハジからハジまで読み漁った結果の失敗だったので、おそらくここまで詳細解説している記事はこの記事だけでしょう。

ただ、検索した記事も相当古い記事もあったので、作成した当時ではその記事で解決できたのでしょうけど、現時点のバージョンでは解決できなかったので、この記事に辿り着いた方で、同じような状況の方でしたら、ここで解決できると思います。

たまたま、手探りであれやこれやで解決できたので結果おーらい。
同じ悩みでつまづいている方に向けて、この記事を参考にしていただけたら幸いです。

パパさんBlog

パパさんBlogでは、メインは投資記事ですが、サブで、困ったことの備忘記録も記事にしています。

おそらく、初心者であれば同じようなところでつまづいている方も多いかと存じます。

そんな同じようなところでつまづいてる方にもお役立てできたら幸いです。

もしよろしければ、サイト内の他の記事もタメになるようなものもあるかと思いますので是非お立ち寄りください。

タイトルとURLをコピーしました