こんにちは、ikuzo(いくぞう)です。
今回は、Cocoonのブログカードについてです。
ブログカードとは、リンク先のアイキャッチ画像、タイトル、抜粋文などをカード形式でまとめて表示しているものです。
サンプルなので押せませんが、↓こういうやつですね。
この記事ではCocoonのブログカードを表示させる方法と、ブログカード内の抜粋文を消す方法について説明します。
ブログカードは2種類ある
ブログカードは2種類あります。
1つは「内部ブログカード」で、もう1つは「外部ブログカード」です。
内部ブログカードは同じサイト内の別記事へのリンクで、外部ブログカードは別サイトにある記事へのリンクです。
Cocoonはそれぞれ個別に設定ができます。
Cocoonのブログカード設定
ブログカードの設定は「Cocoon設定」の「ブログカード」タブで行います。
設定は「内部ブログカード設定」と「外部ブログカード設定」に分かれていますが、内容はほぼ同じです。
ブログカード表示は、ブログカードを表示させたい場合はチェックを入れます。
チェックを入れないとURLがそのまま表示されます。
サムネイルスタイルは、記事のアイキャッチ画像をブログカード内の左側と右側のどちらに表示させるかです。
日付表示は「なし」「投稿日」「更新日」から選べます。私は「なし」にしています。
リンクの開き方については「同じタブで開く」か「新しいタブで開く」かを選べます。私は外部ブログカードのみチェックを入れています。
外部ブログカードの「キャッシュ」の設定は、特に触る必要はないと思いますが、知りたい方は公式サイトのこちらの記事に詳しく書いてあります。
ブログカードを表示させる方法
そしてブログカードを表示させる方法ですが、「リンク先のURL」を記事の中に貼り付けるだけです。
URLを貼り付けてプレビューで確認すると、このようにブログカードになっているはずです↓
もしブログカードが表示されない場合は、次の3つを確認してみて下さい。
1行の中にURL以外の文字は含まれていないか
URLはすべて“半角英数字”になっているか（全角英数字や日本語は使わない）
3つのうち、1つでも該当しているとブログカードは表示されません。
ブログカードを表示させない方法
時としてブログカードではなく「URLでリンク表示したい」という場合もあると思います。
その場合はブログカードのエラーを逆手にとって、
URLの行の中に何か文字を入れるとブログカードでなくなります。
ブログカードにしたくない場合は、このようにURLの前などに文字を入れます。
そしてURLをリンクにするには、URLの部分をドラッグして「リンクの挿入/編集」のボタンを押してリンク先のURLを入力します。
するとURLの部分がリンクになって、ブログカードにはなりません。
ブログカードの抜粋文を消す方法
ブログカードの抜粋文（スニペット）は消去できます。
抜粋文を消すには「Cocoon設定」の「インデックス」タブをクリックします。
この中に「自動生成抜粋文字数」という項目があるので、そこに「0」と入力します。
入力したら「変更をまとめて保存」を押します。
これで内部ブログカード、外部ブログカード共に抜粋文がなくなります。
ただしここを「0」にすると、記事一覧で表示されている「エントリーカード」の抜粋文も消えてしまいます。
ブログカード、エントリーカード共にすっきりさせたいのであれば、ここを「0」にするといいでしょう。
逆にブログカード、エントリーカード共に抜粋文を表示させる設定はこうです。
「自動生成抜粋文字数」に任意の文字数を入れて「スニペット（抜粋）の表示」にチェックを入れると、どちらの抜粋文も表示されます。
ブログカードだけ抜粋文を表示させて、エントリーカードの抜粋文を消すには、数は入れたままで「スニペット（抜粋）の表示」のチェックを外します。
反対にエントリーカードの抜粋文を表示させて、ブログカードの抜粋文を消すにはどうすればいいかというと、それはCocoon設定ではできないので、CSSを使います。
ブログカードの抜粋文を消すCSS
エントリーカードの抜粋文を表示させたい場合は、文字数とチェックは入れたままにしてください。
内部ブログカードの抜粋文を消すCSS
そしてブログカードの抜粋文はCSSで消します。
内部ブログカードの抜粋文だけを消すCSSがこちらです。
/*内部ブログカードの抜粋文を消す*/
.internal-blogcard-snippet{
display: none;
}
このCSSをどうするかというと、
WordPressメニューの「外観」→「テーマファイルエディター」をクリックします。
すると「スタイルシート」というものが出てきます。
テーマは「Cocoon Child」を選択して矢印のあたりに先ほどのCSSを貼り付けます。
このようにCSSを貼り付けます。
そして「ファイルを更新」を押せば内部ブログカードの抜粋文はなくなります。
外部ブログカードの抜粋文を消すCSS
同じく外部ブログカードの抜粋文だけを消すCSSがこちらです。
/*外部ブログカードの抜粋文を消す*/
.external-blogcard-snippet{
display: none;
}
両方の抜粋文を消すCSS
内部ブログカードと外部ブログカードの抜粋文を両方消せるCSSがこちらです。
これひとつで内部と外部ブログカード、両方の抜粋文がなくなります。
エントリーカードの抜粋文はなくなりません。
/*ブログカードの抜粋文を全て消す*/
.blogcard-snippet{
display: none;
}
最後に
今回はCocoonのブログカード設定とブログカードの抜粋文を消す方法を説明しました。
私事ですが、ブログを始めたばかりのころに内部ブログカードの抜粋文を消したものの、
しばらくして元に戻そうとしたときに、どうやって抜粋文を消したか覚えていなかったことがあります。
結局、自動生成抜粋文字数を「0」にしていたんですが、そこへたどり着くのにかなりの時間を要しました。
WordPressは設定することが沢山あるので、初心者の方は設定を変更したら「何をどのように変更したか」をどこかに軽くメモしておくと、後で役に立つかもです。
本日は最後まで読んでいただき、ありがとうございました。
コメント