cocoon カテゴリーラベル 文字数
「Cocoonのカテゴリーラベルって文字数制限があるの？」
「長いカテゴリ名はどう表示されるの？」と思っていませんか？
実は、Cocoonではカテゴリーラベルの文字数に明確な上限はありません。
バナーが表示されるタイミングによって、表示される文字数が変わります。
この記事では、Cocoonカテゴリーラベルの文字がどのくらい表示されるかの実例と、より多くの文字を表示させるためのCSS調整方法もわかりやすく解説します。
Cocoonカテゴリーラベルの文字数仕様
Cocoonのカテゴリーラベルは、カテゴリー名が長いと全文表示されない場合があります。それは、カテゴリーラベルの表示幅が、バナー画像の70％以内1と指定されているからです。
CSSでカテゴリーラベルの「.cat-label」クラスに「max-width: 70%」が指定されており、70％を超える長さのカテゴリー名は、自動的に末尾が「…」で省略表示されます。
カテゴリー名「サイト・ブログ制作」というカテゴリー名が、iPhone 13では7文字までしか表示されませんでした
表示位置とバナーサイズ、文字数の関係
カテゴリーラベルの幅を決めるバナー画像の幅は、表示される位置やカードの種類によって異なります。
Cocoonの作者わいひらさんの公式サイト(https://wp-cocoon.com/community/postid/13537/)よると、設定により変わりますが、代表的なバナーのサイズは下記とのことです。
・120px 新着・人気記事ウィジェット・ページ送りナビ・関連記事ミニカード
・160px 関連記事デフォルト・関連記事4列
・320px デフォルトサムネイル・関連記事3列
そのため、カテゴリーラベルの文字数も表示される位置やカードの種類によって異なるのです。
バナー画像が小さいほど文字数も少なくなる→
小さいバナーは短いカテゴリー名でも省略される場合も。
それでは、具体的なラベルの表示文字数を紹介します。PCやスマートフォンの幅や、Cocoon設定によって表示文字数は前後しますので、あくまでもご参考まで。
エントリーカードラベルの例
エントリーカードラベルは、トップページやカテゴリー一覧のエントリーカード上部表示されます。
PC(大画面)で表示2
13文字表示されました。
スマートフォンで表示3
11文字表示されました。
カードラベルの設定でバナー表示幅が変わるため、ラベル表示の文字数も変わります。上記の例はカードラベル(デフォルト設定時)です。
アイキャッチラベルの例
アイキャッチラベルは、記事や固定ページの、アイキャッチバナー上部に表示されます。
PC(大画面)で表示
文字数は長く表示されます。31文字も表示されました。
スマートフォンで表示
文字数は比較的長く表示されます。22文字表示されました。
アイキャッチラベルは、一般的な長いカテゴリー名であれば全表示できそう。
関連記事カードラベル
関連記事カードラベルは、記事や固定ページ下部の関連記事カードバナー上部に表示されます。
PC(大画面)で表示
14文字表示されました。
スマートフォンで表示
10文字表示されました。
関連記事カードの設定でバナー表示幅が変わるため、ラベル表示の文字数も変わります。上記は縦型カードの例です。
デフォルト非表示のカルーセルカードとウィジェットは未確認ですが、カルーセルカードは表示枚数によりバナーの大きさが変わります。表示枚数が大きいほど文字数も多く表示されます。
新着・人気記事ウィジェットは120pxと小さいため、文字数も少なく表示されるでしょう。
表示できる文字数を増やす方法
長すぎるカテゴリー名はデザインの崩れや可読性の低下を招くため、まずは、カテゴリー名を決定時に、文字数のバランスを考慮することが大切です。
どうしても、カテゴリーラベルの文字数を増やしたい場合は、CSSで表示する幅を調整することも簡単にできます。例えば、バナー幅の最大100%まで表示したい時は、以下のようなCSSをカスタマイズ「追加CSS」に記述します。
/*カテゴリーラベル表示幅拡大*/
.cat-label { max-width: 100%; }
CSSの追加方法は次の章でご紹介します。まずは変更後の例をご覧ください。
アイキャッチラベルをPC(大画面)で表示
横幅いっぱい100%表示で、ひらがな46文字が全表示されました！
アイキャッチラベルをスマートフォンで表示
32文字表示されました。
スマートフォンやエントリーカード、関連記事カード等、バナーが小さく表示される時は、さすがに、ひらがな全46文字は表示しきれませんが、表示される文字数がかなり増えましたね。
カスタマイズ追加CSSの詳しい説明
今から紹介する方法はデフォルトのCSSの記述は変更しません。新たにCSSを追加するだけです。そのため、万が一間違えた時にも、追加したCSSを消せば良いだけなので、初心者にも安心な方法です。
ワードプレスダッシュボード ＞ 外観 ＞ カスタマイズ ＞ 追加CSS の順に進み、注意書きを確認したうえでコードを記入します。
ワードプレスダッシュボードのサイドメニューから「外観」、「カスタマイズ」を選ぶと、カスタマイズ画面が表示されますので「追加CSS」をクリック。
初回は、下記画像のような説明文が表示されます。一読後「閉じる」を押してください。
CSSを入力する画面が表示されたら、下記のようにCSSを入力し「公開」ボタンを押します。
/*カテゴリーラベル表示幅拡大*/
.cat-label { max-width: 100%; }
まとめ
いかがでしたか？今回の記事ではCocoonカテゴリーラベルの文字数仕様を、PCやスマートフォン、表示バナーによって変わるバナーサイズとの関係から具体例もふまえてご紹介しました。文字数を増やすためのCSS調整方法と事例も参考になりましたでしょうか。
テーマのデフォルト設定を理解することで、見やすく美しく、自分らしいサイトデザインにカスタマイズしたいですね。
おさらい
- Cocoonカテゴリーラベルは文字数上限なし
- 表示幅は親要素の70％に制限
- 幅を超えると「…」で省略表示
- 表示位置やカード種類で見える文字数が変わる
- CSS調整で文字数を増やせる
- 長すぎる名前はデザイン崩れに注意
コメント