ブログ運営

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

ワードプレスのテーマ JIN は、カスタマイズ機能が豊富なのでマニュアルに沿っていけば、じゅうぶんすぎるくらい素敵なブログが出来上がります!

でも、、「こここうだったらなぁ!」なんて部分はコソコソとカスタマイズをすることが多くなりました。

ひちょこ
ひちょこ
ちなみにコードはほとんど分かりません💕へへ

そんなわたしでもできた、おすすめカスタマイズ参考サイトをご紹介します☺

バックアップとってからやってみてくださいね✨

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

JINでは簡単にカスタマイズすることが可能です✨

ひちょこ
ひちょこ
しかもやれることがいっぱい!全部できないくらい!

JIN公式サイトfas fa-external-link-altですごく分かりやすくマニュアル化されているので、ご覧くださいね。

また、わたしが書いたJINをおすすめする記事fas fa-external-link-altも一緒にどうぞ☺

 

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

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

before
JIN角丸文字before
after
JIN角丸文字after
パソコン記事内文字を全体的に太くするカスタマイズfas fa-external-link-altをご覧ください!

 


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

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

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

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

こんな感じになるよ!
JIN画像クリッカブル
ひちょこ
ひちょこ
これやりたかったやつ~!
TECHACADEMYさんの記事fas fa-external-link-altを参考にしました!

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

設定でAppearanceの部分の
このチェックを外す👇
「Show title. FancyBox will try to get a title from the link or thumbnail title attributes.」

 

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

ワードプレスのテーマ JIN は簡単に『可愛い』が作れちゃう!ワードプレスのテーマ『JIN』は、簡単に可愛いブログを作りたい初心者におすすめです!無料テーマと有料テーマは何が違うのかも、両方使った私がお伝えします!...

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

 


「外部リンクをブログカード」にカスタマイズ

無料テーマからJINに変更した際に一番最初にカスタマイズしたのが外部リンクです。

内部リンクの場合は、URLを張り付けるだけで先ほどのカードみたいな形で表示されます。それがブログガードです!

でもJINは外部リンクがブログカード未対応なので、内部リンクと同じようなデザインにカスタマイズしました!

こんな感じになります💕
こちらはプラグインで設定するだけになっていて、プラグイン開発者のぽぽずれさん(@popozurefas fa-external-link-alt)の「WordPlessテーマ「JIN」の外部リンクとして「Pz-LinkCard」を使うときの設定のコツfas fa-external-link-alt」を参考にしてみてくださいね。

わたしは追加CSSなどで設定をしてしまっていますが、こちらの記事のやりかたが一番簡単だと思いました!(記事が出る前に設定してしまったので…💦)

 

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

ひちょこ
ひちょこ
ぱん…くず…りすと?ってなに?
こうゆうやつ!
《JINカスタマイズ》ぱんくずリスト上部へ

JINの初期設定だと記事の一番下にあるのですが、一番上に持ってくることで回遊率を高めることが期待されます。

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

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

 


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

固定バージョン
JINスマホ固定メニューカスタマイズ
ボタンバージョン
JINスマホボタンメニューカスタマイズ

12月でアップデートされた際に追加されたスマホのボタンメニュー!

far fa-heart 固定メニューはなじんですっきりさせたいかたにおすすめ!
far fa-heart スマホボタンメニューは目立たせたいかたにおすすめ!

JINの公式サイトの「スマホ専用ボタンメニューの作り方fas fa-external-link-alt」を参考にしました。

また、さらにくまさん(@Bearface18fas fa-external-link-alt)のカスタマイズで、もともとボタンの表示を「+」から「≡」に変更することもできます!こちらはくまさんを支援するfas fa-external-link-altとカスタマイズが見れますよ💕

 

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

ひちょこ
ひちょこ
友達にこのボタンが一番押したくなる!って言われた!

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

配色の組み合わせは「Color Palettersfas fa-external-link-alt」がおすすめ☺

カスタマイズが好きな人はくまさん(@Bearface18fas fa-external-link-alt)の「for JINfas fa-external-link-alt」をチェックです!ここでは紹介しきれないほど、どっぷりお世話になっています😳

 

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

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

JINにはもともとないので、他のテーマがうらやましいなぁと思ってて…ブログデザイナーのぽんひろさん(@ponhiroofas fa-external-link-alt)にお願いしてみたんです😳

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

  • STEP1
    タイトル1
    タイムラインは
  • STEP2
    タイトル2
    手順を説明するときに
  • STEP3
    タイトル3
    とっても便利!
ぽんひろさん(@ponhiroofas fa-external-link-alt)の「HTMLとCSSでタイムラインデザイン!WordPressでショートコードも!fas fa-external-link-alt」を参考にしました!

他にもいろいろなデザインがあって、選ぶのに困っちゃうくらい!

 

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

ここの部分です!
JINカスタマイズカテゴリーの色

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

これを分かりやすいようにカテゴリーごとに色を変えています☺

やりかた!
【ダッシュボード】
⇒【投稿一覧】
⇒【カテゴリー】
⇒【カテゴリーの編集】
⇒【カテゴリーの色】
ひちょこ
ひちょこ
簡単なのでぜひやってみてね!

 

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

メニューをグラデーションにするカスタマイズ
メニューバーをグラデーションにするカスタマイズfas fa-external-link-altをご覧ください!

 

さらにアイキャッチ画像や素材選びでブログの色が出る!

また、アイキャッチ画像もすんごい大切でブログの顔ですよね!

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

おしゃれなブログのデザインを簡単に作る方法【画像・配色】『おしゃれなブログにしたい』と思っても、デザインのセンスがないし!と悩んでいるかたに、ド素人でも簡単におしゃれなブログにする3つのコツを教えます!...

 

まとめ「カスタマイズは楽しい。」

カスタマイズをしているのは自己満なところがあるのですが、可愛くなっていくブログを見て愛着がどんどん増しています!

デザインも含めてブログ運営を楽しんでいきたいですよね☺💕

ひちょこ
ひちょこ
少しでも参考になれば嬉しいです!

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

\このブログのテーマはJINですっ🐏/

ワードプレスのテーマ JIN は簡単に『可愛い』が作れちゃう!ワードプレスのテーマ『JIN』は、簡単に可愛いブログを作りたい初心者におすすめです!無料テーマと有料テーマは何が違うのかも、両方使った私がお伝えします!...
関連記事