SWELLへの移行方法はこちら!CLICK!

[Cocoon]ブログカードをタイトルのみにする方法 -スニペットの削除-

こんにちは!まったりです。

ブログ記事を書いているときにブログカードを表示させることってありますよね。

その中で

悩む人

ブログカード中のスニペットが邪魔で消したい…。

と悩んでいる方がいると思います。

本記事ではこのような悩みを解決するために

「Cocoonでブログカードのスニペット(抜粋)」

を削除する方法について紹介します。

本記事で学べること
  • Cocoonのブログカードにおけるスニペットの削除方法
作者情報
  • 理系大学院生ブロガー
  • まったりさんブログ運営中
  • 情報・ネットワーク関係の研究中

▼Twitterはこちら▼

\\本ブログは”SWELL”を使用しています//

  • ブロックエディタ対応で初心者も扱いやすい
  • シンプルで綺麗なデザイン
  • テーマ乗り換えサポートプラグインあり
  • サポートが充実

▼公式サイトから購入可能です▼

目次

1. スニペットの削除方法

スニペットを削除するためにはCocoonの

『style.css』

に追加でCSSを記述していきます。

– 注意 –

Cocoonのstyle.cssを操作する際は、事前に必ずバックアップをとってから操作することをお勧めします。

バックアップを取らないでバグが発生したときに元に戻せなくなる可能性があります。

▼Cocoonのバックアップ方法はこちらから▼

Cocoonのstyle.cssを操作するためにはサイドメニューの「外観」から「テーマエディター」を選択してください。

style.cssの中には

「子テーマ用のスタイルを書く」という囲みの中に「必要ならばここにコードを書く」という部分があります。

まったり

今回は「必要ならばここにコードを書く」の下にCSSコードを記述していきます。

Cocoonのテーマエディター画面

ブログカードのスニペットを消すためには、以下のコードをstyle.cssの「必要ならばここにコードを書く」下にコピペしてください。

/*ブログカードのスニペット非表示用CSS*/
.blogcard-snippet {
 display: none;
}

コピペが完了したら、画面左下にある「ファイルを更新」を押して更新してください。

Cocoonのテーマエディター画面

無事にコードを更新できたら実際にブログのデザインを確認してみましょう。

以下のようにブログカードにタイトルのみ表示されるようになれば成功です。

ブログカードの例(スニペット非表示状態)

2. 最後に

いかがでしたでしょうか。

今回は

「ブログカードのスニペットを非表示にする方法」

について紹介しました。

スニペットがあると記事の内容は理解しやすくなりますが、文字が小さく表示されて見づらくなってしまいます。

このスニペットを削除するのは簡単なのでぜひお試しください。

まったり

最後までご覧いただきありがとうございました!

にほんブログ村 にほんブログ村へ
にほんブログ村

\\本ブログで使用中のテーマ”SWELL”//

よかったらシェアしてね!

コメント

コメントする

目次
閉じる