# ブログカスタマイズ

【JINカスタマイズ】コンテンツマガジンの色を変更してミニマルなデザインに

今回はWPテーマ『JIN』の目玉機能の1つ「コンテンツマガジン」のカスタマイズについて紹介します。

デフォルトでも十分おしゃれなんですが、よりミニマルなデザインになるようにカスタマイズしてみました。

それぞれ上の画像がPC画面、下の画像がスマホ画面です。

BEFORE
AFTER

選択されているカテゴリーの背景色を無くして、アンダーライン風に見えるようなカスタマイズをしてみました。

デフォルトよりスッキリな印象になりますね。

「コンテンツマガジン」はほとんどのJINユーザーが利用していると思いますが、デザインのカスタマイズをしている人はほとんど見かけません。

ブログトップページの中でも目立つ部分なので、ここをカスタマイズして他のブログとの差別化も図っていきましょう。

CSSをコピペするだけの簡単カスタマイズなので、ぜひ試してみてください。

カスタマイズは自己責任でお願いいたします

カスタマイズの準備

まずは、「コンテンツマガジン」を設定する必要があります。

設定済の人は読み飛ばしてください。

外観カスタマイズトップページ設定 と進み、表示したいカテゴリーのIDを入力します。

カテゴリーは最大3つまで設定が可能(最新記事を除く)で、カテゴリーIDを羅列する時はコンマを打ちます。

ちなみに、デフォルトで「最新記事」となっているテキストもここから変更できます。

試しに「NEW POST」と変更してみたのがこちら。

カスタマイズに必要なCSS

外観カスタマイズ追加CSS と進み、下記のコードを追加CSSにコピペしてください。

/****コンテンツマガジン****/
/***選択したとき***/
/**長方形の部分**/:checked#tab-1 ~ .tabBtn-mag li [for='tab-1'], :checked#tab-2 ~ .tabBtn-mag li [for='tab-2'], :checked#tab-3 ~ .tabBtn-mag li [for='tab-3'], :checked#tab-4 ~ .tabBtn-mag li [for='tab-4'] {
  color: #000;/*文字色*/
  background-color: #FFF !important;/*背景色*/
  border-radius: 0px;/*角の丸み*/
  display: inline-block;/*アンダーラインの長さ調整*/
  box-shadow: 0 -3px 0 0px #000 inset;/*アンダーライン色*/
}
.tabBtn-mag li:hover {
  transform: scale(1.0);/*クリック時の大きさ*/
}
/**▼の部分**/:checked#tab-1 ~ .tabBtn-mag li [for='tab-1']::after, :checked#tab-2 ~ .tabBtn-mag li [for='tab-2']::after, :checked#tab-3 ~ .tabBtn-mag li [for='tab-3']::after, :checked#tab-4 ~ .tabBtn-mag li [for='tab-4']::after {
  border-top-color: rgba(0,0,0,0) !important;/*透明化*/
}

/*選択しないとき*/
.tabBtn-mag label {
  color: #000;/*文字色*/
  background-color: #FFF;/*背景色*/
  border-radius: 0px;
  display: inline-block;
}
.tabBtn-mag label:after {
  border-top-color: rgba(0,0,0,0) !important;
}

文字色は#000で黒、背景色は#FFFで白となっているので、ここはお好みでアレンジしてください。

アンダーラインの太さは、-3pxの数字を弄ることで変更できます。ただし、変更する際は-1px以下の数字にしてください

まとめ

今回は『JIN』の「コンテンツマガジン」のカスタマイズを紹介しました。

ここをカスタマイズするだけでも、トップページの印象がガラリと変わるので、個人的にはかなりおすすめのカスタマイズですね。

この「コンテンツマガジン」を設定することで、

  • 読みたい記事を見つけてもらえる
  • ページ遷移せずにたくさんの記事を見せられる
  • サイトの回遊率アップが期待できる

などのメリットが得られるので、まだ設定したことがなかったという人は、ぜひ活用してみましょう。

えふぃる
えふぃる
本当は教えたくなかった秘蔵のカスタマイズです!笑
この記事のURLとタイトルをコピーする