はてなブログカスタマイズ┃コピペOK！デザインによって1つしか表示されないカテゴリを全表示させる方法

はてなブログで選んだデザインテーマによって、カテゴリを複数選んでいても表示されるカテゴリは1つだけという設定が予めされている場合があります。

この記事では、選択したカテゴリを全て表示させる方法をご紹介します。

当ブログがお世話になっているデザインテーマは『Color Book』です。カテゴリを3つ選択した記事を投稿した時の記事の表示は以下のようになります。

パソコンから見た時は全てのカテゴリが表示されていますが、スマホから見ると2と3は自動で省略されています。これをスマホから見た時もパソコン表示と同じように全て表示するようにします。

コードの使用について

CSSの使い方

/* 記事内のカテゴリを全て表示 */
.entry-categories a:nth-child(n+2) {
   display: inline-block;
   }

/* トップページのカテゴリを全て表示 */
.page-index .categories a:nth-child(n+2) {
   display: inline-block;
   }

/* アーカイブページのカテゴリを全て表示 */
.page-archive-category .categories a:nth-child(n+2) {
   display: inline-block;
   }

『:nth-child(n+2)』で親要素（カテゴリ全体）の子要素（各カテゴリ）のうち2番目以降のすべての子要素を選択しています。

1番目の子要素は初めから表示されているので「2番目以降の子要素も一緒に表示してね」という指示をしています。

n+の後の数字を変更することも可能で、3にすると「3番目以降」／5にすると「5番目以降」というように指示を変えることができますので必要な時にご活用ください。

ご不明な点がありましたらお気軽にコメントやメールでお問い合わせください。

yunico's fluffy life