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

[Cocoon]ブログカードのタイトルサイズを変更する方法 -ブログカードのカスタマイズ-

[Cocoon]ブログカードのタイトルサイズを変更する方法 -ブログカードのカスタマイズ-

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

ブログテーマ「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-title {
 font-size: 16px;
} 
まったり

今回はフォントサイズを16pxにしていますが、自分のブログに合うサイズに調整してください。(数字を変えるだけで大丈夫です)

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

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

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

ブログカードのタイトルサイズが変わっていたら成功です。

2. 最後に

今回は

「ブログカードのタイトルサイズを変更する方法」

について紹介しました。

ブログカードのタイトルサイズを変えることでより見やすいデザインにすることができます。

Cocoonにおけるブログカードのタイトルサイズ変更はとても簡単なのでぜひお試しください。

まったり

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

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

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

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

コメント

コメントする

目次
閉じる