Cocoonのランキングの文字の大きさを調整する方法

本サイトはWordPressのCocoonテーマを使用しています。

Cocoonは無料テーマなんですが、いろいろ便利な機能が揃っています。今回は、「ランキング」の記事を作成するときのフォントサイズの調整の仕方について説明します。

ランキング作成
ランキング作成の問題点
ランキング文字サイズの調整方法

ランキング作成

製品を紹介するとき「ランキング」形式で紹介しているページを良く見かけます。

なんかプロっぽい記事になるので僕も作ってみました。例えば以下のリンク先のような記事です。

https://movie.enjoy-retirement.com/ranking_recommend_low_cost_real_4k_uhd_projector/

WordPressの管理画面の「Cocoon設定」－「ランキング作成」から簡単に作成できます。以下のCocoon公式ページで使い方が説明されています。

商品・サービスランキングを作成して配置する方法

ランキング作成で作成したランキングは、ショートコードで記事内に簡単に追加できます。ランキングを作成しておかないとビジュアルエディタに表示されませんが、ランキングを作成するとアフィリエイトやショートコードと同じように「ランキング」を一覧から選択するメニューが表示されます。

ランキング文字サイズの調整方法

記事の本文の文字とランキングの文字サイズが違うので、とても不恰好な記事になってしまいます。非常に困りました。

そこでCSSに以下の記述を追加しました。コピペで使っていただいて構いません。

/*1240px以下*/
@media screen and (max-width: 1240px){
 .ranking-items p {
  font-size: 16px;
 }
}
/*768px以下*/
@media screen and (max-width: 768px){
 .ranking-items p {
  font-size: 14px;
 }
}

ランキングは「ranking-items」という名前です。ranking-itemsのfont-sizeをスクリーンサイズごとに設定するコードです。文字サイズはサイトに合わせて適宜変更してください。

実際の追加CSSの画面上では以下のように追加します。

冒頭のリンク先は既にこの追加CSSが有効になっているので、記事内の文字サイズとランキング内の文字サイズは連動した状態になっています。

以上、ランキングの文字サイズの調整の仕方を紹介しました。

CSSの追加の仕方は以下の記事を参考にしてください。

Cocoonのモバイルサイドバーの文字が見えないときの対処

本サイトはWordPressのCocoonテーマを使用しています。サブドメインのサイトは「COLORSスキン」を使用しており、なぜかモバイルサイドバーの一部の文字が見えない現象が発生していました。なんとかCSSを追加して見えるようにできたの...

また、WordPressを簡単にインストールできるレンタルサーバの情報を以下の記事で紹介しています。

無料ブログから独自ドメインとレンタルサーバー移行時に気をつけること【実績No.1ロリポップ！／SSDが安いスターサーバーがおすすめ！ドメイン永久無料や初期費用無料キャンペーンあり！】

今まで無料ブログのはてなブログから、独自ドメインとレンタルサーバーを用いたブログへ移行しました(2018年10月)。過去記事でも書きましたが、制約の多い無料ブログから有料だけど自由度の高い構成に変更しました。今回は、移行時に気をつけておきた...

ロリポップ！のプランがリニューアルしました。全プランSSD採用で高速／大容量化！初期費用無料キャンペーンも開催中！

ロリポップが全プランをリニューアル(仕様改定)【プランの違いを紹介！全プランSSDで高速化、大容量化！2021年GW中は初期費用無料！スタンダードプランかハイスピードプランがオススメ！】

低価格で高性能なレンタルWEBサーバーを提供しているが全プランをリニューアルし、さらに高速化、大容量化されました。一部プランでは、月額料金の引き下げや、初期費用無料キャンペーンも実施しています。各プランの仕様や料金の違いを紹介します。(価格...

ロリポップ！の設定方法やサーバー運用時のノウハウ情報は以下の記事で紹介しています。

WordPress、Cocoonに関する情報は以下の記事で紹介しています。

広告収入を得るためのアフィリエイトに関する情報は以下の記事で紹介しています。

ランキング作成

ランキング作成の問題点

ランキング文字サイズの調整方法

コメント