PR ブログ

【Cocoon】ブログカードの抜粋文&タイトルの文字数を設定する【コピペOK】

2021年2月9日

【Cocoon】ブログカードのタイトル&抜粋文の文字数を設定する【コピペOK】

今回は『【Cocoon】ブログカードの抜粋文&タイトルの文字数を設定する【コピペOK】』について初心者にもわかりやすく解説します。

「ブログカードのタイトルを制限したい」
「Cocoonでブログカードの抜粋文を全文表示したい」

こんな方におすすめです。

ブログカードのタイトル&抜粋文の文字数を設定する

今回解説するのは以下の2つです。

  • ブログカードのタイトル&抜粋文の文字数を制限する
  • ブログカードの抜粋文を全文表示、非表示にする

是非参考にしてください。

コードのコピペ場所

まず、コードを追加する場所を表示しましょう。

管理画面から[外観➡︎テーマエディター]を選択し、[編集するテーマを選択]がCocoon Child(子テーマ)であることを確認してください。

なってない場合はCocoon Childに設定しましょう。

CSSコードのコピペ場所

ブログカードのタイトル&抜粋文の文字数を制限する

Cocoonのブログカードは、デフォルトだと以下のように表示されます。

ブログカードのタイトル&抜粋文の文字数を制限する

「タイトル&抜粋文はこんなに表示されなくていい」という方のために、文字数を制限し、最後に『...』を表示させる方法を解説します。

タイトルの文字数を制限する

タイトルの文字数を制限する

まず、[外観➡︎テーマエディター➡︎Cocoon Child: functions.php]を開いてください。

そして、以下のコードをコピペしましょう。

//内部・外部ブログカードのタイトルを32文字で切り出し
add_filter('cocoon_blogcard_title', function ($title){
if (mb_strlen($title) > 32) {
$title = mb_substr($title, 0, 32).'...';
}
return $title;
});

引用元:ブログカードのタイトル文字数が32以上の場合は省略して出力するカスタマイズ例

一番下にコピペしてください。

このコードをfunctions.phpにコピペすると、タイトルが32文字に制限されます。

タイトルの省略する文字数を変えるときは、青いマーカーの数字を書き換えましょう。

抜粋文の文字数を制限する

先程と同じように、以下のコードをコピペしてください。

//内部・外部ブログカードのスニペット部分の文字列制御
add_filter( 'cocoon_blogcard_snippet', function ($snippet){
return mb_substr($snippet, 30);//文字数となる数字は好みで変更してください
} );

引用元:内部ブログカードの抜粋文字数を指定したい | カスタマイズ相談 | Cocoon フォーラム

このコードをfunctions.phpにコピペすると、抜粋文の30文字以上は省略されます。

こちらも、青いマーカーの数字が表示される文字数です。

ブログカードの抜粋文を全文表示、非表示にする

ブログカードの抜粋文を全文表示、非表示にする

続いて、ブログカードの抜粋文を全文表示、非表示にする方法を解説します。

ブログカードの抜粋文を全文表示させる方法

ブログカードのデフォルトは、以下のように抜粋文が見切れています。

ブログカードの抜粋文を全文表示させる方法


少し見にくいと思ったので、抜粋文を全文表示させる方法を解説します。

まず、[外観➡︎テーマエディター➡︎Cocoon Child: style.css]を開いてください。

そこに、以下のコードをコピペしましょう。

.blogcard-content {
  max-height: 30em;
}

このコードをコピペすると、ブログのスニペットが見切れることはなくなります。

ブログカードの抜粋文を非表示にする方法

続いて、ブログカードの抜粋文を非表示にする方法を解説します。

前回と同じstyle.cssに、紹介するコードをコピペしてください。


ブログカードの抜粋文を非表示にする

/*ブログカードの抜粋文を非表示にする*/ 
.blogcard-snippet{
   display: none;
}

内部ブログカードのみ抜粋文を非表示にする場合

/*内部ブログカードの抜粋文を非表示にする*/
.internal-blogcard-snippet{
display: none;
}

外部ブログカードのみ抜粋文を非表示にする場合

/*外部ブログカードの抜粋文を非表示にする*/
.external-blogcard-snippet{
  display: none;
}


以上です。

コードのコピペが完了したら『ファイルを更新』をクリックしましょう。

ブログカードの抜粋文を非表示にする方法

全コードのまとめ

それでは、今回紹介したコードを全てまとめます。👇

「カスタマイズが難しい…」という方へ

Cocoonはカスタマイズが必要なので、エラーの対処やCSSの学習しなければいけません。「Cocoonでは収益化は難しいな…」という印象です。

僕もCocoonのWEBデザインに3ヶ月ほどかかってしまい、収益化まで遠回りしてしまいました。

そこで、「カスタマイズが難しい…」という方はAFFINGER6の導入がオススメです。僕もAFFINGER6でサイトを運営しており、13歳で月収5桁を達成しました。

AFFINGER6は、それなりに稼ぐアフィリエイターから大人気のテーマなので、詳しくチェックしておきましょう。

参考:CocoonとAFFINGER6を比較

【比較】稼ぎたいならCocoonよりAFFINGER5がおすすめな理由
【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの?【移行すべき理由】

続きを見る

「収益化するにはCocoonでいいの?」という方は、以下の記事で「僕が有料テーマをオススメする理由」をすべて解説しているので、参考にしてください。

参考:Cocoonで収益化できない理由

【事実】Cocoonで収益化できない本当の理由【解決策あり】

続きを見る

※無料ニュースレターを発信中:僕は持病を抱えつつも、13歳でブログで月収5万円を達成しました。その状況で得た「健康×ビジネス」の知識をニュースレターで共有していきます。無料登録はこちら。いつでも解約できます。

-ブログ
-