シンプルなWordPressテーマ

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように
便利な機能を織り込んで作りました。
100%GPLテーマなので自由にご利用いただけます。

ダウンロードページはこちら。

ダウンロード

Cocoonスキンの機能の仕様

開発者向け

WordPressテーマ自体、ブログシステムの外観を変更するものではあります。

ただ、Cocoonでは、ウィジェットやテーマ設定を変更せず、外観のみ変更出来るように、スキン機能というものがあります。

そもそもテーマ自体、カスタマイズを行えば自由に外観を変更することは可能ではあります。

けれど、慣れていない人は、CSSで変更するのも、ハードルが高いです。

そういったライトユーザー向けに、洋服を着替える感覚でサイトの外観を変更するために、スキン機能を実装しました。

スポンサーリンク

スキンの設定方法

スキンの設定をするには、テーマ設定を開きます。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

あとは「スキン」タブにある「スキン一覧」からスキンを選択すれば手軽に外観を変更できます。

スキン一覧から好みのスキンを選択

スキンとテーマ(子テーマ)の違い

スキン機能は、主にライトユーザー向けの外観変更機能です。

主な違いは以下です。

スキン機能

  • Cocoon設定の「スキン」タブから変更する(各設定を再設定せずに外観を手軽に変更可能)
  • Cocoonをインストールするだけで使用可能
  • スタイルシートで見た目を変更する
  • JavaScriptも利用可能
  • 主にスタイルシート(CSS)メインのカスタマイズなので比較的簡単
  • 主に外観のみの変更向け(動的処理もJavaScriptを利用すれば可能)

テーマ(子テーマ)

  • 「外観→テーマ」から変更する
  • 親テーマをインストールし、子テーマでカスタマイズ推奨
  • テンプレートを直接カスタマイズしてHTML構造を変更できる
  • テンプレートをカスタマイズするときはPHPの知識が必要な時もある
  • PHPをいじれるので当然やれることが豊富、動作変更も可能

スキン機能のフォルダ構造

スキン機能に関するファイルは、親テーマ(子テーマ)フォルダ内の「skins」フォルダに格納されています。

