サイト運営

【レビュー】誰でも簡単に、かわいくカスタマイズできる、JIN専用プラグイン『CARAT』

もくりんぐ
もくりんぐ
みなさ〜ん こんにちは〜、もくりんぐ
@mokurin1979)です。

超〜、カスタマイズが大好きな私ですが、
Twitterを見ていると、とても気になるプラグインが目に止まりました。

CARATトップページ

大人可愛いを追求した女性向けデザイン

というキャッチフレーズの『CARAT』。

女性向けとの事だったので最初は、スルーしてたんですけど…

毎日、気になって、

気になって、気になって、

かわいいブログを、作りたくなって

カスタマイズしたくなって、

やっぱり、購入しました♪。

男性でもかわいいサイトを作りたい方は是非おすすめのプラグインCARATをご紹介します。

こんな人におすすめ

・かわいいサイトにしたい人
・カスタマイズが好きな人
・一味変わったのサイトを作りたい人

ゆーちゃん
ゆーちゃん
かわいいサイトは見ていて、楽しくなっちゃうから、大好き♪

CARATプラグインとは?

もくりんぐ
もくりんぐ
CARATプラグインについて詳しく書いていきます。
CARATトップページ

CARATプラグインは、『JIN』専用の有料プラグインです

WordPressテーマ『JIN』が無いと使えません。

もくりんぐ
もくりんぐ
CARATの機能をご紹介します。

CARATの追加カスタマイズ

  • ページ遷移のアニメーション
  • ピックアップコンテンツのアニメーション
  • グローバルメニューのアニメーション
  • 動くマーカーアニメーション
  • スマホ時のハンバーガーメニューデザイン
  • 記事エリアデザイン
  • カテゴリデザイン
  • サイドバーデザイン
  • フッターデザイン
  • フォント項目の追加
  • カラー設定項目の追加
もくりんぐ
もくりんぐ
線が動く、『動くマーカーアニメーション』、素敵だと思いませんか?

CARAT追加デザイン

  • タイムラインデザインの追加
  • お問い合わせデザインの追加
  • 外部リンクデザインの追加
  • サイドバーデザインの追加
  • フッターデザインの追加
  • フォントの追加
  • 記事エリア(記事一覧も含む)デザインの追加
もくりんぐ
もくりんぐ
お問い合わせのデザインは、とってもかわいいです。

アップデートで追加された機能

アップデートVer 1.1.0

  • ボックスデザイン8種類追加
  • スマホフッターメニューからハンバーガーメニューを表示できる機能の追加
  • カテゴリ毎に商品リンクを追加できる機能を追加
  • サイドバーの目次デザインをCARAT仕様にリデザイン

アップデートVer 1.1.6

  • 見出し(h2,h3,h4)アニメーションの追加
  • スマホ時のハンバーガーメニューのアニメーション追加
  • ボタンデザインの追加(2種類)
  • スライドメニューのデザイン追加
開発者 りようたさん@tech_ryota
販売価格 ¥2,480
公式サイト https://tech-first.me/jin-carat/
注意点 WordPressテーマ『JIN』専用のプラグインです。
もくりんぐ
もくりんぐ
バージョンアップで機能が増えていくと値段が高くなる可能性もあります。
その為、きになる方は早めに購入することをおすすめします。

実際にCARATを使ってみました。

CARATフッター

CARATの上記に書いた追加機能は単独でも適用できます。

もくりんぐ
もくりんぐ
では、さっそく使ってみたのでレポートします。

CARAT』は、カスタマイズの設定画面で、ホントにボタンひとつで簡単にかわいいサイトにカスタマイズできます。

順番にチャレンジしてみました。

JINサイトデザイン設定

①ボタンをCARATスタイルに合わせます。

公開ボタンを押します。

③後は、カスタマイズされてどうなったかをチェック。

もくりんぐ
もくりんぐ
自分が気に入ったやつだけ残してカスタマイズできます。
サクサク続けて、簡単に可愛くカスタマイズが完了♪

ヘッダーからフッターまで自分に合うカスタマイズだけ選んでボタン一つで変更出来ます。

