【Cocoon】「この記事の信頼性」ボックスを作りました

「この記事の信頼性」とは下記のような、ブログ記事でよく見かけるやつです。

記事を書いた人の経験・専門性をアピールします。

この記事の信頼性

この記事の信頼性

貯蓄・投資で資産3,000万円超
情報系院卒・基本情報技術者
ブログで最高70,000PV/月
2児の父

「この記事の信頼性」コード

CocoonのプロフィールボックスのHTMLを改変して作りました。

使い方は後述します。

<div class="textwidget">
<div><i class="fa fa-check-square" style="color: #1e90ff;"></i> この記事の信頼性</div>
<div class="author-box border-element no-icon cf">
<figure class="author-thumb"><img class="avatar avatar-200 photo" src="https://baacash.com/wp-content/uploads/2025/06/252cdd4c1dba5c47123bf5513ba6bd1b.jpg" alt="ひつじ先輩" width="200" height="200" /></figure>
<div class="author-content">
<div class="author-description">
<p><i class="fa fa-check-square" style="color: #1e90ff;"></i> 貯蓄・投資で資産3,000万円超<br />
<i class="fa fa-check-square" style="color: #1e90ff;"></i> 情報系院卒・基本情報技術者<br />
<i class="fa fa-check-square" style="color: #1e90ff;"></i> ブログで最高70,000PV/月<br />
<i class="fa fa-check-square" style="color: #1e90ff;"></i> 2児の父</p>
</div>
</div>
</div>
</div>

内容を改変して使ってくださいませ。

画像は手動で作ってもいいですが、自分はCopilotにキャラクター画像を渡し

画像の足元のあたりに「ひつじ先輩」という文字列を追加してください。

と指示して作ってもらいました。

差し替えの手順は、

です。

「この記事の信頼性」使い方

自分は、ページがスマホで読まれたときは、HTML。

PCのときは、画像が表示されるようにしています。

アドセンスを導入している人が多いかと思いますので、

のパターンで手順を書きます。

ひつじ

以下、かなりAIの助けを借りて書きました(引用表示)。
誤出力な部分は直しておりますので、ご了承ください。

テンプレートに登録

PC版用の画像を準備

あらかじめPC版の画像を作ります。

HTMLを適当な記事に入れるなどしてPC表示させて、スクショ。

余計な部分は切って、

のような画像を作ります。

PC表示用のテンプレートを作る

Cocoonのテンプレート機能で画像を登録する方法
WordPress管理画面から「Cocoon設定」→「テンプレート」へアクセス
「新規追加」をクリック
テンプレート名を入力
内容欄で「メディアを追加」ボタンをクリック
画像を選択し、「投稿に挿入」をクリック
「保存」をクリックして完了

スマホ表示用のテンプレートを作る

Cocoonのテンプレート機能でHTMLを登録する方法
WordPress管理画面から「Cocoon設定」→「テンプレート」へアクセス
「新規追加」をクリック
テンプレート名を入力
内容欄にHTMLコードを直接記述
(「コード」のタブを選んで入力します)
「保存」をクリックして完了

ウィジェットで出す

1. ウィジェット設定画面へアクセス

WordPress管理画面→「外観」→「ウィジェット」

2. PC用画像テンプレートの設定

1. 「投稿本文中」ウィジェットエリアを選択
2. 「テキスト（PC用）」ウィジェットを追加
3. テキスト欄に以下を記述：

4. 表示設定で「投稿ページ」のみにチェック

3. スマホ用HTMLテンプレートの設定

1. 同じく「投稿本文中」ウィジェットエリアを選択
2. 「テキスト（モバイル用）」ウィジェットを追加
3. テキスト欄に以下を記述：

4. 表示設定で「投稿ページ」のみにチェック

4. 保存して完了

これで文中最初のH2タグ手前に、デバイスに応じて異なるテンプレートが投稿ページのみに表示されます。

CocoonのプロフィールボックスのSNSアイコンのカスタマイズも記事を書きました。

【Cocoon】プロフィールSNSアイコンを「色付き」にカスタマイズ。CSSだけ

Cocoonのプロフィールボックス内のSNSアイコンだけをCSSで簡単にカスタマイズする方法を解説する。初心者でも使えるコード付き。

baacash.com

2025.07.01

ぜひ、読んでみてください。