Cocoonのカスタマイズ試行錯誤

見出しのカスタマイズ

見出しを指定して見出しをと思ったけど統一感がなくなるので派手なのはやめることにした。見出しBOXの覚書と連動してます。

調べて通常の見出しのリセットをして変更できるのを知りやってみたが、アイコンや最初の縦や横のボーダーが残って綺麗にできない。その後発見したサイトに載っていた別コードで指定したらリセットできた。しかし他の不具合でスキンを変えるとまたおかしくなりさらに調べて公式フォーラムで解決。と思ったら新たな問題h5だけ指定ができない( ;´д`)トホホ…片手落ちだけどデフォルトにして封印。

他のhの指定でもコードがうまく指定ができないのもあった。どうやらどのサイトのコードでもおかしくなるのでカラフルスキンの見出しのアイコン等が多分枠のCSSでの変形指定なのかもしれない(わからんけど)。カラフルスキンではおふとんさんの方を子テーマのCSSに追加して公式の最後のコードを追加して消しました。今は旅カメラスキンに変えておふとんさんの方のリセット方法を子テーマのCSSに追加だけで解決ъ(`・ω・´)グッ

参考サイト
画像サイズがおかしくなる

アイキャッチを揃えようと画像サイズを統一したのになぜか液タブの画像だけおかしくなる。cocoonの画像設定のサムネイの比率をいじるとTOPの表示は他とになるが上のカルーセルはおかしいまま。比率はどれでも画像が壊れずカルーセルも画像サイズ統一にしたいが未解決(´・ω・`)

さらに調べて液タブの記事に以前に登録した画像のNOIMAGEでも壊れた(画像サイズは違う)。その記事だけ画像登録したのがおかしいのか液タブ画像以降がおかしくなるのか?ということで液タブ画像以降にメディアに新しく登録した画像で新記事からおかしくなるのを確認。液タブ画像前の記事だと壊れないし昔の画像を貼ると普通にカルーセルやカードの画像が揃う不思議。再度アイキャッチすべての画像を別のサイズに変更して全部合わせたらおなじになった。なんでやねんヾ(゚Д゚ )

画像のサイズ合わせに参考にしたサイト
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
Cocoon使用者のアイキャッチ画像を統一する方法がわからない、アイキャッチ画像の最適なサイズがわからない、アイキャッチ画像をどうやって作ればいいかわからない。こんな悩みを解決します。本記事を読めば、あなたのブログもきっと整って美しいアイキ...
ブログカードの表示がおかしくなる

SILKのブログカードが縦になるのはスキンの問題のようなのでスキンを別スキンに変更して解決。使いたいスキンが使えない問題あるよねー(ヽ´ω`)。TOP表示の仕方が決まっている。各種カードの表示もきまっている。こだわりはわかるがまじ困る。変更させてくれ(本当は自分が勉強すれば解決)。そしてここでSILKスキンのブログカードを横長に変更できるコードを発見SILKに戻してみた。

カラフルラインに見慣れて寂しい気がしてしまう不思議。ブログカード縦でもいいけど1つだけ途中に貼りたいときにうざくなるんだよねでも横長がたくさんつながるのもいまいちうるさい。縦カードを小さく横に並べられるかミニカードみたいなブログカードほしい。カラムの中にブログカード指定というナンチャッテでそれっぽくした。というわけでまたスキンをカラフルラインに戻した。

目次に元のスキンの色が残る

リセットコードを試したりシンプルなものや凝ったものを試してみたが改善できず、目次のカスタマイズはとりあえず諦めた。カスタマイズするには元がシンプルな方がいいっぽい。あくまでもあまりCSS詳しくない人の感想なんで詳しければいけると思う。私ができるのはコピペとちょっとの改変くらい。

カラフルスキンのカスタマイズ

もう少し色味がおとなしいといいけど、他の不具合とか色味が一番今マシなのでカスタマイズを勧めていく。カラフルスキンの設定を細かくして載せているサイトを発見したので参考に改良してみた。カラフルではなくしてみたいラインの色変えはうまくいく。しかし、不具合のはいお約束。まんまコピーしたのだがサイドバーの見出し背景が単色にならない。クリップはついた。別のスキン用の初期化コードで解決

