超初心者なのに、WordPressの「Cocoon」をインストールして何とかブログをスタートしました。
HTML?CSS？何のこと？未だわかっていない上、マニュアルに書いてある意味もわからないほどのダメっぷり。
そんな私ですが、記事の中で ”過去に書いた記事も見てね、参考にしてね。”というリンクを設定したくなりました。ブログカードです。
やってみたら意外に簡単に設定できましたので、同じお悩みの方にお伝えします。
ブログカードは作れた。でも枠に囲まれた文字を入れたい！
CocoonではURLをコピーしてただ貼り付けるだけで、このように飛ばしたいリンク先がでてきます。
このリンクを四角く囲ってカードのようにおしゃれに見せたものが、「ブログカード」。
つまりこれがブログカードなので、もう解決。 ありがたい～。
う～ん、でも左上に、四角く「関連記事」とか「あわせて読みたい」という文字が入っていたほうがステキにです。
で、たどりついたのが、Cocoonを作られた わいひらさん のこのページ。
求めていたものは「囲みブログカード」というのがわかりました 。でも解決できませんでした。
囲みブログカードを作る２つの方法
苦戦したのは「ビジュアルエディター」がどこにあるのか。
通常の画面は「ブロックエディター」なんです↓
ビジュアルエディター↓
でも大丈夫。早速「ブログカード」を作りましょう。
ビジュアルエディターからのブログカードの入れ方
① ブロックの左にある プラス（＋）ボタンをクリックし「フォーマット」タブのなかにある「クラシック」を選ぶ これででてくるのが「ビジュアルエディター」です。
②「スタイル」をクリック
③一番下の「囲みブログカードラベル」にカーソルを合わせると色々な文言を選択できます。
④例といして「あわせて読みたい」を選択しました。
色のついたところに、入れたいサイトのURLをいれます。
見てみたら、このようにできていました。
ブロックエディターからの ブログカードの入れ方
① ブロックの左にある プラス （＋） ボタンをクリックし 「Cocoonブロック」 タブのなかにある「 ブロクカード 」を選ぶ
②この画面がでてきます
③まず、右上にある「ラベルなし」の文字を変更します
上記の状態にカーソルがあると右にある「ブロック」タブに「スタイル設定」がでています。
ラベルのプルダウンから好きな文字を選びます。
④次にURLをいれます。
また②の状態で上にあるの３つの点をクリックし、HTMLとして編集をクリック
④コードがでてきます。この２行目の<p></p>の間にカーソルをおき、飛ばしたいURLを入れます。
⑤プレビューするとこんな感じで希望のブログカードがでてくるはずです。
ということで完成です！
同じことで困っている方に参考になれば嬉しいです。
無料で多彩な機能が使えるCocoon。本当にありがたいですよね。
最後までお読みいただきありがとうございました。
