ブログで稼ぐ

テーマJINのおすすめカスタマイズ|追加CSSにコピペでOK!

テーマJINのおすすめカスタマイズ|追加CSSにコピペでOK!

この記事では、人気ワードプレステーマ『JIN』のおすすめカスタマイズについて詳しくまとめている。

ヘンリー
ヘンリー
JINのおすすめカスタマイズってどうやってやればいいの?
ホロン
ホロン
カスタマイズ例が紹介されている記事からコードを取ってきて追加CSSにコピペするだけで誰でも簡単に反映できるよ。やり方からおすすめのカスタマイズまで紹介していくね。

初心者でも簡単に扱いやすいワードプレス有料テーマ『JIN』。

そんなJINをある程度使いこなしていると、他サイトと差別化を図るために自分好みのデザインを追求し始めることだと思う。

そして、より細かい部分までおしゃれに仕上げていく作業の一つがカスタマイズだ。

今回はそんなJINのカスタマイズについて特集してみた。

それではカスタマイズのやり方から見ていこう。

テーマJINのカスタマイズのやり方

テーマJINのカスタマイズのやり方

テーマJINのカスタマイズのやり方はいたってシンプル。

次のようなやり方で初心者の方でもサクッとカスタマイズすることができる。

Googleでカスタマイズしたい部分を検索して調べる▶︎目当ての記事を見つける▶︎コピペでOKの追加CSSコードをコピー▶︎自分のブログの外観→カスタマイズ→追加CSSに貼り付ける

かなり細かい部分まで手順を含めるとこんな感じだ。

ありがたいことにJINにはカスタマイズのコピペコードがあちこちの記事で紹介されており、それを追加CSSにコピペするだけでおしゃれデザインに変わる。

(後ほどテーマJINのカスタマイズに便利なおすすめのサイトを紹介するのでお楽しみに。)

ロリポップ×JINカスタマイズの注意点

ロリポップ×JINカスタマイズの注意点

ちなみに、僕はロリポップを利用してブログを運営しているのだが、もしもあなたが僕と同じようにロリポップのサーバーを利用してブログを運営している場合は注意が必要だ。

ロリポップの場合は、WAF設定と呼ばれる制限がかかっているので、これを一時的に『無効に設定』しないとカスタマイズできない。(コピペができない。)

なので、もしもロリポップをあなたが使用してワードプレスを運営している場合次のような手順でWAF設定を解除して頂きたい。

ロリポップにログイン▶︎セキュリティ▶︎WAF設定▶︎設定変更:『無効にする』をクリック!

→5分〜10分くらい待つ

▶︎カスタマイズ(追加CSSにコードをコピペなど)▶︎完了

また、カスタマイズが終わった後は、WAF設定を有効化する(元の状態に戻す)のを忘れないように。

テーマJIN用カスタマイズにおすすめのサイト紹介!

テーマJIN用カスタマイズ

テーマJINをカスタマイズするに当たって、僕もよく使わせてもらっているのがこちらのサイトだ。

→テーマJINをカスタマイズ「FOR JIN」

このサイトではテーマJINのカスタマイズに関する情報がかなり詳しくまとめられているだけでなく、初心者でも簡単にカスタマイズできるようにやり方や手順まで分かりやすくまとめられている。

なんといっても、デザインセンスが抜群でおしゃれすぎる。

「こんなカスタマイズもあるのか!」と目から鱗が落ちるような感覚になるカスタマイズがコピペするだけで再現できるので、感動すら覚える。(言い過ぎか。笑)

でも、それぐらい魅力的なカスタマイズ例がゴロゴロ紹介されている。

ホロン
ホロン
有料級レベルの内容で、noteで販売すれば間違いなくお金を取れるぐらいだよ。

ホロンブログでもお世話になっているのだが、きっとあなたも惹かれるデザインがあると思うので一度サクッとチェックして頂きたい。

ホロンブログが導入しているカスタマイズはこれ!

テーマJINカスタマイズ

ここからはテーマJINを使っている僕のブログ(ホロンブログ)が導入しているカスタマイズ事例を紹介しようと思う。

それがこちらだ。

ホロンブログが導入しているカスタマイズ
  1. 目次のカラーを整える
  2. 目次のH3の●を消す
  3. 上に戻るのボタンを大きくする
  4. アプリーチのデザインをJIN風にする
  5. ボタンをグラデーションにする
  6. フッターのテキストリンクにホバーアニメーションを導入

個人的にお気に入りのカスタマイズなので、一つ一つ参考サイトと共に内容を紹介していこうと思う。

