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

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

くるみ

JINのいい感じのカスタマイズ、どっかに転がってないかな
ということで今回は

  • ブログを始めたはいいものの、自分では思い通りのカスタマイズができなくて困っている
  • JINだとどうしてもデザインが他サイトと被りやすいから、カスタマイズで差別化したい

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

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

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

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

before

カスタマイズ前のプロフィールボックス

after

カスタマイズ後のプロフィールボックス

ウィジェットのプロフィールボックスのカスタマイズになります。

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

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

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

記事内の目次

before

カスタマイズ前の記事内の目次

after

カスタマイズ後の記事内の目次

記事内に設置される目次です。

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

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

追従サイドバーの目次

before

のカスタマイズ前のサイドバー追従の目次

after

カスタマイズ後のサイドバー追従の目次

追従サイドバーに設置するウィジェットとしての目次です。(※灰色の枠線は目次のものではありません)

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

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

before

after

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

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

SNSボタンを丸くする

before

カスタマイズ前のSNSボタン

after

カスタマイズ後のSNSボタン

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

デフォルトでは横長のデザインでしたが、より記事内に溶け込ませるために丸くし、可愛く仕上げました。
JINのSNSボタンを浮き上がらせる
個別記事の方では、上のようにスクロールに合わせて浮き上がるアニメーションの実装方法も紹介しています。
【JIN】SNSボタンを丸くして可愛くカスタマイズする方法【JIN】SNSボタンを丸くして可愛くカスタマイズする方法

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

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

before

カスタマイズ前のもしものかんたんリンク(モバイル)

after

カスタマイズ後のもしものかんたんリンク(モバイル)

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

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

これで記事内にさりげなく設置できるね

くるみ

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

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

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

before

カスタマイズ前の埋め込みツイート

after

カスタマイズ後の埋め込みツイート

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

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

埋め込みツイートのいいね数と日付を非表示にするカスタマイズ【WordPress】埋め込みツイートをコンパクトにするカスタマイズ方法

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

このように文字にマーカーが引かれます

マーカーを細くすることも出来ます

もちろん色を変えることも出来ます

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

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

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

まとめ

以上、当サイトで紹介してきたJINのカスタマイズまとめでした。

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

コメントを残す