ワードプレス「JIN」をカスタマイズして自分色のブログにしよう！

現在このブログはテーマSWELLを使っています。
また、JINのアップデートによりカスタマイズ機能が増えている場合もあります。ご了承ください。

ワードプレスのテーマ JIN はカスタマイズ機能が豊富なので、初心者でもマニュアルに沿うだけで素敵なブログが出来上がると有名！

でも「ここ、こうだったらなぁ」なんて部分はコソコソとカスタマイズしたくなる…。

ちょっぴりカスタマイズするだけで、差別化にも繋がるし愛着もわきますよね。

初心者の私でもできた、JINのおすすめカスタマイズや参考サイトをご紹介いたします♡

JINはカスタマイズ機能が豊富！

JIN公式サイトでは初心者でも分かりやすいマニュアルが用意されています！

また私が書いたレビュー記事にて、おすすめ機能など紹介しています(^^)

では、さっそくJINのおすすめカスタマイズをご紹介していきます～♪

パソコン記事内表示のフォントを太くするカスタマイズ

パソコンで表示される文字の線が細いなぁと…ずっと思っていたのでちょっぴり太くしてみました。

before

after

カスタマイズ方法は下記の記事で説明しています。

画像をクリッカブルにする

JINでは画像を入れ込むと、クリックしたときのリンク先を選ぶことができます。

ただリンク先に飛ぶと、画面が切り替わってしまい「戻るボタン」を押さないといけないので、めんどくさいですよね。

プラグインの「Easy FancyBox」を導入すると、ひょこんっと画像が手前に出るだけになります！

こんな感じ

プラグインの設定はTECHACADEMYさんの記事を参考にさせていただきました！

ただ参考の記事のまま設定していると、alt属性の文字がスマホで見た時に画像とかぶってしまうので、設定で下記のチェックを外すことをおすすめします。

「内部リンクに続きを読むを追加」をカスタマイズ

右下の「続きを読む」は初期設定だとありません。これがあるだけで、クリックしたくなりますよね。

ブログ内の回遊率にもつながるので、ぜひカスタマイズしてみてください～！

りらさん（@rila_srich）の「【JIN】ブログカードに「続きを読む」を追加するカスタマイズ」を参考にさせていただきました。

「パンくずリストを上部へ」カスタマイズ

パンくずリストってなあに？って話ですよね。えぇ、分かります。

こうゆうの！

JINの初期設定だと記事の一番下にあるのですが、一番上に持ってくることで回遊率を高めることが期待されます。（他のテーマはほぼ一番上にあります）

こちらのカスタマイズは、サーバーのファイルマネージャーやFTPソフトを使ってファイルをアップロードする必要があるので、ちょぴっと難易度高めです！

りゅうたさん（@ryuta_blog）の「【JINカスタマイズ】パンくずリストをタイトル上に表示させる方法】」を参考にさせていただきました。

スマホメニューをカスタマイズ

固定バージョン

ボタンバージョン

こちらはJINがアップデートした時に追加された機能で、スマホのボタンメニュー！

JINの公式サイトの「スマホ専用ボタンメニューの作り方」を参考にさせていただきました。

また、さらにくまさん（@Bearface18）のカスタマイズで、もともとのボタン表示の「＋」から「≡」に変更することもできます！こちらはくまさんを支援するとカスタマイズが見れますよ♡

「プラグインのRinker（リンカー）」をカスタマイズ

パソコン表示

スマホ表示

JIN使用にカスタマイズされたものなので雰囲気にぴったり！

色も自分の好みにすることができる上に、スマホだとボタンが大きくなるためボタンが押しやすい♪

こちらも、またまたくまさん（@Bearface18）の「【JINをカスタマイズしてみた】RinkerのデザインをJINっぽくしてみた」を参考にさせていただきました。

タイムラインを作るカスタマイズ

ずーっとほしかったタイムライン…！

JINにはもともとないので、他のテーマがうらやましいなぁと思ってて…ブログデザイナーのぽんひろさん（@ponhiroo）にお願いしてみたんですよね、、

そしたら、もう！めちゃくちゃ可愛いデザインのタイムラインが…！！

こんなかんじに

ぽんひろさん（@ponhiroo)の「HTMLとCSSでタイムラインデザイン！WordPressでショートコードも！」を参考にさせていただきました。

カテゴリーごとに色の変更

アイキャッチ画像の左上にカテゴリー名が表示されるかと思います！

カテゴリーごとに色を変えると、ユーザーが好きなカテゴリーの記事を見つけやすくなるのでおすすめです～♪

やりかた

メニューバーをグラデーションにカスタマイズ

カスタマイズ方法は下記の記事で説明しています。

さらにアイキャッチ画像や配色デザインでブログの色が出る！

また、アイキャッチ画像はブログの顔！さらに配色にこだわることで、そのブログに合った雰囲気作りができますよね！

下記記事では、アイキャッチ画像の作り方や、配色や素材のおすすめサイトを紹介しています♡

ワードプレスのカスタマイズ沼に注意。

カスタマイズする目的はユーザーファーストが1番ですが、やや自己満なところも。笑

ですが、せっかくお金を出してテーマを買ったんですもの！とことんこだわって愛着たっぷりのブログにしたいですよね♪

デザインも含めてブログ運営を楽しんでいきましょ～！

お読みいただきありがとうございました♡