目次のカラーを整える

目次のカラーを整える

まずは目次のカラーを整えること

これをすることで、サイト自体のカラーが統一されまとまり感のあるページに仕上げることができる。

ちなみに、目次にはTOC+というプラグインをインストールするだけで簡単に作れるので、まだ目次を作っていないという人はぜひ使ってみて頂きたい。

目次があった方がユーザビリティが向上し、読者が読みやすい記事を作ることができるのでおすすめだ。

そんな目次のカスタマイズについてまとめられているのが先ほども紹介した「FOR JIN」のサイト。

コピペするだけで一気に目次がおしゃれになるが、サイトのアクセントカラーやメインカラーに合わせて微調整するのがおすすめだ。

目次の見出し3の●を消す

JINカスタマイズ2

2つ目のカスタマイズが目次の見出し3の●を消すことだ。

僕は文章量の多い記事を書くことが多く、見出し2と見出し3をガッツリ含めて記事を書いていくので、TOC+を使ってそのまま目次を生成してしまうと、●が気になって仕方がなかった。

それをうまく解決するためのカスタマイズがこれに当たる。

このカスタマイズも追加CSSにコピペするだけでOKで、やり方はJINのMANUAL(公式サイト)で紹介されている。

上に戻るボタンを大きくする

JINカスタマイズ3

3つ目のカスタマイズは上に戻るボタンを大きくすること。

これは個人的にもダントツで気に入っている可愛いカスタマイズだ。

スマホで自分のブログを見た際にデフォルトの「上に戻るボタン」は控えめでシンプルなのだが、こちらのカスタマイズを導入することで「大きいけど控え目なデザイン」に仕上げることができる。

(僕の場合はコピペコードを少しいじってサイズを絶妙に調整している。JINのボタンメニュー を導入していると上に戻るボタンが目立ちすぎる位置に来るのであえて微調整して小さく表示した。)

こちらのカスタマイズもfor JINで紹介されている。

アプリーチをJIN風のデザインに調整

アプリーチをJIN風のデザインに調整

4つ目のカスタマイズがアプリーチをおしゃれなデザインに調整することだ。

僕はゲーム系の記事も書いており、記事内でゲームアプリを紹介し、アプリ型のアフィリエイトをすることも良くあるのだが、そんな時に便利なのがアプリーチ。

おしゃれにアプリを紹介することができる上、AppStoreとGooglePlayのボタンも表示させることができるので、初心者が使ってもそれっぽいアプリリンクを生成できる。

ブログでアプリを紹介することがなければ必要ないが、アプリアフィリエイトをしている方にはおすすめのカスタマイズだ。

(ちなみに、最新バージョンのJINでは、外観▶︎カスタマイズ▶︎その他の設定▶︎アプリーチをJINオリジナルデザインにするで導入できるので、そちらもおすすめ。)

ボタンをグラデーションにする

次に採用しているのがボタンをグラデーションにするカスタマイズ。

こんな感じ⤵︎

HORONボタン

こちらは僕が追加CSSでカスタマイズを始めた時に、一番最初にやったことだ。

このカスタマイズからブログへのデザイン性に対して熱が入り始めたと言っても過言ではない。

ボタンをグラデーションにするだけではあるが、初めて追加CSSを応用している感覚になって、感動したのを今でも覚えている。

ちなみに、最新版のJINではグラデーションのボタンがすでに導入されているが、こちらは内部リンクに貼るのには使えるのだが、外部リンクに貼る際など、rel=”nofollow”を使えないなどというデメリットがある。

そこを踏まえても、完璧にリンクの設定を反映できるボタン1、2をグラデーションにしておくことはおすすめだ。

このコードを貼るだけ。

.color-button01 a {
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);/*背景のグラデーション*/
}

ボタン2をグラデーションにしたい場合は上の『.color-button01』を『.color-button02』に変えるだけ。

フッターのテキストリンクにホバーアニメーションを導入

JINカスタマイズ6

最後のカスタマイズがフッターのテキストリンクにホバーアニメーションを導入している。

これはフッターでなくても使えるコードだ。

こんな感じ。

作り方は簡単で追加CSSにコードをコピペし、classで指定の場所に呼び出す。

ホバーアニメーションを導入するだけで、ブログが生きているような感じになるので個人的におすすめのカスタマイズだ。

こちらの記事で、ホバーアニメーションのデザイン例が詳しく紹介されているので、気になる方はチェックしてみて欲しい

テーマJINカスタマイズの注意点

テーマJINカスタマイズの注意点

