せいかつブログ

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

この記事は約6分で読めます。

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

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

本記事の内容

1.ブログカードに「続きを読む」を入れるやり方(下の図の①)

2.ブログカードの抜粋文字を消すやり方(下の図の②)

この記事を読むとできること
まちゃりさ
まちゃりさ

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

それでは、どうぞ!

スポンサーリンク

事前準備

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

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

[Cocoon設定]→[ブログカード]

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

■ブログカード表示:「ブログカード表示を有効にする」に☑を入れる

■サムネイルスタイル:縮小画像の位置です。お好みの方を選択する

■日付表示:「なし」を選択
(※「なし」以外を選んでも「続きを読む」の下に隠れてしまう)

■リンクの開き方:「新しいタブで開く」を選択(☑なしでもOKです)

「内部ブログカード設定」の項目設定

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

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

「続きを読む」枠を表示

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コードを貼り付けます。

変更が心配な方は、テキストなどにあらかじめバックアップをとっておきます。

「Cocoon Child」と「style.css」の設定確認、コード追記

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

ファイル更新

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

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

ブログカードに「続きを読む」が表示される

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

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

「文言」の変更

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

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

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

コードをカスタマイズ

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

content: ‘記事を読む \00bb’; /* 内部リンク右下枠の文言 */

文言の変更

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

content: ‘続きを読む \00bb’; /* 内部リンク右下枠の文言 */

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

ファイル更新

「色」の変更

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

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

① background-color: #ffd242; /* 内部リンク右下枠の背景色 */

② color: #fff; /* 内部リンク右下枠の文字色 */

色の変更

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

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

① background-color: #c0c0c0; /* 内部リンク右下枠の背景色 */

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

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

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

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

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

こんな感じになります。

抜粋文字を消す

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

CSSをコピーする

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

.blogcard-snippet{
display:none;
}

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

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

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

[外観]→[テーマエディタ]と進む

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

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

変更が心配な方は、テキストなどにあらかじめバックアップをとっておきます。

「Cocoon Child」と「style.css」の設定確認、コード追記

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

ファイル更新

余談ですが、CSSコードを追記するときは、下のように追加するコードの頭にコメントをつけておくと、後から探すのがラクになるのでおすすめです。

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

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

ブログカードの投稿抜粋が消える
まちゃりさ
まちゃりさ

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

お疲れ様でした!

まとめ

いかがでしたか?

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

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

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

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

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

参考

今回の記事は、

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

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

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

コメント

  1. とうげ より:

    僕の記事を参考にしていただき、ありがとうございます。

    • macharisamacharisa より:

      峠さん、コメントいただきありがとうございます。
      こちらこそCocoonのカスタマイズの記事、いつも参考にさせていただいています。
      他の記事と比較しても、大変わかりやすい有益な記事で、いつも、こんなこともできるのか!と感動しています。
      今後とも参考にさせていただくかと思いますが、万が一、お気を悪くさせるような点があれば申しつけ下さい。
      どうぞよろしくお願いいたします。

SNS

最近の投稿

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