JINのカスタマイズでおしゃれにするコード6選【SANGO風】

2023-04-21

約4分

JINのCSSおすすめカスタマイズを知りたい人

JINのCSSおすすめカスタマイズが知りたいです
「マガジンスタイルでサムネに重なるカテゴリー名を移動・サイドバーにボックスナビを作成・SNSシェアボタンの上に文字を入れる・検索ボックスやヘッダー下をSANGO調に・プロフィールにボタンをつける」がやりたいです

あいうえおLIFE

今日は「お悩み解決に役立つ内容」をお伝えしていきます！信頼性の担保は下記を参照ください。

あいうえおLIFE

サイト運営者について : 「副業スキルで複数収入」がテーマ / 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQモバイル・複数ASP愛用者 / 2サイト合計最高月間1万5,000PV / ブログ収益：月3万〜4万円

JINのCSSおすすめカスタマイズが気になりますよね。ぼくもJINを購入したものの「カテゴリー名がサムネに重なりを解消・ボックスナビ・SNSシェアボタンの上に文字・検索ボックスやヘッダー下をSANGO風に・プロフィールにボタン」がやりたくて、ずっと困っていました…

結論（本記事の内容）

JINでCSSカスタマイズするには「外観→カスタマイズ→追加CSS」で紹介する記事のコードをコピペ
JINブロガーのおしゃれデザインやSANGO風に似せられるので、読者満足度やブログ運営のモチベーションアップ

目次以降では詳細な理由や具体例を、画像も用いて解説します。

「JIN（ジン）」はブログで稼ぐためのノウハウを結集して作り上げたWordPressテーマです。ひつじ（＠hituji_1234）がこれまで培ってきた「アフィリエイト」と「SEO対策」の知識を集約して、売れるブログ作りを後押しできるテーマに仕上げました。

テーマ制作のプログラミングはATLASの開発者でもある赤石カズヤさん（＠cps_kazuya）の協力を得ています。
引用：「JIN（ジン）」の特徴｜アフィリエイトのノウハウが凝縮されたWordPressテーマ

JINでCSSカスタマイズする際は追加CSSのみで完結ですが、バックアップ推奨。

JINのマガジンスタイルとはカード型で記事一覧が表示されるデザイン（下記GIF参照）ですが、「カテゴリー名」がアイキャッチに重なってしまうと、おしゃれさが半減しますよね…

ボックスナビは「Cocoon」使用時に、ぽんひろさんの記事で出会いました。【WordPress比較】CocoonからJINへテーマ変更【メリット・デメリット】に、ボックスナビ使用の経緯は執筆済み。

SNSシェアボタンの上に文字は、「＼この記事がよかったらシェアしてね！／」というマイクロコピーのようなメッセージを入れるイメージです。JINの「検索ボックスやヘッダー下」にSANGO風のマテリアルデザインを施すとおしゃれ。

プロフィールにボタンの設置は、JINデモサイト01のイメージです。

JINやSANGOブロガーは多いので、デザインを融合させていくことで読者満足度やブログ運営の意欲も急上昇間違いなし。実際にぼくもカスタマイズしてみて、記事を書くのが楽しくなりました。本記事を読むことでJINをCSSデザインする参考記事やコードが分かります。

あいうえおLIFE

編集する過程でデザイン知識や読者ファーストの視点が身につくので稼げるブロガーの素養がつきますよ。

今日はどうぞ最後まで、お読みくださいね。

タップできるもくじ

JINおすすめカスタマイズ6選

基本的なおしゃれカスタマイズは、「FOR　JIN」さんのコードをぼくもたくさん活用させていただきました。

控えめに言って【神】

①：マガジンスタイルで、サムネに重なるカテゴリー名をタイトル下に移動する

困った人が多いのではないでしょうか？トップページをベーシックスタイルではなく、マガジンスタイルにしているとき、サムネにカテゴリ名が重なってモザイクみたいになるのが悩みでした。

さよなら、グーグル。元アフィ子の...

【JINカスタマイズ】サムネに重なるカテゴリー名をタイトル下に移動したい。が、やっと解決した。｜さよな...

/*マガジンスタイルでカテゴリー名のアイキャッチ重なりを解消*/
@media (min-width: 768px) { 
span.post-list-cat {
top:auto!important; 
bottom:11px!important;
}
}
@media (max-width: 767px) { 
span.post-list-cat {
top:auto!important; 
bottom:7px!important;
}
}

重なりが解消されてありがたいカスタマイズでした。

有料プラグインのCARATで解消済み

大人の可愛いを追求した女性向けデザインで、「JIN」専用デザインプラグインの「CARAT」は2,480円（税込）。

CARAT

カテゴリの位置を調整して見やすさ抜群の記事一覧を作ろう！｜CARAT

プラグインによりボタン1つでサムネに表示するカテゴリの位置を変更できるようになっていますが、気の利いた助かった記事です。

②：サイドバーにボックスナビを作成する

JINでもCocoonでもカスタマイズ可能ですが、ボックスナビが作成できると視認性が上がるので楽しいです。

ぽんひろ.com

ボックス分けされたナビを作る！回遊率をアップしよう！

テーマがJINの場合ならFontAwesomeではなく、JINのアイコンフォントにすると表示速度が早くなるのでおすすめです。【14個の手順】JINからSWELLへテーマ変更（移行・乗り換え）のやり方に、現在はSWELLで運営しているので「アイコンの修正コード内容」を書きました。

SWELLは【SWELL – ver. 2.6.1 アップデート情報】にて、「ボックスメニュー」ブロックとして追加。

