せいかつ ブログ

【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を使っていてブログカードを使用できるようになったはいいものの、自分の好みとちょっと違うなぁ…と感じてしまいましたので、いろいろ調べてブログカー

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

コメント

  1. とうげ より:

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

    • macharisamacharisa より:

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

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