ということで、ここまでテーマJINのカスタマイズのやり方からおすすめの事例まで紹介してきたわけだが、やる際には注意点がある。

それをここからサクッと解説していこうと思う。

やりすぎるとサイトが遅くなる

まずはカスタマイズをやりすぎるとサイトが重くなってしまう。

ただでさえJINは遅いと言われがちなテーマにも関わらず、そこにさらにカスタマイズを盛り込みすぎてしまうとサイトが遅くなってしまう。

高速なサーバーを利用したり、JINのアニメーションを止めたり、ピックアップコンテンツを下層に表示しないなどの高速化設定をちゃんとした上で、カスタマイズしていくのがおすすめだ。

カラーはなるべく統一したほうがいい

次にカラーはなるべく統一したほうがいいという点。

Googleで検索すれば、色々なJINのカスタマイズコードが紹介されている。

確かに便利ではあるのだが、コピペするだけでは全く一緒のデザインになってしまう。

そして、ブログ自体の色合いが不釣り合いになりがちだ。

それを阻止するためにも、コピペコードをある程度自分でいじって自分のブログにあったデザインに微調整してあげる必要がある。

特に色の部分を調整してあげるだけでいいので、そんなに難しいことではない。

#ccffffとか#000000とかの部分(ハッシュタグと数字や文字が組み合わさっている部分)を探して色を変えるようにして頂きたい。

ちなみに、カラーのコードを探すときはJINの投稿画面から取ってくるのがおすすめだ。

バックアップはしておくべき

3つ目の注意点がバックアップはしておくべきということ。

追加CSSをいじり倒してブログが壊れた経験などは今まで一度もないが、前のデザインに戻したいときや何かしらの原因でブログのデザインが崩れてしまったときのリスクを考えるとバックアップはしておいて損はない。

また、精神的な安定剤にもなる。

カスタマイズするほどの思い入れがあるブログであれば尚更バックアップをしておくべきだろう。

JINカスタマイズ前のバックアップのやり方が不明?

JINカスタマイズ前のバックアップのやり方

ちなみに、バックアップの仕方についてやり方がよく分からないという方もいるのではないだろうか?

確かに、ワードプレスを使って無料でバックアップを取ろうとすれば、大抵プラグインの『BackWPup』か『UpdraftPlus』が紹介されている。

僕も実際に使った経験があるが、どこまでバックアップが取れていて、どこまで元の状態に戻せるのか?

疑問に感じる部分が多かった。

なので、初心者の方にはプラグインを使ったバックアップはおすすめしない。(ちなみに、プラグインではバックアップし切れない部分もあるようだ。)

おすすめなのはサーバーのバックアップサービスを利用することだ。(特にロリポップユーザーは。)

サーバーによっては自動でバックアップしてくれているものもあるようだが、ロリポップなどの場合はオプションでバックアップのサービスを契約する必要がある。

ただ、月額300円程度とかなりリーズナブルな上、一度契約してしまえば、こちらから何も設定していなくても自動でバックアップを取ってくれるのでおすすめだ。

参考までに。

テーマJINのカスタマイズまとめ

テーマJINのカスタマイズまとめ

ということで、今回はテーマJINのカスタマイズについて詳しく特集してみた。

この記事で紹介させて頂いたカスタマイズは、テーマJINを使う上でおすすめなので、ぜひ使って頂きたい。

自分でブログをカスタマイズするだけでも勉強になることがあるし、どこをイジればどういったデザインが反映されるのか?手に取るように理解できるので、見るよりやって理解するタイプの方は実際に手を動かしてちょっとずつカスタマイズして欲しいと思う。

ABOUT ME
ホロン Z世代の経営者
アパレルブランド経営・海外規模の事業展開中。 友達とつるむことに飽きて一人でお金稼ぎを始めたら、気付いた時にはとんでもない境地まで辿り着いてしまった21歳。 一応神戸にある大学の首席。(現在4回生) 啓発書とビジネス書LOVER
毎日600円の自動収益を発生させる仕組みを作る方法!
毎日600円の自動収益を発生させる仕組みを作る方法!

お金が欲しいあなたにお金稼ぎのノウハウを紹介!

→モッピー×YouTubeで毎日600円の安定収益を発生させる仕組みを10日で作る方法【再現性100%

確実に毎日600円発生させる仕組みを作る方法を1から全て解説いたします。

この通りに真似するだけである程度の収益が発生することを断言。

詳しくはこちらのページをどうぞ!

\今すぐCheck!/

商品ページ

2980円