grayishスキン適用中

ふわっと柔らかなシンプルスキン「みるらいと」を追加。細部まで作り込まれています。

スキン
この記事は約3分で読めます。

みるめもを運営されているみるみさんが作成されたスキンをCocoonに同梱させていただきました。

【Cocoonのスキンを作りました】"みるめも" を "らいと"に表現する「みるらいと」
Cocoonで使える専用スキン「みるらいと」を作りました。このブログ(みるめも)をライトに表現するスキンで、Cocoonの便利さや汎用的なデザインは残しつつ、ふわっと居心地いいテイストにしてみました。...

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

みるらいと

みるらいとは、全体的に柔らかな印象のスキンです。

みるらいと

サイトに統一感が出るように、細部まで徹底的にスタイリングされています。

レイアウト

主なレイアウトを紹介します。

見出し

見出し部分はこんな感じ。

みるらいとの見出し

温かみのある背景色にシンプルな見出しとなっています。

シェアボタン

シェアボタンも全てのボタンに対して細かく色調整されて丸みを帯びたデザインになっています。

みるらいとのシェアボタン

カテゴリー・タグリンク

カテゴリーやタグリンクも細かく調整されています。

2020-08-09_14h08_11

ブログカード

ブログカードは、フッター情報を非表示にして、あえて情報量を少なくし、カード内容を目立たせているような感じ。

みるらいとのブログカード

引用

引用はこんな感じ。

みるらいとの引用部分

文字装飾

こういった文字装飾部分まで、スキンに合わせて細かく調整が入っています。

みるらいとの文字装飾

ボックス装飾

こういったボックス型の装飾に対しても、細かくスタイリングし直されています。

2020-08-09_12h52_33

こういった白抜きボックスも。

みるらいとのブランクボックス

こういったタブボックスも、

みるらいとのタブボックス

付箋ボックスほとんど全てに対して再設定されています。

みるらいとの付箋ボックス

ボタン

ボタンも細かく色調整やシルエット調整されています。

みるらいとのボタン

吹き出し

吹き出しのより丸みを帯びたデザインになっています。

みるらいとの吹き出し

そして、検索ボックスまで細かく調整されています。

みるらいとの検索ボックス

商品リンク

そして、Amazon・楽天商品リンクまで、スキンの雰囲気に合ったものになっています。

みるらいとの商品リンク

ボタン色もかなり柔らかいものに。

プロフィールボックス

プロフィールボックスはこんな感じ。

みるらいとのプロフィールボックス

フォローボタンが丸くなって、可愛いです。

グローバルメニュー

グローバルメニューは、こんな感じ。サブメニューのラッパーは少し影を付けたものに。

みるらいとのグローバルメニュー

エントリーカード

エントリーカードはこんな感じでシンプル。

みるらいとのエントリーカード

CTAボックス

CTAボックスも落ち着いた色みに。

みるらいとのCTAボックス

コメント部分

コメントの入力フォーム・返信ボタンに至るまで、細かく調整が入っています。

みるらいとスキンのコメント部分

今回紹介したもの以外にも、とにかく細部までみるみさんのこだわりが詰まっている感じがしました。

細部まで手を入れるということは、それだけコードを書いたり動作確認をする必要があるわけで、作成はかなり大変だったのではないかと推測できます。

これら細部へのこだわりには感服いたしました。

設定方法

今回紹介したスキンは、Cocoon親テーマに同梱されています。

利用するには、Cocoon設定の「スキン」タブからスキンを適用して保存してみてください。

みるらいとの設定方法

スキンの詳細については、以下のページをご確認ください。

【Cocoonのスキンを作りました】"みるめも" を "らいと"に表現する「みるらいと」
Cocoonで使える専用スキン「みるらいと」を作りました。このブログ(みるめも)をライトに表現するスキンで、Cocoonの便利さや汎用的なデザインは残しつつ、ふわっと居心地いいテイストにしてみました。...

デモサイトはこちら。

みるめも
呆れるほど話題に統一感のない雑記ブログ。

コメント テーマの質問はフォーラムへ

  1. 猫ちゃん より:

    素敵なスキンですね

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