Cocoon スキン「イノセンス」を改良したい

Cocoon

 

このサイトはスキン「イノセンス」を使用しているのですが、いくつかカスタマイズしています。基本的にはすっきりしていてお洒落で好きなんですけど、どうしても変えたい場所がありました。

 

背景の網々消したくない?

↓これです。

ゆるくま
ゆるくま

悪くないんだけど
めっちゃイノセンス使ってますって感じで
他の人と被るの避けたいんよね~

 

こやつを消したくて調べに調べてたどり着いたのがこちら↓です。

 

style.cssにコードを追加

最初に注意事項です!

・バックアップの保存推奨
・元のCSSはメモ帳などに保存ください
・他コードとの相互作用等は未知ですので、変更による影響に関して責任は負えません。自己責任でお願いします。
 
バックアップの方法は下記リンクをご参照ください↓
 

 

ゆるコアラ
ゆるコアラ

さて、カスタマイズ方法を紹介していくよ

 
 

① ダッシュボードから外観→テーマファイルエディターをクリック

 

② 「Cocoon Child スタイルシート」の「子テーマ用のスタイル欄」に「MEMO欄のコード」を追加

body{
background-image: none;
}
 
シマエナガ
シマエナガ

全体に関わる仕様を変えたいときは
テーマファイルエディター

直接書くと大体解決するよ~

 
 

見出しH3のチェックを消したい

ゆるくま
ゆるくま

お分かりいただけるだろうか

見出しについてh3以外はシンプルなので特に何も思わないのですが、h3の丸チェック…
私はブログの中でよく①とか②とか使うため、どうも邪魔されている気がしまして。

ゆるコアラ
ゆるコアラ

消したい!!!

ということで消し方を探しに探しまくった結果…こちらです↓

 

テーマファイルエディターにコードの追加

今回は子テーマの、前回背景を消し去った続きにコードを追加します。

 

黄色マーカー部分が今回の追加CSSになるので、そちらをコピペして使用ください。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

body{
background-image: none;
}

/* H3 */
.entry-content h3:before {
content: none;
background: none;
box-shadow: none;
}
.article h3 {
padding-left: 1em;
}

正直コード弱いんですけどおそらく、色々消したるわ=noneです。本当か?
今回はチェック丸が消えると左が空いてしまうので、paddingで調整しています。

 

余談
実は、見出しのスタイルをこれでリセットできるよ系をいくつも試したのですが、チェック丸だけしぶとく残り、背景だけ消えたり散々な思いをしました😅
結局色々組み合わせて上のコードに行きついたのですが、もしかしたら不要なものも入っているかもです…
なんとしてもチェック丸のみを消し去りたいという強い意志の元に生まれたコードですので…ご了承ください。

 

 

おまけ

見出しを全部思うようにカスタマイズしたいな~
なんて方はこちらのサイト↓がおすすめです。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

とても良くまとめられているので、参考にされると良いと思います♪

シマエナガ
シマエナガ

こういうまとめ記事作ってくれる人達
まじ全員リスペクト

 

まとめ

そのうちイノセンスに限らずおすすめのカスタマイズを書きたいな~と思ってはいますが、いかんせん気まぐれ人間なのであまり期待はしないでください。。

もうこれはブログを始めて何回思ったか分からないのですが、
自分のカスタマイズしたいことが揃っているような、たとえばお洒落ブロガーのカスタマイズ一覧集とか、まとめサイトが欲しいです…!!!需要ここにありますよ!!!(言い出しっぺがしろよ)

それではまた!

 

コメント

タイトルとURLをコピーしました