ゆーちゃん
ゆーちゃん
1つ1つ設定するの大変そうだなぁ…。
時間かかりそうだから、カスタマイズしたくないなぁ…。
もくりんぐ
もくりんぐ
ゆーちゃん、大丈夫だよ。
自分で、設定をしなくても簡単に可愛くできるように、CARATは、4つの かわいいデザインを用意してくれてます。
  1. 和風な感じのデザイン
  2. シンプルなデザイン
  3. 清楚に見え隠れする可愛いデザイン
  4. 令和元年の特別デザイン

CARAT4種類のデモサイトを見る

やり方は、JINの時と一緒です。

データを、ダウンロードして、『Customizer Export/Importプラグイン』でインポートすれば簡単に変更できます。

もくりんぐ
もくりんぐ
わからない方は、こちらのJINのサイトマニュアルをご覧下さい。
ゆーちゃん
ゆーちゃん
これなら簡単にかわいいブログが作れそうだね。

ページ遷移のアニメーション

  1. カーテンのようなアニメーション
  2. ふわっと浮き上がるようなアニメーション

カーテンアニメーションは、かなり動きのあるアニメーションになってます。

私は、ふわっと浮き上がるアニメーションの方が好きなのでふわっと浮き上がるアニメーションを採用してます。

ピックアップコンテンツのアニメーション

上部に設置してある4つピックアップして紹介している記事部分です。

こちらは4パターン用意されてます。
私は、記事ごとに影がついたパターン4にしてみました。

ゆーちゃん
ゆーちゃん
なんか、いい感じ♪

4パターンともそれぞれ特徴があるりますので、4パターン全て試してみて下さい。

自分のサイトに合わせるのはとても楽しいです。

グローバルメニューのアニメーション
こちらは、パソコンで見た時のメニュー画面・スマホで見た時のメニュー画面のカスタマイズです。

もくりんぐ
もくりんぐ
メニューが劇的に変わります。

動くマーカーアニメーション

動くマーカーアニメーションは、読む人の目に止まります。
読んでほし箇所に使うとかなり効果があります。

コードで挟むだけなのでとても簡単です。

ゆーちゃん
ゆーちゃん
動くマーカーて、とっても楽しい♪

2種類の色が用意されているので使い分けながら使うと
面白いです。
色は、自由にいつでも変えれます。

スマホ時のハンバーガーメニューデザイン

スマホで使用時の右上の三本線したに「menu」表示が黒い字で追加されます。
個人的には、全体が白い字なので白い字で表示したいところです。

もくりんぐ
もくりんぐ
また、追加でカスタマイズしたいと思います。

記事エリアデザイン
見やすく、ギュッと引き締まった感じになります。
タイトルから、本文も見やすくなった感じがします。

カテゴリデザイン

アイキャッチ上に表示されるカテゴリーの位置を変えれます。
消す事も出来ますが、タイトル上に表示させてみました。

アイキャッチ画像を作る時、カテゴリー表示で左上がカテゴリー表示と重なって隠れる場合があったので左上は画像を貼らないようにしていましたがこれなら左上でも画像がいれれそうです。

サイドバーデザイン

今まであったJINのサイドバーのデザインからさらに4つ追加されてます。

当サイトは、今回スタイル8の少しトリッキーな形のデザインを採用してみました。

もくりんぐ
もくりんぐ
どれも、素敵で可愛いデザインが4つ追加されてます。

フッターデザイン

フッターのカラーを外側と内側の2つの階層に分ける事が出来ます。

もくりんぐ
もくりんぐ
いろんなバリエーションが出来るので自分のサイトにあった色を探してみてください。

この、フッター色の設定は、カスタマイズ好きなので結構ハマりました。

結果、現在の色になってます。

もくりんぐ
もくりんぐ
気になる方は当サイトのフッターをご確認下さい。

フォント項目の追加

『Open Sans』と『游明朝体』の文字が追加されてます。
これは、サイト運営者の好みのだと思います。
当サイトは、『Open Sans』を使ってます。

カラー設定項目の追加

パンくずリストのカラー、フッターカラー、フッター外側背景色、フッターホバー時のカラー、スマホフッターカラーの設定を細かく設定出来ます。

カスタマイズ好きにはたまらない、設定項目です。
好きな感じの色に少しずつ変えていきます。

