【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】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする！）を参考に作成しています。

【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする！

Cocoon使用者向けにブログカードに「続きを読む」を入れるカスタマイズをやさしく説明します。その他ごちゃっとするところを消してすっきり見せるようなカスタマイズもできるようになります。CSSを使いますが、コピペってするだけなので誰でも画像を見ながら簡単にできます

kenjineer0224.com

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