くるみ
- ブログを始めたはいいものの、自分では思い通りのカスタマイズができなくて困っている
- JINだとどうしてもデザインが他サイトと被りやすいから、カスタマイズで差別化したい
という方に向けて当サイトで紹介してきたJINのカスタマイズを全てまとめました。
本記事を参考にすれば、コピペするだけで他のサイトと差別化をすることができます。
お品書き
JINのカスタマイズ総まとめ
プロフィールボックスをより目立たせる
before
after
プロフィール詳細の下にある各種SNSボタンの調整がメインです。
自分のSNSをよりチェックしてもらいたい・アピールしたいという方にはうってつけのカスタマイズかなと。
【JIN】他と差を付ける!プロフィールボックスのカスタマイズ方法
目次をマテリアルなデザインにする
記事内の目次
before
after
若干SANGOのようなマテリアルな要素を取り入れ可愛く仕上げました。
ちなみに文字の前のアイコンに関してはFontAwesomeなどは使わず、JINのアイコンしか使っておりません。
追従サイドバーの目次
before
after
違和感を無くすために、記事内の目次と似たようなデザインにしました。
【JIN】目次が20倍可愛くなるカスタマイズ方法(サイドバー対応)
ブログカードを落ち着いたデザインにする
before
after
「テキストリンクと比べると目線を止めがち」というデメリットのあるブログカードですが、それを軽減するためにより記事内に溶け込むようなデザインにしました。
その一方、記事タイトルをリンク色にすることでクリック率の向上を図ることができます。
【JIN】ブログカードをより読みたくなるデザインにするカスタマイズ
SNSボタンを丸くする
before
after
アイキャッチ下と本文下のSNSボタンのカスタマイズになります。
デフォルトでは横長のデザインでしたが、より記事内に溶け込ませるために丸くし、可愛く仕上げました。
個別記事の方では、上のようにスクロールに合わせて浮き上がるアニメーションの実装方法も紹介しています。
【JIN】SNSボタンを丸くして可愛くカスタマイズする方法
テーマ問わず真似できるカスタマイズ
ショートコードで作れるレーダーチャート
- 項目1
- 4
- 項目2
- 3
- 項目3
- 4
- 項目4
- 5
- 項目5
- 4
もちろん各項目やスコアの指定もパラメーターを変えることで行うことができ、プラグインなどを使わずコピペでできるものなので初心者の方にもおすすめです。
WordPressでおしゃれなレーダーチャートを作成する方法【プラグイン・ライブラリ不要】
ショートコードで呼び出せるモーダルウィンドウ
ショートコードで囲むだけでお手軽に使用できるモーダルウィンドウです。ボタンまたはモーダル外の押下で表示・非表示を切り替えられます。
記事内に書く(表示する)ほどではないけど、読者にとって有益になりそうな補足をしたい場合などにおすすめです。

もしもの「かんたんリンク」のカスタマイズ
before
after
もしもアフィリエイトの「かんたんリンク」のカスタマイズになります。
こちらデフォルトだとスマホで見ると縦長になってしまうという欠点があったので、横長(2列)になるように仕上げました。
くるみ
もちろんPCから見た際のデザインもいい感じになりますよ。

埋め込みツイートのいいね数と日付を非表示にする
before
after
埋め込みツイートの下部のいいね数や日付などを非表示にするカスタマイズです。
その他幅なども調整したのでスマホから見てもいい感じの見栄えになります。

プラグイン無しで蛍光マーカーを動かす
このように文字にマーカーが引かれます
マーカーを細くすることも出来ます
もちろん色を変えることも出来ます
上のように、プラグインを使わずスクロールした際にマーカーが引かれるようなアニメーションを挿入できます。
詳しい挙動はデモページを参考にしてみてください。

まとめ
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