Cocoonでブログカードが出ない。URLになってしまう。囲みブログカードを作りたい!【初心者向け】

ブログ
Photo by Luis Quintero on Unsplash

超初心者なのに、WordPressの「Cocoon」をインストールして何とかブログをスタートしました。

HTML?CSS?何のこと?未だわかっていない上、マニュアルに書いてある意味もわからないほどのダメっぷり。

そんな私ですが、記事の中で ”過去に書いた記事も見てね、参考にしてね。”というリンクを設定したくなりました。ブログカードです。

やってみたら意外に簡単に設定できましたので、同じお悩みの方にお伝えします。

ブログカードは作れた。でも枠に囲まれた文字を入れたい!

CocoonではURLをコピーしてただ貼り付けるだけで、このように飛ばしたいリンク先がでてきます。

このリンクを四角く囲ってカードのようにおしゃれに見せたものが、「ブログカード」。
つまりこれがブログカードなので、もう解決。 ありがたい~。

う~ん、でも左上に、四角く「関連記事」とか「あわせて読みたい」という文字が入っていたほうがステキにです。

で、たどりついたのが、Cocoonを作られた わいひらさん のこのページ。
求めていたものは「囲みブログカード」というのがわかりました 。でも解決できませんでした。

囲みブログカード拡張スタイルの使い方
ブログカード作成用のURLを囲むだけで様々なタイプのブログカード表示ができるようになる機能の使用方法です。

囲みブログカードを作る2つの方法

苦戦したのは「ビジュアルエディター」がどこにあるのか。
通常の画面は「ブロックエディター」なんです↓

ビジュアルエディター↓

でも大丈夫。早速「ブログカード」を作りましょう。

ビジュアルエディターからのブログカードの入れ方

① ブロックの左にある プラス(+)ボタンをクリックし「フォーマット」タブのなかにある「クラシック」を選ぶ これででてくるのが「ビジュアルエディター」です。

②「スタイル」をクリック

③一番下の「囲みブログカードラベル」にカーソルを合わせると色々な文言を選択できます。

④例といして「あわせて読みたい」を選択しました。
色のついたところに、入れたいサイトのURLをいれます。

見てみたら、このようにできていました。

ブロックエディターからの ブログカードの入れ方

① ブロックの左にある プラス (+) ボタンをクリックし 「Cocoonブロック」 タブのなかにある「 ブロクカード 」を選ぶ

②この画面がでてきます

③まず、右上にある「ラベルなし」の文字を変更します

上記の状態にカーソルがあると右にある「ブロック」タブに「スタイル設定」がでています。
ラベルのプルダウンから好きな文字を選びます。

④次にURLをいれます。
また②の状態で上にあるの3つの点をクリックし、HTMLとして編集をクリック

④コードがでてきます。この2行目の<p></p>の間にカーソルをおき、飛ばしたいURLを入れます。

⑤プレビューするとこんな感じで希望のブログカードがでてくるはずです。

ということで完成です!

同じことで困っている方に参考になれば嬉しいです。

無料で多彩な機能が使えるCocoon。本当にありがたいですよね。

最後までお読みいただきありがとうございました。

海to空
umitosora

こんにちは。海野空です。
好きなこと、好きなもの、役に立ったものを詰め込んだサイトです。
旅行が大好きで海外で訪ねた国は70か国になりました。
旅や本、生活に密着したあれこれを記しています。
どうぞよろしくお願いします。

umitosoraをフォローする
ブログ
シェアする
umitosoraをフォローする
海から空  umi to sora
タイトルとURLをコピーしました