もくりんぐ
もくりんぐ
みなさん、私のサイトはいかがでしょうか?
ヘッダー、フッター共々好みがあると思いますので好きなカスタマイズを選んでみてください。

さらに素敵な機能が満載

もくりんぐ
もくりんぐ
まだまだ、素敵な機能がたくさんあります。

タイムラインデザインの追加

カスタマイズの手順

  • STEP01
    カスタマイズコードを入力
    カスタマイズコードをコピーして、CSSにペースト。
  • STEP02
    カスタマイズできてるか確認
    カスタマイズが出来てるか自分のサイトを確認。

こんなタイムラインが簡単に作れます。

お問い合わせデザイン

海外からのお問い合わせは来ないし(スパム)適当にシンプルに作っていましたが、これを機にカスタマイズしてみました。

カスタマイズ前
    お問い合わせカスタマイズ前
カスタマイズ後
    お問い合わせCARATカスタマイズ後

変更前と後で、全く違う問い合わせフォームができました。
さらにカスタマイズ魂をくすぐるお問い合わせフォームの設定になってます。
お問い合わせフォーム作成でこんなに楽しかったのは初めてです。

もくりんぐ
もくりんぐ
お試しに、どなたか使ってみて下さい♪
お問い合わせ 当ブログをご覧になっての、 疑問・質問・感想などなどお気軽にお問い合わせ下さい。 皆さまからの意見も取り入れながらブログ...

外部リンクデザインの追加

最初にもご紹介しましたが、CARATの外部リンクのブログ
カードにするデザインの追加です。

このようなブログカードが簡単に作れます。
内部リンクと似たブログカードが作れるようになります。

内部リンクと似たカードデザインになるので見た目がとても綺麗だと思います。

追加アップデートで増えたカスタマイズ

もくりんぐ
もくりんぐ
CARATはさらに進化を続けています。

カテゴリ毎に商品リンクを追加できる機能を追加

カテゴリーごとに、商品リンクを追加できるすごい機能です。

関連商品をカテゴリーごとに分けて記事の最後に紹介できます。

ゆーちゃん
ゆーちゃん
これは、ホントにすごいね。

サイドバーの目次デザインをCARAT仕様にリデザイン

このカスタマイズがないと、サイドバーの目次は無い方がいいです。

このカスタマイズは、そんなサイドバーの目次がガラリと変わり可愛くなるリデザインになってます。

もくりんぐ
もくりんぐ
このデザインは、私のお気に入りです。

見出し(h2,h3,h4)アニメーションの追加

もくりんぐ
もくりんぐ
記事の見出しにアニメーションが追加されました。

見出しがフワッと動きます。

さらっと流し読みしてる読者の目を引くカスタマイズです。

スマホ時のハンバーガーメニューのアニメーション追加

JINのオリジナルのハンバーガーメニューは、はっきり言ってあまり『ぱっと』しないです。

無くてもいいかなぁ〜

と思っていたのですが、このアニメーションで綺麗に表示されるので今は、とっても気に入ってます。

ゆーちゃん
ゆーちゃん
ハンバーガーメニューが花火みたいに開いて綺麗だね。

ボタンデザインの追加(2種類)

「もこもこボタン」と「ゴーストボタン」の2種類が用意されてます。

もくりんぐ
もくりんぐ
私は、もこもこボタンを採用してみました。

もこもこっと、ボタンが動く姿がとてもお気に入りです。

詳細ページ

公式ページ

こちらは、2つとも『もこもこボタン』です。

まとめ

今回『CARAT』を購入させて頂き、色々と使ってみてましたがカスタマイズがとてもスムーズに出来て凄いと思いました。
また、あらためて、『JIN』の魅力的な機能を実感できました。

女性向けのプラグインとの事ですが、好きな機能だけでもつかえるので自分の雰囲気に合った部分のみ使うことができます。

標準の装備と差別化をはかるため『女性向け』との表現にしてるのかな?と思いました。

男性でも、十分満足できるプラグインです。

CARATも追加機能もこれから増えていくだろうし、さらに充実しそうな予感がします。

これからも楽しみです。

CARAT公式ページ