「JIN」カスタマイズ方法:追加CSSとはテーマJINをさらに細かくデザイン変更したい時につかいます。
「CSS=装飾」とよく表現され、いろいろなアレンジを加えることが可能。
Coccoblogでいうと
- プロフィール欄SNSボタンの色設定
- 内部リンク用のブログカードのデザイン
- サイドバー最下部のボックスナビ
- タイムライン
などなど、いろいろなところで活躍してます。
ブログカードのデザイン
特殊なタイムライン
- STEP1タイトル1文
- STEP2タイトル2文
- STEP3タイトル3文
- STEP4タイトル4文
- STEP5タイトル5文
「JIN」カスタマイズ方法:追加CSS
「JIN」カスタマイズ方法:追加CSSの使い方
こういった特別なデザイン変更をしようと思うと、装飾を司る部門「CSS」に追加でコードを入力していきます。
結論からいうと、まず素人や初心者には自分でコードを作って入力するなど、まずムリです。
僕もさっぱり分かりません、笑。
なので「カスタマイズCSS」などを配布したり、紹介してくれているサイトに見に行き、コピペして貼り付けてます、それでOK!
新しい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を使いこなせるとサイトのオリジナリティが出る
- CSSの追加の基本を覚えること
- 必ずバックアップを取ってからやること
- 更新やキャッシュの削除をすること
- CSSもたくさん入れすぎると、サイトが重くなる