
こんにちは!あいうえおLIFE(@pledge17uchs)です!



JINのCSSカスタマイズの種類多すぎ…調べるのめんどいし、おしゃれカスタマイズだけ教えてくれたら助かる
今日は、こんなお悩みに答えていきます。
JINを使っているブロガーさん多いですよね!直接、カスタマイズ方法を本人には聞きづらいから、ググったりして調べながらカスタマイズしていくのってブログあるあるですよね。
JINカスタマイズに関しては、それなりにチャレンジしてきましたので参考になると思います。
備忘録的な感じでまとめたら役立つかなと思い、今回記事にしました!
JINおすすめカスタマイズ6選


基本的なおしゃれカスタマイズは、下記の「FOR JIN」様のブログに掲載してくださっていますので御覧ください。
控えめに言って、【神】です。
FOR JIN様サイトのカスタマイズにはないものを下記に6つピックアップしました。
- マガジンスタイルで、サムネに重なるカテゴリー名をタイトル下に移動する
- グローバルナビやサイドバーにボックスナビを作成する
- SNSシェアボタンの上に文字を入れる
- 検索ボックスのデザインをSANGO調にする
- ヘッダー下に影をつけてSANGO調にする
- プロフィールにボタンをつける【リンク先へ誘導】
下記で詳しく紹介します。
①マガジンスタイルで、サムネに重なるカテゴリー名をタイトル下に移動する
これ困りました。トップページをベーシックスタイルではなく、マガジンスタイルにしているとき、サムネにカテゴリ名が重なってモザイクみたいになるんですよね。


これは本当にありがたかったです!
②グローバルナビやサイドバーにボックスナビを作成する
JINでもcocoonでもカスタマイズ可能かと思いますが、これが作成できると視認性が上がるので楽しいです。僕も使っています(今は、サイドバーだけに設置しています)


テーマがJINの場合でしたら、Fontawesomeでなく、JINのアイコンフォントにするとJINオリジナルって感じでおすすめです。
その方が、サイトスピードも速くなります。
③SNSシェアボタンの上に文字を入れる
僕はSNSシェアボタンは上部は非表示にして、記事下にのみ表示させています。SNSシェアボタンの上に、”シェアしてね!”とか入れられたらとおしゃれですよね。
.jpg)
.jpg)
SNSシェアボタンの上に、文字があるのってどこかSANGO調でいい感じです。
④検索ボックスのデザインをSANGO調にする
またまたSANGO調にチャレンジです!SANGOの特長としてはマテリアルデザインですよね。影がついた感じとか、ポップな優しい色合いが柔らかくて思わずJINにも取り入れたくなります。


そのままでもいいじゃんって言われても、変えれるならやりたいじゃん!
カスタマイズしたくなるのは、小さいけど大きい想いなのです。
⑤ヘッダー下に影をつけてSANGO調にする
これやり始めてから他のJINのブログと差別化できた感じします。自己満ではありますが。


このほかにも、box-shadowのCSSはヘッダーだけでなく、コンテンツマガジンの切り替えタブのナビにも影をつけることができます。
⑥プロフィールにボタンをつける【リンク先へ誘導】
プロフィールから固定ページの自己紹介や、アフィリエイトリンク先などに案内したいときに、ボタンがあるとついつい押したくなります。


いろいろな角度から案内できるのはいいですね。
まとめ|JINカスタマイズはググれば教えてもらえるからありがたい





このブログのカスタマイズどうやってるんだ?
PHPいじるとか、JavaScript追加するとかこわい...
おしゃれにし始めると、夜も眠れないくらいデザイン気になって記事執筆が進んでない..
上記は2ヶ月前の僕です。やっと2ヶ月経過してデザインへの欲は落ち着きました。
しかし
- やりすぎて記事書けない
- バックアップも取らずに作業して、失敗して訳わからなくなった
こうならないように、バックアップは必ず取りましょう!
プラグインのBackWPupがおすすめです。
SWELLが気になる方は下記記事もどうぞ。
それでは、今日はここまで読んで頂きありがとうございました!