L
O
A
D
I
N
G
.
.
.

WordPressテーマ、Cocoonのスキン【Simpleシリーズ】を作りました

スポンサーリンク
ブログ運営

当ブログはWordPressの無料テーマ「Cocoon」を使っています。

無料のテーマでありながら、豊富な機能が最初から備わっており、カスタマイズもしやすく、非常に使い勝手が良いので愛用しています。

Cocoonに備わっている機能でも十分にカスタマイズすることはできるのですが、「より自分好みのデザインにしたい!」ということでスキンを自作しました!

せっかく作ったスキンですので、「細かい設定が面倒くさい!」という方の役に立つのではないかなと思い、カラーバリエーションを増やしてオリジナルスキンとして公開することにしました。

この「Simpleシリーズ」は、名前の通りシンプルでスタイリッシュなスタイルになっていると思います。

スポンサーリンク

Cocoon用スキン「Simpleシリーズ」は全5色

Cocoon用の「Simpleシリーズ」は全5色をお使いいただけます。

スキンを使うことでCocoonの見た目を簡単に変えることができます。

お好みの色を使っていただけると嬉しいです。

ご要望があれば、カラーバリエーションも増やしていきたいと思っています。

Simple Blue(シンプルブルー)

青空をイメージした爽やかなブルーのスキンです。

当ブログのメインカラーで最初に作ったのがこの「Simple Blue」のスキンです。

Simple Blueをダウンロード

Simple Green(シンプルグリーン)

清潔感や高級感をイメージしたグリーンのスキンです。

Simple Greenをダウンロード

Simple Navy(シンプルネイビー)

大人っぽさや落ち着きをイメージしたネイビーのスキンです。

Simple Navyのダウンロードはこちら

スポンサーリンク

Simple Pink(シンプルピンク)

可愛らしさやあどけなさをイメージしたピンクのスキンです。

Simple Pinkのダウンロードはこちら

Simple Red(シンプルレッド)

情熱や明るさをイメージしたレッドのスキンです。

Simple Redのダウンロードはこちら

スキンを一括ダウンロード

紹介したスキンをまとめてダウンロードしたい方はこちらからどうぞ。

いろんな色を試していただけると嬉しいです。

すべてのスキンをダウンロード

スキンの特徴

スキンの特徴についてはこちらの記事にまとめています。

「Simpleシリーズ」がCocoonの初期のスタイルとどのように違うかご確認いただけます。

スポンサーリンク

スキンの設定方法

「Simpleシリーズ」のスキンは、Cocoonの親テーマに同梱されています。

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

スキンのダウンロードの手順

Cocoonの親テーマに同梱されているのでダウンロードして利用するケースは少ないと思いますが、念のため説明しておきます。

ダウンロードしたZipファイルを解凍して、FTPソフトなどで「Cocoon」のテーマフォルダ内にある「skin」というフォルダ内にアップロードしてください。

wp-content/themes/cocoon-master/skins/ここにスキンをアップロード

アップロード後、「Cocoon設定」の「スキン」の中から「Simpleシリーズ」が選べるようになります。

FIleZillaというFTPソフトを使ってスキンを反映させる方法は、こちらの記事で紹介していますので、「やり方がわからないよー」という方は合わせてご覧ください。

最後に

もし「Simpleシリーズ」をお使いいただけましたら、コメント欄にご感想やご意見などいただけますと励みになります。

今後、より魅力的なスキンとして使っていただけるように、カスタマイズ方法などを紹介していきたいと思います。

また、Cocoonに「ナチュラル(Natural)シリーズ」を提供していますので、こちらもご活用いただければと思います。

【WordPress】オリジナルCocoonスキン「Natural(ナチュラル)」を自作しました! | Useful Web
当ブログはWordPressの無料テーマ「Cocoon」を使っています。無料のテーマでありながら豊富な機能が備わっており、カスタマイズもしやすく非常に使い勝手が良いため愛用しています。Cocoonに備わっている機能でも十分にカスタマイズすることはできるのですが、「より自分好みのデザインにしたい!」ということでスキンを自...

コメント

  1. おもち より:

    はじめまして。
    Cocoonのスキンページのリンク経由でこちらにやってきました。
    素晴らしいスキンを作ってくださりありがとうございます。

    Simple Greenを使わせていただこうとCocoon上でスキン選択をしたのですが、
    本文H3見出しのバックグラウンドカラーが
    こちらのサイトのSimple GreenのH3カラーと異なっているようです。
    併せてどちらともH3の文字色が白になっていてサンプル画像の黒とは異なっているようです。

    なんでCocoonで選択すると色が違うんだろう…と悩み続けて、こちらのサイトからファイルをダウンロードし、CSSファイルを開いて気が付きました(^_^;)

    どちらが正しい(?)のかわかりませんが、ご報告までm(_ _)m

  2. ベーやん より:

    おもちさん、コメントありがとうございます。

    H3のテキストカラー、バックグランドカラーはご指摘の通り、当サイトとCocoonの管理画面から選択したものは異なっております。
    オリジナル版(当サイトで表示のもの)をCocoonに提供したところ、Cocoon側で多少修正が加えられたものがCocoonの管理画面で選択できるようになっています。

    ですので、どちらも「正しい」というのが正解な気がします。

    当サイトと同じH3のデザインにするのであれば、ファイルをダウンロードしてご利用いただくか、CSSを追加することで対応いただくのが良いのかと思います。

    ご指摘いただきありがとうございました。

  3. おもち より:

    べーやん様

    返信を頂いたのにお礼が遅くなり申し訳ありません。

    >Cocoon側で多少修正が加えられたものがCocoonの管理画面で選択できるようになっています。

    このようなご事情があったとは知らず失礼いたしました。
    私はべーやん様のオリジナル配色の方が好きなのでそちらを使わせていただこうと思います。

    素晴らしいスキンを提供していただきありがとうございます!
    失礼いたします。

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