Cocoonのカラフルラインをカスタマイズしてみる
カラフルラインをカスマイズする記事です。 カラフルラインのカスタマイズなので、右のサイドバーにある「スキン切り替え」からカラフルラインを選択してください。 ただし、簡単にカスタマイズできる方法が中心になるので、ご了承ください。 グローバルメ
最新は

というわけで最新の見た目は画像の感じがいいので旅カメラスキンに変更してカスタマイズを続けているが、文字のセンター合わせと見出しの文字間がありすぎるのが気になる。見出しの文字の間隔を修正。h5の指定はいけたがh2はちょいおかしい。見出しのとこにある通りリセットコードを減らして解決。目次も指定できるかも。今は素のまま。クリップかは右側指定というかcenter解除がわからず、そのままだとcenterのボーダーが残るので力技でボーダーを消した。(ΦωΦ)フフフ…色変えしてたらじゃまになったプロフィールのピンクと青のしましま(エアメール的模様)が消せない。CSSカスタマイズするたびリセットが必要っていう。参考になるサイトややり方を知ってる方はコメントの方にお願いします。

綾糸.netさんにあったグローバルナビのアニメーション効果をいじって選択を見やすくした。ブログカードのURLとかの表示を消したり、角丸指定もしてみた。カスタマイズじゃないけどついでにURLスラッグの日本語になってたのを修正。

見出しやBOXと次の文章がピッタリくっつきすぎて変になるので、どちらの下にもスペース入るコードいれた。見出しがシンプルだと多分つながっててもおかしくないんだと思う。カスタムしてる子テーマのCSSのか見出しは、タイトル以外のh2~h6をBOXは自分が追加した9個分の最後に、見出しCSSリセットのときに使用した全部まとめて指定できるコードにマージン指定を追加してやってみた。もっといいのあるかもしれないが一応できた。margin-bottom: 00px;の数値を変えれば好きなスペースが指定できます。一応追加したコードのせます。追記あとからBox6だけもう少しスペースが欲しかったので別にして指定。

見出しに指定したのはこちら

.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
margin-bottom: 16px;
}

BOXに指定したのはこちら

.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8,
.box9
{
margin-bottom: 16px;
}

スキン変遷というか試してみたもの
  • season まとまってて好きだけど縦長カードの設置ができない。
  • みるらいと 同じく好きだが縦長カードの設置ができない。
  • SILK 好きなんだがもとが凝っているせいでちょっとのカスタムで躓く。カスタムしないで使える人向きかも。ブログカードで困った
  • 凸凹 面白いのでちょっと使いたい気も。白タイプほしいな
  • モノクロ 黒が強すぎ感TOP画像の位置とか変になる。多分なしで使うやつ
  • ミックスグリーン シンプルでいいんだけど、カードのデフォルトの色が気になった
  • イノセンス スッキリで好きだが画像上のカテゴリーの表示がなくなる。
  • 白ウサギ 意外と行ける気がしてるが、甘くない色合いほしい
  • カラフライン こちらとSILKで色々リセットしつつカスタム頑張った。にぎやかな見た目も、凝っているアニメもすごい。カスタム無しで十分使える。細かく色変えできれば
  • 旅カメラ 画像の浮きでかたが好きというか、自分のアイキャッチをポラ写真ぽくしたので相性がいい。サイドの見出しのクリップの位置とかも直したいけど、できそうな気はするが…。プロフィールもなんとかしたいが、いまのとことわからない。

スキンのカスタマイズするならもともとのスキンはそのままでも使えて、見出しやサイドバーと目次などはもとがシンプルで特殊指定がないものがいいと思う。ブログカードのサイズ変更や色変えできて横に並べられるとかできると嬉しい。ただカラムでそれっぽくはできる、ただブログカードのCSSは調整はしたほうがいい。プロフィールは特殊な模様や背景なしか消したりつけたりできればいいと思う。そしてスキン変えてもタイトル画像が変な位置にならないといいな。地味に困ったグローバルナビのリンクが見やすくできるってのもあるといい。

細かいカスタマイズの参考にしたサイト

WordPressのテーマCocoonのカスタマイズいろいろ。もう一つ無料テーマのLuxeritasがもやってみたけど、デザインの改良が悩ましい。軽いのは良い(理解力と腕の問題)

無料テーマでは下のLuxeritasとCocoonが使いやすいとは思う

WordPress無料テーマ

コメント

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