Cocoon用のスキンを作りました。
Cocoonの汎用的なデザインや機能性をちゃんとベースに残しながら、このブログ「みるめも」のふわっとしたシンプルなテイストを足し合わせてみました。
落ち着いた雰囲気で文章を書いていきたい方にはきっと気に入っていただけるはず！
「全体的にかなりシンプル＆配色のトーンも静かめ」なのでどんなジャンルでも使いやすいと思います。
ダウンロード
ダウンロードは のボタンからどうぞ。
親テーマ（子テーマでも可）のディレクトリにある「skins」フォルダに解凍した「mil-light」フォルダをアップロードするだけでCocoon設定から選択できるようになります。
親テーマのskinフォルダか子テーマのskinフォルダに入れたかによって、下にある「表示スキン」を適切に選択する必要があります。ご注意ください。
また、Cocoon本体にも同梱していただきましたので、わざわざこのページからダウンロードする必要はございません！
🎉作成したCocoon用スキン「みるらいと」をCocoonテーマ本体に同梱していただきました！
— みるみ (@milmemo_net) August 13, 2020
今Cocoonをお使いの方もバージョンアップすれば設定画面から簡単にスキンを適用することができます。
ぜひ一度ご覧になってみてくださいね～！ https://t.co/HEFofzILNv
普通にCocoonをインストールしたら選択できるようになってますよ。
追記 (2020/8/27) ：スキンにはCocoon設定を制御することができる仕組みがあるのですが（option.csvというファイル）、それをご自身でカスタマイズした場合は子テーマのskinsフォルダに入れておかないとCocoonアップデートでカスタマイズが消滅するのでご注意ください。普段と同じです。
スキンを使ってくれている方からカスタマイズ相談を受けて気付いたので追記しました。
カラーバリエーションは１色のみです。
複数色展開も考えましたが、自分のセンスのなさを考慮すると他の色では同じ雰囲気を維持できないと思ったのでやめました…。笑
明らかなスタイル調整ミスなど不具合を見つけられた場合は、僕に直接連絡いただくかCocoonのフォーラムにお寄せいただく方が良いかもしれません。
作ってみて思ったこと
久しぶりにCocoonの設定を最初から最後まで全部確認して～～ってやってたので改めて機能の多さに驚きました。
しばらく見ない間に「昔苦労して自分で作った機能が今はもう標準で実装されてるん！？」とか発見もあって楽しかったです。笑
相変わらず本当にすごいテーマだ…。
CSSに手を加える箇所はかなり少なめにしたつもりですが、それでも1000行くらいにはなっちゃっているし（コード削減はほぼ意識していないせいもある）、多機能な分デザインの管理はやっぱり大変だろうなと思いました。
1人のユーザーからすると大部分が不要なCSSになってしまうわけで、汎用的なテーマを提供するのって本当にすごい労力の上に成り立っていることなんだよなぁ、と改めて感じたわけです。
でも「スキン」という仕組みでそれらをうまく隠蔽化して、ユーザーが手軽にデザインを着せ替えられる仕組みを導入しているCocoonは素敵ですよね！こんなテーマは他に見たことがない。
今回僕が作った「みるらいと」も、よろしければぜひお使いください！
この記事へのコメント
いつもお世話になってます。
アイキャッチがボヤいている状態を解除できないのですが、どのような設定をしたらよろしいでしょうか。
スキンを使っていただきありがとうございます…！
それはおそらくスキンによる問題ではないですね。
サイトのURLをご提示いただいたら解決案を示せるかもしれません。
https://yukinojyouhouhbako.com
こちらです。
この状態はCocoonの仕様です。インデックスカードのサムネイルは原寸画像ではなく320x180にリサイズされたものがWordPressに使われるようにバックで設定されています。
同様の問い合わせがフォーラムにも多数あったため、新しい機能が追加されています。下記を参考に作業すれば解決するはずです。
https://wp-cocoon.com/retina-thumbnail/
すみません、あと１つ聞きたいんですけど…。
なぜ僕のスキンを使っているわけではないのにこの記事へコメントされたんでしょうか？笑
ありがとうございます。
違うんですか！？すいません！
「あなたはこちらを使用中です」
のようなリンクをクリックするとこちらのサイトに繋がりました。
ので、こちらのものを使っていると思ってしまいました。
すいません。お手数おかけしました。
みるみさん、こんにちは。
「みるらいと」のファンです。大変ありがたく使わせていただいてます。
みるみさんの文章も好きです。
で、図々しいお願いで恐縮なのですが…
みるみさんのメインページで使われている最新版のスキンですが…
ダウンロードできるように、しては頂けないでしょうか？
みるみさんのサイトデザインも時々に進化しているようで
「みるらいと ver1.05」など、バージョニングしてデザインの変遷を
楽しめたら嬉しいと思うのです。
よろしくお願いします。
こんにちは。スキン使っていただいているんですね！ありがとうございます～～
実はですね、僕のブログそのものはスキンは全く使っていないのです。
カスタマイズしている範囲があまりにも広すぎてもう Cocoon の原型がないくらいなので、これをスキン化するのはもう不可能なレベルです（実際スキンが変えられるのは主に CSS だけなので…）。
そういう理由もあって「みるめもをライトに再現するスキン」というアイデアで みるらいと をつくりました。あくまでも Cocoon の体裁のまま雰囲気だけそれっぽく変える、という感じです。
サイトデザインの進化にも気づいてもらえたのはとても嬉しいです。
これからもよろしくお願いします～
そうなんですね。
「みるめもをライトに再現するスキン」→「みるらいと」の真意を
ようやく理解しました。
素敵なスキンを、ありがとうございます。
追伸：
「みるめも」の公開は無理ですよね？
「公開」というのはカスタマイズしたソースコード類一式をということですか？
別にカスタマイズ内容を隠したい意図は一切ないですが、ボタン１つで簡単に適用できるような状態にはなっていないので結局プログラムがわからない方には扱えないと思います。
個人的にはそういう興味から少しずつ CSS など触れていくとスキル習得の道として面白いとはおもいますよ。
ありがとうございます。
一般公開するには、利用者の敷居が高いということですね。
私個人としては、BSD SQL Perl PHP などを使います。差し支えなければ、メールアドレスにZIPなどで送っていただけたら嬉しいです。GPLの精神に則り、適正に利用させていただきます。
サイトを読み歩くのが趣味でして、みるみさんのサイトのファンになりました。「文章好き」から始まって、「サイトデザイン」や「サイトの機能性」など・・サイト全体の構成力がすごいです。よくここまでと感心しきりで、できればソースも拝見したいです。って無理なお願いですよね。（笑）
失礼しました。とにかく、熱烈なファンも居るということです。
あれま、同業者の方でしたか。
それなら全然いいか… と思ったのですが、管理しているカスタマイズしたもの一式の中には特定の AB テスト用コードやらお金にかかわるメモやらやっぱり色々入っていて、さすがにこのあたりは公開するべきではないと考えました。
大変申し訳ないのですけど、この公開していいところとそうでないところの選別を行うのが非常に手間なので今回はちょっとなしにさせていただけませんか。
お気持ちだけしっかりと頂戴しておきます！
コードを読むのも好きでして、みるみさんのコードなら、さぞ美しいだろうと。いや失礼しました。(^-^;
そういえば、前々から私の環境で気になっていた不具合のご報告です。
#
#「みるらいと」の Cocoon 編集画面で「見出し H4 の装飾」が（見え）ないのです。
#
私の環境でだけなら問題ないです。ご確認をお願いします。
＞「みるらいと」の Cocoon 編集画面で「見出し H4 の装飾」が（見え）ないのです。
この情報だけだとなんとも言えませんが、少なくとも僕のクリーンなみるらいと環境（デモサイト）では問題はないです。症状的にも特定の環境に起因しているもののように見えます。
あともしブロックエディタをお使いの場合は話が変わります。僕が一切使っていないから…。
確認ありがとうございます。理解しました。
私の「みるらいと」はデフォルトのまま
今や、ゴリゴリの「Gutenberg」使いです。
なるほど、やはりそうでしたか。
だとしても h4 だけというのは不自然なので、何か意図しない CSS があたっているのではないでしょうか。
デベロッパーツールで調べてみたことはありますか？
まあ、この記事のコメント欄からは少し逸脱した範囲の話ではありますが。
「F12」しましたところ…
.article h4 {
/* border-top: 2px solid #ddd !important; */
/* border-bottom: 2px solid #ddd !important; */
}
打ち消し線なってますので。えっと、これの犯人を探せばいいわけですね。
とりあえず「外観」→「テーマファイルエディタ」で「!important」したら
見えるようになりました。個人的には、これでいいかなと(^^;)
見出しH４
.article h4::before {
content: "";
position: absolute;
background: #f4ede8;
width: 30px;
height: 30px;
border-radius: 50%;
top: 47.5%;
left: 0px;
transform: translateY(-50%);
z-index: -1;
}
「F12」の、このへんは、この様になってます。
○は見えません。
ついでにすみません
もう一つ。気がついたところでは
#
#「Gutenberg の編集画面では、白抜きボックスが左にずれる」
#
というのもあります。
私の環境の「Gutenberg」では
・・というようなことがあったりします。が
お陰様で、「みるらいと」を気に入って利用させて頂いてます。
ありがとうございます。
色々報告ありがとうございます。とりあえず応急処置できたようなのでよかったです。
他の内容については、たらい回しにするつもりはないのですが Cocoon のフォーラムへ投稿してもらえると自分だけの問題なのか共通の問題なのか、など、知見が集まります。よければご検討ください。
そうですね。
Cocoon に於ける「Gutenberg」の編集画面での挙動は、全体的にデバッグして報告する必要がありそうです。
Cocoonフォーラムは、私には聖地でして、ここを読みながら勉強の最中です。もう少し使い込んでから、ご報告させていただくことにします。ありがとうございました。