Cocoonスキンを作成しました。

スポンサーリンク
WordPressテーマを決める

Cocoonとは

CocoonはSimplicityの作者であるわいひらさんがSimplicityの後継テーマとして作成されてWordPress無料テーマで、「このクオリティが無料なら有料テーマ売れなくなる」という声が出るほど超高性能テーマです。

 

Cocoon公式サイト

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。

 

Cocoonスキン機能

CocoonにはスキンというCocoonだけの機能が搭載されていて、スキンを選ぶだけでテーマを変えずにデザインをいつでも簡単に変更できる「着せ替え」機能です。

 

・スキン製作者としてCocoonの開発の一部を担うことができる

という魅力に惹かれてCocoonスキンを作成したところ、Cocoonに同梱してもらえました!

 

CocoonはSimplicity同様にカスタマイズしやすいシンプルなデザインがベースとなっています。ですから、そのまま使うとちょっと物足りないデザインになってしまいます。(まぁ標準でも十分といえば十分なんですが)

 

スキンを使用することでWordPress初心者でもCocoonをカスタマイズせずにデザインがワンクリックで変えられます。

 

がんちゃん作スキン「いつもの」

今回作ったスキンは1種類3色展開です。背景付きスキンを入れると全部で6色展開になります。

 

Cocoonスキン「いつもの」デモサイト

いつもの

 

デモサイトのスキン切り替え

デモサイトをPCで見ると右側にスキン切り替えボタンがあります。好きなスキンを選んでもらうとそのスキンデザインのデモを見ることができます。

スキン切り替え

 

このスキンは背景画像を入れる前提で作っているのでぜひ背景を自分の好みで追加して使用してもらえるとうれしいです。

 

特にスマホで見ると、記事本文箇所はどんなWordPressテーマでもあまり見栄えが変わらないのでわざと余白を作って、パーツの合間には背景画像がちらっと出てくるようにしています。

読者の方がサイトを見てちょっと気持ちがほっこりしてもらえるといいなぁと思って作りました。

 

スマホで見た場合

 

背景画像の設定方法

Cocoonで背景画像を指定する
Cocoonで背景画像を指定する場合は、他のテーマ同様にカスタマイズから行います。(Cocoon設定からも出来ますが細かい設定が出来ません)使用背景画像熱帯魚サンプルサイトの背景画像元データローズサンプルサイトの背景画像元データ背景素材を準

 

がんちゃん作スキン「おでかけ」

第2作目Cocoonスキンは女性でも使いやすいファッション系デザイン「おでかけ」

cocoonスキン おでかけ

 

デモサイト

おでかけ

 

カラー展開はピンク・ブルー・レモンの3色。

 

今後のCocoonスキン作成

わいひらさんは、僕にとって憧れの人です。

ですからこうして少しだけでも携われたことがうれしくてたまりません。

 

まだまだ力不足で改善点がいっぱいありますのでスキン作りは、もっともっと行なっていく予定です。

 

みなさんからスキンのリクエストやご意見、改善点のご指摘もぜひいただけるとうれしいです。

 

この記事を書いた人
ganchan69
Wordpress de アフィリエイト運営者。ネットショップ運営・ウェブ制作との兼業アフィリエーターです。
ganchan69をフォローする
WordPressテーマを決める
スポンサーリンク
ganchan69をフォローする
WordPress DE アフィリエイト

コメント