【Cocoon／カスタマイズ】ブログカードの見た目をスッキリさせる

こんにちは、まちゃりさです。

今回は、Cocoonカスタマイズのうち、ブログカードの見た目をスッキリ表示させる方法について解説していきます。

まちゃりさ

設定は5分ほどで簡単にできるので、気軽に試してみてください！

それでは、どうぞ！

事前準備

最初にブログカードの設定について、確認しておきます。

ワードプレス管理画面で[Cocoon設定]→[ブログカード]と進みます。

「内部ブログカード設定」の次の項目設定を確認していきます。

ブログカードに「続きを読む」を入れる

続いて、ブログカードに「続きを読む」枠を表示させていきます。

CSSをコピーする

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

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

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

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

ワードプレス管理画面から、[外観]→[テーマエディタ]と進みます。

右上のテーマが「Cocoon Child」となっていることを確認し、テーマファイルで「style.css」（スタイルシート）を選択します。

ファイルの一番下に、先ほどコピーしたCSSコードを貼り付けます。

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

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

ブログカードを確認すると、このような表示に変わっているはずです。

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

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

「文言」の変更

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

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

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

下の赤文字部分「記事を読む」を別の言葉に上書きします。

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

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

「色」の変更

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

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

①は、枠の背景色、②は枠内の文字色です。

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

設定できる色は、以下のサイトから確認できます。

「#」から始まる好きな色のコードをコピーしてきます。

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

サイトのイメージにあわせて、自由に変更してみてください。

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

さらにブログカードをスッキリさせたいという方は、記事の抜粋文字を消すことができます。

こんな感じになります。

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

CSSをコピーする

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

.blogcard-snippet{
display:none;
}

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

次に、先ほど同様、CocoonのテーマエディタへCSSコードを貼り付けます。

ワードプレス管理画面の[外観]→[テーマエディタ]と進みます。

右上のテーマが「Cocoon Child」となっていることを確認し、テーマファイルで「style.css」（スタイルシート）を選択します。

ファイルの一番下に、先ほどコピーしたCSSコードを貼り付けます。

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

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

ブログカードを確認すると、こんな感じで投稿抜粋表示が消えているはずです。

まちゃりさ

ブログカードのカスタマイズ設定は以上です。

お疲れ様でした！

まとめ

いかがでしたか？

今回は、ブログカードをスッキリさせる方法として次の2つのやり方についてご紹介しました。

1. ブログカードに「続きを読む」を入れるやり方
2. ブログカードの抜粋文字を消すやり方

ブログカードが少しごちゃごちゃしていて、気になる・・という人は、ぜひ試してみてください。

それでは、今回はこの辺で終わります。

最後までお読みいただきありがとうございました。

参考

今回の記事は、

峠さんの記事（【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする！）を参考に作成しています。

https://kenjineer0224.com/cocoon-blog-card-customization/#toc1

kenjineer0224.com

毎回、Cocoonのカスタマイズ設定で参考にさせていただいています。