SWELLのボックスメニュー — 引用：【SWELL – ver. 2.6.1 アップデート情報】

スマホのハンバーガーメニュー内にボックスナビを入れる

スマホの場合はサイドバーが記事下にくる悩みがありますよね…ハンバーガーメニュー内に入れると、ボックスナビへの導線を置いておくことが可能。

ぽんひろ.com

JINのスマホメニューをカスタマイズ！アイコン付きでわかりやすく！

難易度高めですが、ハンバーガーメニューをウィジェット化するというカスタマイズもあります。

ナシタカライフ

404: ページが見つかりませんでした | ナシタカライフ

JINのスマホメニューをカスタマイズ！アイコン付きでわかりやすく！の記事では、ボックスナビのみでしたが「プロフィール」なども追加可能に。

③：SNSシェアボタンの上に文字を入れる

SNSシェアボタンの上に、「＼シェアしてね！／」とか入れたらおしゃれですよね。ぼくはSNSシェアボタンは上部非表示にして、記事下にのみ表示。

Mamimua（マミームア）

【JINカスタマイズ】SNSシェアボタンの上下にテキスト（文字）を追加する（WordPress）

SNSシェアボタンの上に文字を入れるのをマイクロコピーと言います。

SWELLではCSSなしで設定可能

「外観→カスタマイズ→投稿・固定ページ→SNSシェアボタン」で「記事下部シェアボタン」の上に表示するメッセージを入力できます。

④：検索ボックスのデザインをSANGO風にする

SANGOの特長としてはマテリアルデザインで、影がついた感じやポップな優しい色合いが柔らかいのでJINにも取り入れたくなりますよね。

ワンピース考察まとめブログ｜ONE ...

検索ボックスのデザイン変更【JINをSANGO風にカスタマイズ】

カスタマイズ難易度は

検索フォームのsearchform.phpの修正
追加CSS

⑤：ヘッダー下に影をつけてSANGO風にする

他のJINのブログと差別化できるポイントの1つです。

ワンピース考察まとめブログ｜ONE ...

ヘッダーに影をつける方法【JINをSANGO風にカスタマイズ】

/*ヘッダーに影をつける*/
#header-box {
	 box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

box-shadowのCSSはヘッダーだけでなく、コンテンツマガジンの切り替えタブのナビにも影をつけることができます。

/*切り替えタブに影をつける*/
.tabBtn-mag li {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15), 0 3px 3px -2px rgba(0, 0, 0, 0.1);
}

影をつけるカスタマイズを「上に戻るボタン」にも実装した内容を、【JIN】上（トップ）へ戻るボタンに影をつけるカスタマイズ【CSS】に書きました。

SWELLならCSSなしで可能

ヘッダーに影をつける：外観→カスタマイズ→ヘッダー→レイアウト・デザイン設定→ヘッダー境界線「影」を選択
切り替えタブに影をつける：外観→カスタマイズ→サイト全体設定→サイト全体の見た目→全体の質感で全体をフラットにするを「チェックなし」

切り替えタブは「タブブロックで呼び出し可能」。

⑥：プロフィールにボタンをつける【リンク先へ誘導】

イメージは冒頭でも伝えた「JINデモサイト01」のサイドバープロフィールにあるボタン。

おいでよ！ブログはじめてさん

【JIN】プロフィールにボタンをつける｜おいでよ！ブログはじめてさん

<div id="profile_link">
<a href="https://URL/プロフィールページ">プロフィール</a>
</div>

外観→ウィジェット→サイドバー→プロフィールで、プロフィール欄の1番最後にHTMLの<div>〜</div>をURL編集した状態でコピペします。

追加CSSへコピペ

/*プロフィールボタン*/
#profile_link a{
display:block;
text-align:center;
padding:0.7em 1em;
background:#81D0CB; /*ボタンカラー変更*/
width:50%;
margin:0 auto;
margin-top:20px;
border-radius:20px;
border:3px double #fff;
font-size: 0.75em;
color:#fff;
}
#profile_link a:hover{
opacity:0.75;
color:#fff;
}

ぼくのプロフィールの部分にも【ごあいさつ】という【自己紹介固定ページ】へのリンク先ボタンを設置することができました（JINテーマ使用時）。プロフィールから自己紹介や、アフィリエイトリンク先などに案内したいときに便利なので押したくなりますよね。

まとめ｜JINのCSSカスタマイズでおしゃれ度アップ

今日はJINのCSSおすすめカスタマイズを知りたい人に向けて、下記を解説しました。

JINでCSSカスタマイズするには「外観→カスタマイズ→追加CSS」で紹介する記事のコードをコピペ
JINブロガーのおしゃれデザインやSANGO風に似せられるので、読者満足度やブログ運営のモチベーションアップ

あいうえおLIFE

本記事を実践することで「マガジンスタイルでサムネに重なるカテゴリー名を移動・サイドバーにボックスナビを作成・SNSシェアボタンの上に文字を入れる・検索ボックスやヘッダー下をSANGO風に・プロフィールにボタンをつける」カスタマイズが可能になります。

JINのもつおしゃれさにSANGOのもつマテリアルデザインが融合することで、デザイン知識や読者ファーストの視点が身につくので稼げるブロガーの素養アップ間違いなし。

記事内でも追加CSSなしで「ボックスメニュー・ヘッダー下や切り替えタブに影」の実装ができるSWELLを紹介しました。SWELLはおすすめ！【評判・レビューに忖度なくメリット・デメリットを解説】に詳しく書きましたので、あわせてどうぞ。