超初心者なのに、WordPressの「Cocoon」をインストールして何とかブログをスタートしました。
HTML?CSS?何のこと?未だわかっていない上、マニュアルに書いてある意味もわからないほどのダメっぷり。
そんな私ですが、記事の中で ”過去に書いた記事も見てね、参考にしてね。”というリンクを設定したくなりました。ブログカードです。
やってみたら意外に簡単に設定できましたので、同じお悩みの方にお伝えします。
ブログカードは作れた。でも枠に囲まれた文字を入れたい!
CocoonではURLをコピーしてただ貼り付けるだけで、このように飛ばしたいリンク先がでてきます。
このリンクを四角く囲ってカードのようにおしゃれに見せたものが、「ブログカード」。
つまりこれがブログカードなので、もう解決。 ありがたい~。
う~ん、でも左上に、四角く「関連記事」とか「あわせて読みたい」という文字が入っていたほうがステキにです。
で、たどりついたのが、Cocoonを作られた わいひらさん のこのページ。
求めていたものは「囲みブログカード」というのがわかりました 。でも解決できませんでした。
![](https://umitosorablog.com/wp-content/uploads/cocoon-resources/blog-card-cache/1c5e886c4572a26ce1b505a9658205cc.jpg)
囲みブログカードを作る2つの方法
苦戦したのは「ビジュアルエディター」がどこにあるのか。
通常の画面は「ブロックエディター」なんです↓
![](https://umitosorablog.com/wp-content/uploads/2019/07/66c19942ab4ba346fdb64ccc04cde373-800x220.png)
ビジュアルエディター↓
![](https://umitosorablog.com/wp-content/uploads/2021/02/2021-02-01_23h31_26-800x134.png)
でも大丈夫。早速「ブログカード」を作りましょう。
ビジュアルエディターからのブログカードの入れ方
① ブロックの左にある プラス(+)ボタンをクリックし「フォーマット」タブのなかにある「クラシック」を選ぶ これででてくるのが「ビジュアルエディター」です。
![](https://umitosorablog.com/wp-content/uploads/2021/02/2021-02-01_23h09_02.png)
②「スタイル」をクリック
![](https://umitosorablog.com/wp-content/uploads/2021/02/2021-02-01_22h58_30-800x155.png)
③一番下の「囲みブログカードラベル」にカーソルを合わせると色々な文言を選択できます。
![](https://umitosorablog.com/wp-content/uploads/2021/02/image-1.png)
④例といして「あわせて読みたい」を選択しました。
色のついたところに、入れたいサイトのURLをいれます。
![](https://umitosorablog.com/wp-content/uploads/2021/02/2021-02-01_23h25_21-800x90.png)
見てみたら、このようにできていました。
![](https://umitosorablog.com/wp-content/uploads/2021/02/image-2-800x248.png)
ブロックエディターからの ブログカードの入れ方
① ブロックの左にある プラス (+) ボタンをクリックし 「Cocoonブロック」 タブのなかにある「 ブロクカード 」を選ぶ
![](https://umitosorablog.com/wp-content/uploads/2021/02/2021-02-01_23h10_53.png)
②この画面がでてきます
![](https://umitosorablog.com/wp-content/uploads/2019/07/080047c41d77c58d97cf85ec35d0e15b-800x171.png)
③まず、右上にある「ラベルなし」の文字を変更します
上記の状態にカーソルがあると右にある「ブロック」タブに「スタイル設定」がでています。
ラベルのプルダウンから好きな文字を選びます。
![](https://umitosorablog.com/wp-content/uploads/2021/02/2021-02-01_23h22_24.png)
④次にURLをいれます。
また②の状態で上にあるの3つの点をクリックし、HTMLとして編集をクリック
![](https://umitosorablog.com/wp-content/uploads/2021/02/2021-02-01_23h13_38.png)
④コードがでてきます。この2行目の<p></p>の間にカーソルをおき、飛ばしたいURLを入れます。
![](https://umitosorablog.com/wp-content/uploads/2021/02/2021-02-01_23h17_05.png)
⑤プレビューするとこんな感じで希望のブログカードがでてくるはずです。
![](https://umitosorablog.com/wp-content/uploads/2021/02/2021-02-01_23h38_54-800x276.png)
ということで完成です!
同じことで困っている方に参考になれば嬉しいです。
無料で多彩な機能が使えるCocoon。本当にありがたいですよね。
最後までお読みいただきありがとうございました。