cocoonのスキン「Momoon」を作りました

momoon

デザインっていうのは人それぞれ趣向が違うと思うけど、ぼく色でスキンを作ってみました。

個人的に空白とか隙間とか、デフォルトだと気になるところがあったので。

というか、デフォルトスキンはあえてデザインしやすいようにシンプルになっているんだと思います。

今回作ったスキン名は「Momoon」。

このブログのアイコンに使っているネズミ(Mouse)とcocoonをもじってます(笑

Momoonの特徴

主なところで画像や見出しに影を付けて強調しています。

その他は行間やブロックとブロックの隙間の調整など。

シンプルなデフォルトのデザインを可能な限り活かすことを意識しました。

管理画面の「cocoon設定」からの設定も、ほぼ全て反映されるようになっている、、、はずです。

正確には色が変わるところをあえて変わらないようにしたところもありますが。

まぁ、Momoonを使ったからといって、全然色が変わらない~なんてことはないかと。

デモサイトは特に用意していませんが、しいて言えばこのブログです。

このブログはcocoonのデフォルトから、メインカラーを変えたくらいの変更しかしていません。

設定ではね。

ダウンロード

以下からダウンロードしてください。

スキンの反映のさせ方

やり方はいろいろありますが、現状ではデフォルトのスタイルから上書きするようにデザインしているので、一番最後にCSSを読み込むようにしてくれればOKです。

上のダウンロードボタンを押すと、momoon.zipという圧縮ファイルがダウンロードできるので、それをまず解凍してください。

解凍するとmomoon.cssというファイルが出てきます。

それを開き、中身をコピーして、

  • 子テーマのstyle.cssに追加記述
  • カスタマイザーの追加CSSに記述

などするのが簡単かなと思います。

色の変え方

このブログでは背景色を白に。

サイトキーカラーを水色っぽい色に。

サイトキーテキストカラーを黒に設定しています。

やり方はお馴染みの管理画面から「cocoon設定」→「全体」 から。

公式のマニュアルを確認するのが間違いないと思います。

ライセンス

MITライセンスでお願いします。

cocoonテーマに同梱になるとGPLライセンスが必要ですが、同梱されてはいないのでMITライセンスで。

※GPLライセンスに変更しました。

cocoonテーマへの同梱も許可いただけたので分かりやすいように。

注意事項

cocoonは高機能で実に様々な機能があります。

ぼく自身全ての機能を試せているわけではないので、もしかしたら設定や特定の機能についてデザインが崩れる可能性もあります。

そういった場合はぜひご一報いただけるととても幸せです。

修正してバージョンアップする予定です。

コメント

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