PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見ていただくだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁

ブログカードのすぐ上に文章を配置する方法をCocoonで解説

スポンサーリンク

blogcardカスタムのロゴ

こんにちは、解説ゾロです!

ブログカードを利用している皆さまへ!

とっても便利なブログカードですが、ブログカードのすぐ上に文章や文字を配置したい時に、文章とブログカードの間(行間)が広すぎて、なんかしっくりこない!・・・と、困ったことないですか?

下図の上段のように「文章とブログカードの間」が広すぎで、間延び~みたいな!

それを下図の下段のように「ブログカードのすぐ上に文章を配置」して「イイ感じ!」にすることが簡単にできてしまいます。

(解説画像では、ブログカードのすぐ上に配置したい文章を「腱鞘炎が治った、エルゴノミクスキーボードはこちらです⇩」とした例文で進めていきます)

blogcardカスタムのサンプル画像

今日は、ブログカードのすぐ上に文章や文字を配置する簡単なコードを解説します。実際の画像を見ながら解説しますので、あっという間にできてしまいます。一緒にやりましょ!

この解説は、記事の編集画面に、ビジュアル」とテキストの2つが用意され、レイアウトも安定しているWordPressのクラッシックエディターを使い、テーマはお馴染みのCocoonで解説しています。
スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログカードのすぐ上に文章を配置する方法をCocoonで解説

「Cocoon設定」で、「ブログカードの表示を有効」にしていない方は、この設定から始めて下さい。既にブログカード表示にチェックを入れている方は「まず実践」の見出しまで読み飛ばして下さい。

スポンサーリンク

Cocoonブログカード表示設定

WordPressでいつも記事を書いている「投稿を編集」の画面から、左ペイン(領域)の、
の「Cocoon設定」をクリックして下さい。すると「Cocoon設定」の画面に変わりますので、
の「ブログカード」をクリックです。
の「内部ブログカード設定」の画面に変わりますので「ブログカード表示」とある右の、
の「ブログカード表示を有効にする」に、☑を入れて下さい。□の上でクリックするとチェックが入ります。少し下に移動して、同じように、
の「外部ブログカード設定」で、
の「ブログカード表示を有効にする」にも、☑を入れて、外部ブログカードも表示できるようにします。最後は、忘れずに、
の「変更をまとめて保存」(「変更をまとめて保存」のボタンはページの「一番上」と「一番下」の2か所にありますのでどちらでもOKです)をクリックすれば、Cocoonの設定はできました。

blogcardカスタムのCocoon設定

⇧この縦長のスクリーンショットを撮りたい方は、簡単!縦長の【ウェブページ全体をスクリーンショット】する方法 ・ 超簡単!エッジなら縦長ウェブページ全体のキャプチャがすぐ撮れる で、解説しています。

まず実践!

いつも皆さんが記事を書く時の「ビジュアル」で、次のように入力してみます。

腱鞘炎が治った、エルゴノミクスキーボードはこちらです⇩

https://ここには、ブログカードを表示したいURLを入力します/

通常の画像

そのままで、右上の「変更をプレビュー」で見てみると、

腱鞘炎が治った、エルゴノミクスキーボードはこちらです⇩

2年間使い続けたマイクロソフト エルゴノミクスキーボード|レビュー
マイクロソフト エルゴノミクス キーボード 5KV-00006(ワイヤレス)を2年間使い続けた詳細レビューです。結論は普通のキーボードで痛めた手首が回復しました。普通のキーボードとポジションや角度の違いを画像で見ながら納得して下さい。
上の画像、文章とブログカードの間がチョット広すぎて、間延びしてないですか?この場合ですと文章の効果も弱くなり、デザイン的にもフィットしていません。

それでは、この「プレビュー画面」からいつもの「投稿を編集」の画面に戻って下さい。そして、
①の「ビジュアル」から、
②の「テキスト」をクリックして、テキスト画面でコードを見てみると、
blogcardwordpress切り替え画面
次のようなコードになっています。

<p>腱鞘炎が治った、エルゴノミクスキーボードはこちらです⇩</p>
<p>https://ここには、ブログカードを表示したいURLを入力します/</p>

コードを4か所変更するだけ

それでは、このテキストモードのまま、文章がブログカードのすぐ上に配置できるようにコードを3か所(太文字の部分)だけ書き換えて、ブログカードを表示したいURL先頭の「<p>」の1か所を削除してみましょう、書き換えは4つだけで簡単です。左上から順番に解説します。
1.「腱鞘炎が治った」の左の「<p>」を「<div>」に書き換えます。
2.同じ行の右端の「こちらです⇩」の右の「</p>」を「<br />」に書き換えます。
3.2行目の、URL先頭の「https」の左の「<p>」を、削除します。
4.同じ行のURL右端の「</p>」を「</div>」に書き換えます。これだけでOKです。
書き換えるとこんな感じです。⇩
<div>腱鞘炎が治った、エルゴノミクスキーボードがこちらです⇩<br />
<p>https://ここには、ブログカードを表示したいURLを入力します/</div>

コード変更後の画像

それでは、また「変更をプレビュー」してみましょう!
やりました!やりました!大成功ですね!ブログカードのすぐ上に文章を配置することができて、バランがよくなりました。

やり方のおさらい解説!

「投稿を編集」のいつもの画面(ビジュアル)で文章とURLを入力したら、右上に、
の「ビジュアル」と
の「テキスト」の切り替えがありますので、②の「テキスト」をクリックして下さい。

blogcardwordpress切り替え画面「腱鞘炎が治った、エルゴノミクスキーボードがこちらです⇩」をビジュアルで入力した後に、テキスト画面で次のような簡単なコードを3つ入れ替え(<div>・<br />・</div>)て入力し、1つ削除(<p>)するだけで、ブログカードのすぐ上に文章を配置することができます。

  1. 文章の頭に、<div>腱鞘炎が治った~~~~~
  2. 文章の末尾に、~~~~~がこちらです<br />
  3. 表示したいブログカードのURLの頭のコードは削除、<p>https://~~~~~
  4. 表示したいブログカードのURLの末尾に、https://~~~~~keyboard-review/</div>
テキスト画面で計3か所を入れ替えて、1つ削除してみると、こんな感じになります。⇩
<div>腱鞘炎が治った、エルゴノミクスキーボードがこちらです⇩<br />
https://ここには、ブログカードを表示したいURLを入力します/</div>

まとめ

divとbrの位置とURLの頭のコードの削除と、最後に</div>を忘れずに!この最後の、</div>はよく忘れてしまうようですので、お気を付けください。

<div>〇〇〇〇〇〇〇〇〇〇〇〇<br />
<削除>https://〇〇〇〇〇〇〇〇〇〇〇〇/</div>

気になっていることが解消すると、とっても気持ちがイイ・・・ですね!スッキリ!!

では、また。解説ゾロでした!

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