「JIN」カスタマイズ方法:追加CSS

「JIN」カスタマイズ方法:追加CSSとはテーマJINをさらに細かくデザイン変更したい時につかいます。

「CSS=装飾」とよく表現され、いろいろなアレンジを加えることが可能。

Coccoblogでいうと

 

  • プロフィール欄SNSボタンの色設定
  • 内部リンク用のブログカードのデザイン
  • サイドバー最下部のボックスナビ
  • タイムライン

 

などなど、いろいろなところで活躍してます。

 

「JIN」カスタマイズ方法:追加CSS

 

JIN」カスタマイズ方法:追加CSS

「JIN」カスタマイズ方法:追加CSS

「JIN」カスタマイズ方法:追加CSSの使い方

こういった特別なデザイン変更をしようと思うと、装飾を司る部門「CSS」に追加でコードを入力していきます。

結論からいうと、まず素人や初心者には自分でコードを作って入力するなど、まずムリです。

僕もさっぱり分かりません、笑。

なので「カスタマイズCSS」などを配布したり、紹介してくれているサイトに見に行き、コピペして貼り付けてます、それでOK!

 

「JIN」カスタマイズ方法:追加CSS

 

新しいCSSコードは入力欄の一番下に、一行空けて追加していきます。

 

「JIN」カスタマイズ方法:追加CSS

 

「JIN」カスタマイズ方法:追加CSSで気をつけること

ここの設定では鉄則があります。

必ず事前にバックアップをとるということ!

さらに念を入れ、すでに書き込んである追加CSSコードも、全てコピーしてメモ帳などに一時的に貼っておけば、万が一操作を誤って削除しても元に戻せます。

なぜならCSSコードなどは「半角やスペース」といったほんの些細な表記ミスでも動作しなくなり、素人はパニックになるからです!

 

こっこ
こっこ
サイト画面がぐちゃぐちゃに!! 

 

なんていうガックリすることも発生して、気持ちよくありません。

バックアップとコピーさえあれば、いつでも復元できて安心ですよね!

事前にバックアップするためにはWordPressのプラグインの「BackWPup」が便利です。

プラグインの事や、詳しいバックアップ方法はこちらを読んで覚えましょう。

 

 

CSSコードを入力していて、失敗し、少し元に戻りたいときはキーボードの「Ctrl+Z」で戻れます。

 

「JIN」カスタマイズ方法:追加CSSが反映されない時は?

完璧にCSSを追加できても、サイトを見ても変化なし!

ガックリくることもありますよね?

サイトに反映させるにはブラウザの「更新ボタン」をおしたり、キャッシュの削除をすればうまくいくことが多いです。

キャッシュとはブラウザが保存してくれているページ情報(データ)のこと。

一つ前の古いデータを保持し続けていると、新しく変更したCSSが反映されないことがあるので、強制的に古いキャッシュを削除しましょう。

ここではJINの公式サイトがわかりやすいです!

JIN公式マニュアルはコチラ

 

「JIN」カスタマイズ方法:追加CSSはどこで紹介されている?

ではそういった「追加CSS」に素人がコピペできそうな、素敵なカスタマイズ集はどこにあるかというと、僕のオススメは以下です。

 

「for JIN」

「JIN」カスタマイズ方法:追加CSS

「ぽんひろ」

「JIN」カスタマイズ方法:追加CSS

 

他にもJIN好きのユーザー達がいろいろとカスタマイズCSSを作ってるので、探してみてくださいね!

JINカスタマイズ設定:初心者への具体的なアドバイス

脱・初心者ポイント⑰
  • CSSを使いこなせるとサイトのオリジナリティが出る
  • CSSの追加の基本を覚えること
  • 必ずバックアップを取ってからやること
  • 更新やキャッシュの削除をすること
  • CSSもたくさん入れすぎると、サイトが重くなる

 

「JIN」カスタマイズ方法:追加CSS