JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】

という方に向けて当サイトで紹介してきたJINのカスタマイズを全てまとめました。

本記事を参考にすれば、コピペするだけで他のサイトと差別化をすることができます。

JINのカスタマイズ総まとめ

プロフィールボックスをより目立たせる

プロフィール詳細の下にある各種SNSボタンの調整がメインです。

自分のSNSをよりチェックしてもらいたい・アピールしたいという方にはうってつけのカスタマイズかなと。
【JIN】他と差を付ける！プロフィールボックスのカスタマイズ方法

目次をマテリアルなデザインにする

記事内の目次

若干SANGOのようなマテリアルな要素を取り入れ可愛く仕上げました。

ちなみに文字の前のアイコンに関してはFontAwesomeなどは使わず、JINのアイコンしか使っておりません。

追従サイドバーの目次

違和感を無くすために、記事内の目次と似たようなデザインにしました。
【JIN】目次が20倍可愛くなるカスタマイズ方法（サイドバー対応）

ブログカードを落ち着いたデザインにする

before

after

「テキストリンクと比べると目線を止めがち」というデメリットのあるブログカードですが、それを軽減するためにより記事内に溶け込むようなデザインにしました。

その一方、記事タイトルをリンク色にすることでクリック率の向上を図ることができます。
【JIN】ブログカードをより読みたくなるデザインにするカスタマイズ

SNSボタンを丸くする

before

after

アイキャッチ下と本文下のSNSボタンのカスタマイズになります。

デフォルトでは横長のデザインでしたが、より記事内に溶け込ませるために丸くし、可愛く仕上げました。

個別記事の方では、上のようにスクロールに合わせて浮き上がるアニメーションの実装方法も紹介しています。
【JIN】SNSボタンを丸くして可愛くカスタマイズする方法

テーマ問わず真似できるカスタマイズ

ショートコードで作れるレーダーチャート

もちろん各項目やスコアの指定もパラメーターを変えることで行うことができ、プラグインなどを使わずコピペでできるものなので初心者の方にもおすすめです。
WordPressでおしゃれなレーダーチャートを作成する方法【プラグイン・ライブラリ不要】

ショートコードで呼び出せるモーダルウィンドウ

ショートコードで囲むだけでお手軽に使用できるモーダルウィンドウです。ボタンまたはモーダル外の押下で表示・非表示を切り替えられます。

記事内に書く(表示する)ほどではないけど、読者にとって有益になりそうな補足をしたい場合などにおすすめです。

CSSのみで実装する自作モーダルウィンドウ【WordPress・レスポンシブ対応】

もしもの「かんたんリンク」のカスタマイズ

もしもアフィリエイトの「かんたんリンク」のカスタマイズになります。

こちらデフォルトだとスマホで見ると縦長になってしまうという欠点があったので、横長(2列)になるように仕上げました。

もちろんPCから見た際のデザインもいい感じになりますよ。

もしもの「かんたんリンク」をスマホでも横長(2列)にするカスタマイズ方法

埋め込みツイートのいいね数と日付を非表示にする

before

after

埋め込みツイートの下部のいいね数や日付などを非表示にするカスタマイズです。

その他幅なども調整したのでスマホから見てもいい感じの見栄えになります。

【WordPress】埋め込みツイートをコンパクトにするカスタマイズ方法

プラグイン無しで蛍光マーカーを動かす

上のように、プラグインを使わずスクロールした際にマーカーが引かれるようなアニメーションを挿入できます。

詳しい挙動はデモページを参考にしてみてください。

【プラグイン不要】WordPressで蛍光マーカーを動かす方法

まとめ

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