みるめも

【Cocoonのスキンを作りました】"みるめも" を "らいと"に表現する「みるらいと」

【Cocoonのスキンを作りました】"みるめも" を "らいと"に表現する「みるらいと」
みるみ
\ Follow Me! /
みるみ

雑記ブロガー。文章を書くのが大好き。ちょびっとライターの仕事もしています。

Cocoonを使ったサイトカスタマイズが得意です(このブログもCocoon)

Cocoon用のスキンを作りました。

cocoon-skin-mil_light-main-image

Cocoonの汎用的なデザインや機能性をちゃんとベースに残しながら、このブログ「みるめも」のふわっとしたシンプルなテイストを足し合わせてみました。

落ち着いた雰囲気で文章を書いていきたい方にはきっと気に入っていただけるはず!
「全体的にかなりシンプル&配色のトーンも静かめ」なのでどんなジャンルでも使いやすいと思います。

デモサイトも用意しましたのでぜひご覧ください~
 「みるらいと」デモサイト

ダウンロード

ダウンロードは  のボタンからどうぞ。

Download

親テーマ(子テーマでも可)のディレクトリにある「skins」フォルダに解凍した「mil-light」フォルダをアップロードするだけでCocoon設定から選択できるようになります。

cocoon-skin-chioces

親テーマのskinフォルダか子テーマのskinフォルダに入れたかによって、下にある「表示スキン」を適切に選択する必要があります。ご注意ください。

追記

2020/8/27:スキンにはCocoon設定を制御することができる仕組みがあるのですが(option.csvというファイル)、それをご自身でカスタマイズした場合は子テーマのskinsフォルダに入れておかないとCocoonアップデートでカスタマイズが消滅するのでご注意ください。普段と同じです。

スキンを使ってくれている方からカスタマイズ相談を受けて気付いたので追記しました。

カラーバリエーションは1色のみです。

複数色展開も考えましたが、自分のセンスのなさを考慮すると他の色では同じ雰囲気を維持できないと思ったのでやめました…。笑

明らかなスタイル調整ミスなど不具合を見つけられた場合は、僕に直接連絡いただくかCocoonのフォーラムにお寄せいただく方が良いかもしれません。

作ってみて思ったこと

久しぶりにCocoonの設定を最初から最後まで全部確認して~~ってやってたので改めて機能の多さに驚きました。

しばらく見ない間に「昔苦労して自分で作った機能が今はもう標準で実装されてるん!?」とか発見もあって楽しかったです。笑

みるみ
みるみ

相変わらず本当にすごいテーマだ…。

CSSに手を加える箇所はかなり少なめにしたつもりですが、それでも1000行くらいにはなっちゃっているし(コード削減はほぼ意識していないせいもある)、多機能な分デザインの管理はやっぱり大変だろうなと思いました。

1人のユーザーからすると大部分が不要なCSSになってしまうわけで、汎用的なテーマを提供するのって本当にすごい労力の上に成り立っていることなんだよなぁ、と改めて感じたわけです。

でも「スキン」という仕組みでそれらをうまく隠蔽化して、ユーザーが手軽にデザインを着せ替えられる仕組みを導入しているCocoonは素敵ですよね!こんなテーマは他に見たことがない。

今回僕が作った「みるらいと」も、よろしければぜひお使いください!

関連しそうな記事

この記事へのコメント

  1. cocoon用スキン使用中のもの より:

    いつもお世話になってます。
    アイキャッチがボヤいている状態を解除できないのですが、どのような設定をしたらよろしいでしょうか。

    • みるみ より:

      スキンを使っていただきありがとうございます…!

      それはおそらくスキンによる問題ではないですね。
      サイトのURLをご提示いただいたら解決案を示せるかもしれません。

      • cocoon用スキン使用中のもの より より:
        • みるみ より:

          この状態はCocoonの仕様です。インデックスカードのサムネイルは原寸画像ではなく320x180にリサイズされたものがWordPressに使われるようにバックで設定されています。
          同様の問い合わせがフォーラムにも多数あったため、新しい機能が追加されています。下記を参考に作業すれば解決するはずです。
          https://wp-cocoon.com/retina-thumbnail/

          すみません、あと1つ聞きたいんですけど…。
          なぜ僕のスキンを使っているわけではないのにこの記事へコメントされたんでしょうか?笑

          • 匿名 より:

            ありがとうございます。
            違うんですか!?すいません!

            「あなたはこちらを使用中です」
            のようなリンクをクリックするとこちらのサイトに繋がりました。
            ので、こちらのものを使っていると思ってしまいました。
            すいません。お手数おかけしました。