CocoonのスキンMomoonをカスタマイズして新しいスキンを作る

CocoonのデザインスキンMomoonをカスタマイズしてみます。

Momoon(アクア)


 

はじめに

スキンのカスタマイズを行う為に必要な手順についてです。

 

必要なもの

FTPツール

 

手順

手順
  • STEP1
    スキン選択
    使うスキンを決める
  • STEP2
    ダウンロード
    対象のスキンフォルダをダウンロード
    標準搭載のスキンなら親テーマのskinフォルダにあります。
    配布されている非公認スキンの場合は、そのサイトからダウンロード
  • STEP3
    コピー
    CSSやcsvファイルをフォルダをコピーし任意の名前を付ける
  • STEP4
    カスタマイズ
    CSSやcsvファイルをカスタマイズ
  • STEP5
    アップロード
    スキンフォルダを子テーマのskinフォルダにアップロード
  1. 元のスキンをコピーし、
  2. 別の名前のスキンとして作成し、
  3. 子テーマにアップロードする事で、

テーマのアップデート時にも上書きされずオリジナルスキンとして使えます。

 

 

注意点

スキンによってはPHPJSONCSVファイルで定義されているものがあり、それらを編集する必要がある場合もあります。

 

スキン用ファイルダウンロード

FTPソフトやSFTPソフトを使ってサーバーのファイルをダウンロードします。

サーバーへのファイル転送は、セキュリティ的にFTPよりSFTPの方が安全です。

 

SFTPの使い方は以下をご覧ください。

 

FTPの使い方は以下を参考にして下さい。

 

ダウンロードファイル

skin-momoon-aquaフォルダ
場所:/wp-content/themes/cocoon-master/skins

 

FTP FFFTPの画面例

 

 

SFTP FileZillaの画面例

 

 

Momoon(アクア)のファイル構成

フォルダ:skin-momoon-aqua

<構成>

style.css

スタイルシートのCSSのみになっています。

 

 

今回は「Momoon(アクア)」での説明になりますが、スキン毎のファイル構成は以下にまとめています。

 

カスタム用フォルダを作成

ダウンロードしたフォルダの名称を変更するか、コピーして任意のフォルダ名を付けます。

 

元 skin-momoon-aqua

例 skin-momoon-darkgreen

 

カスタマイズ

スタイルシートの上部を編集する

上記で作成したカスタマイズ用のスキンフォルダ内のstyle.cssをエディタで開きます。

 

上部にスキン名・説明文・サンプル画像URLや、作者さんのお名前、URLなどが書かれた部分があります。

/*
 Name: Momoon(アクア)
 Description: 水色を基調とした「cocoon」用のデザインスキン
 Skin URI: https://rn.bex.jp/momoon/
 Author: タイジーWP
 Author URI: https://rn.bex.jp/
 Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-momoon-aqua.png
 Version: 1.0.2
  Priority: 9850001000
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Copyright 2019 タイジーWP
 mail:tt@tijaji.jp
 URL:https://tijaji.jp
   https://rn.bex.jp/
*/

 

すべて変更する必要はありませんが、スキン選択画面でややこしいので、最低「スキン名」は変更します。

 

 

  • Name:スキン名
  • Description:説明文
  • Skin URI:スキンデモなどのアドレス
  • Author:作者名
  • Author URI:作者のアドレス
  • Screenshot URI:スキンサンプル画像

変更例

/*
 Name: Momoon(グリーンカスタム)
 Description: Momoon(アクア)をカスタムしたデザインスキン
 Skin URI: https://rn.bex.jp/momoon/
 Author: 〇〇
 Author URI: https://XXXXXX/
 Screenshot URI: http://XXXXX/XXX.jpg

 

 

スキン名、作者などを変更するとスキン一覧に表示された際に反映されます。

 

 

上記の変更例では、サンプル画像も用意し自サーバーへアップロードした後、その画像アドレスを指定していますので、以下のようにサンプルショットも表示できます。

サンプルショットはスキンフォルダ内のimagesフォルダに入れてもOK。

 

メイン・サブカラーを変える

Momoonのオリジナルカラーは以下の5色です。

Momoon(グリーン)
Momoon(アクア)
Momoon(ピンク)
Momoon(オレンジ)
Momoon(パープル)
メインカラーとサブカラーを好きな色に変更します。

Momoon(アクア)カスタマイズサンプル

 

style.cssファイルをエディタで開きメインカラーとサブカラーを定義している部分のカラーコードを変更します。

※下の方にあります。

メインカラー部分:3か所
サブカラー部分:1か所

 

Momoon(アクア)の初期カラーは以下ですので、以下のカラーコードで検索し好きな色に置換するのが一番簡単です。

 

Before

コピーできます ↓
メインカラー#c6efff
サブカラー#edfaff

今回の例では以下のように変更しています。

After

コピーできます ↓
メインカラー#6e7955
サブカラー#543f32

 

記事タイトル(h1)デザインを変える

Before

Momoonの記事タイトルは「 」で囲うデザインです。

 

After

「 」を外して、1文字目をメインカラーの●で囲うカスタマイズをしてみます。

 

135行目あたりにある以下の部分を削除またはコメントアウト(/*~*/で囲う)します。

h1.entry-title:before,h1.archive-title:before{
 border-left:2px solid #333;
 border-top:2px solid #333;
 top: 0;
 left: 0;
}
h1.entry-title:after,h1.archive-title:after{
 border-right:2px solid #333;
 border-bottom:2px solid #333;
 bottom: 0;
 right: 0;
}

追加CSS

h1.entry-title::first-letter {
background-color: #6e7955; /*メインカラー*/border-radius:  50%;
padding:  10px;
font-size: 28px;
color: #fff; /*文字色*/margin-right: 5px;
}

 

 

見出し(h2~h5)

Before

Momoonの見出しデザインは特にカスタマイズされておらず、Cocoonの初期デザインになっています。

気になるのは見出し4だけ装飾が短い事・・?

 

 

After

デザインは好きなように変更できます。とりあえず見出し4は装飾を横幅いっぱいに変更。

 

 

追加CSS

/************************//* 見出しタグ *//************************/.entry-content h2{
padding: 10px;
margin: 5px 0;
background: #6e7955;
border-radius: 8px;
color:#fff;
font-size:22px;
}
.entry-content h3{
padding: 10px;
margin: 10px 0;
color: #000;
border: solid 1px #6e7955;
}
.entry-content h4{
padding: 12px;
margin: 5px;
color: #000;
background: #ebebeb;
border-left: solid 10px #6e7955;
width:100%;
}
.entry-content h5{
padding: 12px;
margin: 5px;
color: #6e7955;
border-bottom: dotted 1px #6e7955;
}

 

見出しのデザインは以下に少しまとめていますのでご参考までに。

 

好きなカラーに変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

ファイルをアップロード

カスタマイズした「style.css」をフォルダごとサーバーのCocoonテーマへアップロードします。

親テーマのスキンフォルダにアップロードしても反映されますが、親テーマのアップデート時に消えてしまうので子テーマに置きます。

 

場所:/wp-content/themes/cocoon-child-master/skins

 

 

以上で完了です。

 

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています