【Cocoonカスタマイズ】ブログカードをスッキリ表示する方法｜「続きを読む」＋抜粋非表示

今回は、WordPressテーマ「Cocoon」で
ブログカードの見た目をスッキリさせる方法を解説します。

どちらも5分ほどでできる簡単カスタマイズです。

それでは、どうぞ！

事前準備｜ブログカード設定を確認する

まずは、Cocoon側の設定を確認します。

手順
[WordPress管理画面] → [Cocoon設定] → [ブログカード]

以下の項目をチェックします。

• ブログカード表示：☑ 有効にする
• サムネイルスタイル：お好みでOK
• 日付表示：「なし」がおすすめ
• リンクの開き方：「新しいタブで開く」（任意）

※日付は後から追加する「続きを読む」と重なるため非表示推奨です

ブログカードに「続きを読む」を表示する方法

ブログカードの右下に「続きを読む」ボタンを追加します。

• CSSコードをコピー
• テーマエディタに貼り付け
• 表示を確認

1. CSSコードをコピー

まず、次のCSSコードをコピーします。

.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #ffd242; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}

2. テーマエディタへ貼り付ける

次に、CocoonのテーマエディタへコピーしたCSSコードを貼り付けます。

右上のテーマが「Cocoon Child」となっていることを確認しましょう！

更新後、「ファイルの編集に成功しました。」が表示されればOKです。

3. 表示を確認

ブログカードに「続きを読む」が表示されていればOKです。

ここまでで、ブログカードに「続きを読む」を表示させる設定は完了です。

「続きを読む」の文言・色を変更する

中身の「続きを読む」の文言、あるいは枠や文字の色を変えたい場合もあると思います。

次からは、その手順をご紹介します。

• 文言を変更する
• 色を変更する

1. 文言を変更する

まず、「続きを読む」の文言を別の文言に変更します

先ほど、CSSコードを貼り付けた場所に戻ります。（[外観]→[テーマエディタ]）

右上のテーマ「Cocoon Child」、テーマファイル「style.css」の画面です。

下の赤文字部分「記事を読む」を別の言葉に上書きします。
（例：「詳細はこちら」「チェックする」など）

私は、「記事を読む」→「続きを読む」に変更しました。

変更後、[ファイルを更新]を押します。

2. 色を変更する

続いて枠や文字の色を変更します。

今度は、貼り付けたCSSコードの赤字2箇所を変更します。

• ①枠の背景色
• ②枠内の文字色

私は、ボタンの背景色（①）のみ灰色に変更しました。

色コードは以下のサイトで確認できます。

サイトのデザインに合わせると統一感が出ます。

ブログカードの抜粋文字を消す

さらにスッキリさせたい場合は、
説明文（抜粋）を非表示にできます。

↓ こんな感じになります。

先ほどの手順より、さらに簡単にできます。

• CSSコードをコピー
• style.cssに貼り付け
• 表示確認

1. CSSをコピーする

まず、次のCSSコードをコピーします。

.blogcard-snippet{
display:none;
}

2. テーマエディタへ貼り付ける

先ほどと同じ手順で、style.cssの下に追加します。

3. 表示確認

ブログカードが
タイトルのみのシンプル表示になります。

補足｜CSSはコメントをつけて管理するとラク

後から見返すときのために、コメントをつけるのがおすすめです。

/************************************
** ブログカード　抜粋文字を消してタイトルのみにする（2021年3月12日）
************************************/
.blogcard-snippet{
display:none;
}

まとめ

いかがでしたか？

今回は、Cocoonのブログカードをスッキリさせる方法を解説しました。

• ブログカードに「続きを読む」を入れるやり方
• ブログカードの抜粋文字を消す（非表示）やり方

この2つを設定するだけで、
見た目が整ってクリック率アップにもつながります。

Cocoonのカスタマイズについては、こちらの記事も参考になります。

• 【Cocoon】やってよかったおすすめカスタマイズ10選（ブログ初心者向け）
• 【Cocoon】簡単！サイト型トップページの作り方（図解付き）

・