「skins」フォルダのファイルの構造は以下のようになっています。

  • skins(スキン用のフォルダ)
    • skin-name(スキンフォルダ名:「半角英数字-_」からなる名前なら何でも良い)
      • images(イメージ用フォルダ:任意)
      • style.css(全体のスタイル設定用、AMPでも使用される:必須
      • amp.css(AMP専用のスタイル設定用:任意)
      • javascript.js(JSコードを書く:任意)
    • other-skin1
    • other-skin2
    • …(フォルダ名が違えば何個でも追加可能)
完全レスポンシブデザインになったので、前作Simplicityスキン構造よりかなりシンプルになりました。

スキンを追加する方法

新たにスキンを追加する方法は、次の2手順です。

  1. skinsフォルダ内のskin-templateフォルダを複製して新たなフォルダ名をつける
  2. 新たなフォルダの中のstyle.cssファイルを開いてスキン名を変更

これだけでOKです。

style.cssの先頭部分は以下のようになっているのでスキン情報を変更できます。

/*
  Skin Name: スキンテンプレート
  Description: スキンのひな形
  Skin URI: https://wp-cocoon.com/
  Author: わいひら
  Author URI: https://nelog.jp/
  Version: 0.0.1
  Priority: 10
*/

ここで入力したスキン情報は、テーマに同梱された際には以下のように、クレジット表示されます。

スキン一覧のクレジット表示

スキンテンプレートのダウンロード

スキンテンプレートは、以下からもダウンロードできます。

“スキンテンプレート” をダウンロード skin-template-1.0.2.zip – 389 回のダウンロード – 2 KB

スタイルの優先度

スキン機能のスタイルが呼び出される順番は以下のようになっています。

  1. Cocoon(親テーマ)のstyle.css
  2. Cocoon(親テーマ)スキンのstyle.css
  3. テーマカスタマイザーで変更したスタイル
  4. 子テーマのstyle.css
  5. 子テーマスキンのstyle.css

スタイルシートは、同じCSSセレクタなら後から呼び出されたものが優先されます。

ですので、「親テーマのstyle.css」が最も優先度が低く、「子テーマスキンのstyle.css」が最も優先度が高くなります。

上記以外に、「margin: 0 !important;」のように!important宣言を行えば、それが最も優先されます。

スクリプトの優先度

スキン機能のJavaScriptファイルが呼び出される順番は以下のようになっています。

  1. Cocoon(親テーマ)のjavascript.js
  2. Cocoon(親テーマ)スキンのjavascript.js
  3. 子テーマのjavascript.js
  4. 子テーマスキンのjavascript.js

スキンのjavascript.jsを利用するかどうかは任意です。

スキン内で、JavaScript(jQuery)を利用して、動的動作を行いたい場合にご利用ください。

JavaScriptが不要な場合は、スキンフォルダ内のjavascript.jsファイルを削除してもOKです。スキンフォルダ内にjavascript.jsが存在しないときは、読み込まれないのでレンダリングブロックにより読み込みが遅くなることもありません。

スキン側からテーマ設定の制御

「このスキンは、この設定で使って欲しい」「設定ごとにCSSを書くのは大変」という場合は、スキン側から「Cocoon設定」の設定値を制御することが可能です。

制御方法のまとめはこちら。

スキン制御の仕様。スキン側から「Cocoon設定値」を変更する方法3通り。
スキン側から「Cocoon設定」のオプション値を変更する手段の紹介です。スキン側から設定を変更できることで開発の手間を削減することができます。

スキン内のfunctions.phpで制御する方法はこちら。

スキン内のfunctions.phpファイルでCocoon設定値を制御する方法
Cocoon設定の設定値をfunctions.phpファイルからPHPコードを入力することで制御する方法です。

スキン内のCSVファイルで制御する方法はこちら。

スキン内のCSVファイルでCocoon設定値を制御する方法
Cocoon設定の設定値をoption.csvファイルからCSV形式のテキストを入力することで制御する方法です。

スキン内のJSONファイルで制御する方法はこちら。

スキン内のJSONファイルでCocoon設定値を制御する方法
Cocoon設定の設定値をoption.jsonファイルからJSON形式のテキストを入力することで制御する方法です。

スキン機能の使い道

スキン機能の主な目的は、ライトユーザー向けの手軽な外観変更機能です。

新たなスキン作成は容易なので、「これから子テーマでカスタマイズする前の実験的スタイル変更」などにも便利です。

まずは、スキン機能で実験的にあらかたCSSの設定を行って、そのCSSコードを子テーマにコピペして実装するなんて使い方もできます。

また、「デザインの違いによる広告収益の違いテスト」、「マルチサイトのデザインを1つの子テーマで管理」みたいなことも簡単にできるようになります。

その他にも、他の人が作ったスキンでもskinsフォルダにアップロードするだけで利用できるようになります(当然親テーマはCocoonである必要がある)。

スキン機能は、テーマと似たようなものかもしれません。けれど使い方次第で「テーマ外観」の管理がより楽になります。

まとめ

利用されている方は、お気づきかと思いますが、Cocoonでは、できる限り簡素な装飾になっています。

これには2つの理由があります。

1つは、テーマ自体に過度にCSSで装飾してしまうと、元のCSSを打ち消すのが大変になり、カスタマイズしにくいテーマになるからです。

この、カスタマイズしやすいように簡素にしているのが一点。

もう1つの理由は、リッチな装飾は、スキン機能にゆだねたかったからです。

デフォルトでリッチな装飾になっていると、最初は目を引くのですが、どうしても飽きが来るのが早くなります。

そのために、「リッチな装飾はスキンで手軽に変更できるように」というのが、Cocoonのスキン機能の最大の目的です。

詳細はこちら。

Cocoonのデフォルトスタイルをシンプルにしている理由
Cocoonは、デフォルト状態ではシンプルにカスタマイズしやすいように。凝ったデザインは、スキンで手軽に変更という仕様にしたいと考えています。

もし、スキンを作成された場合は、フォーラムもしくはメールでご連絡ください。

当サイトで紹介させていただければと思います。

スキンを作成した際にはぜひ当サイトで紹介させてください
スキンを作成したならば、是非当サイトで紹介させていただければと思います。また、親テーマに同梱させていただければ幸いです。

おすすめのスキンカスタマイズポイントはこちら。

Cocoonスキンでカスタマイズすると映えるポイントまとめ
Cocoonのスキン機能でカスタマイズするなら、ココを変更すると効果的という部分をまとめてみました。これらをカスタマイズすることにより、Cocoonっぽさをかなり減らすことができるかと思います。
開発者向けスキン
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
〇アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon

コメント

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