>> サイト内には広告が含まれます。プライバシーポリシーはこちら →
PR

Cocoonのオリジナルスキン「和の色」6色を作りました(Ver2.1.6~対応)

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

Cocoonの独自スキン「和の色」6色を作成しました。

2020年5月 薄いブルーを追加しました。

2020/05/25

・カテゴリー・タグウィジェットデザインを追加。
・Ver2.1.6~の新機能「フロントページ」のインデックスデザインも追加。


 

Cocoonスキン:和

このスキン用の部品

タブ切替メニュー

タブで切り替えて、カテゴリー別の最新記事などを表示できるデザイン部品も作成しています。

このスキン用の6色のデザインをコピペ出来ます。

Cocoonのスキン「和の色」用部品:タブ切替メニュー
Cocoonの独自スキン「和の色」6色バージョンに使えるタブ切替メニューのデザインです。 元のスキンは以下です。 カテゴリー・タグウィジェット部品もあります。 このスキン用の5色のデザインをコピペ出来ます。 タブ切替メニュー サンプル 初期...

 

基本カラー

Cocoonスキン和(紺) #233B6C #506185 #b8c2d9
#5d5855 #89817f #d9d9d9
Cocoonオリジナルスキン:和の色(紺)
この記事は、Cocoonの独自スキン「和の色」6色の紺バージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィジェットデザインを追加。 ・Ver2.1.6~の新機能「フロントページ」の...

Cocoonスキン和(橙) #D99502 #ba9441 #edd7a6
#5d5855 #89817f #d9d9d9
Cocoonオリジナルスキン:和の色(橙)
この記事は、Cocoonの独自スキン「和の色」6色の橙バージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィジェットデザインを追加。 ・Ver2.1.6~の新機能「フロントページ」の...

Cocoonスキン和(紫) #3B283A #594157 #c2b0c1
#5d5855 #89817f #d9d9d9
Cocoonオリジナルスキン:和の色(紫)
この記事は、Cocoonの独自スキン「和の色」6色の紫バージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィジェットデザインを追加。 ・Ver2.1.6~の新機能「フロントページ」の...

ピンク

Cocoonスキン和(ピンク) #b99d9a #d4bdba #ede5e4
#5d5855 #89817f #d9d9d9
Cocoonオリジナルスキン:和の色(ピンク)
この記事は、Cocoonの独自スキン「和の色」6色のピンクバージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィジェットデザインを追加。 ・Ver2.1.6~の新機能「フロントページ...

グリーン

Cocoonスキン和(抹茶) #616B07 #839b5c #c1c78d
#5d5855 #89817f #d9d9d9
Cocoonオリジナルスキン:和の色(抹茶)
この記事は、Cocoonの独自スキン「和の色」6色の抹茶バージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィジェットデザインを追加。 ・Ver2.1.6~の新機能「フロントページ」...

薄いブルー

Cocoonスキン和(薄いブルー) #91afb7 #b9cfd5 #e1f1f5
#5d5855 #89817f #d9d9d9
Cocoonオリジナルスキン:和の色(薄いブルー)
この記事は、Cocoonの独自スキン「和の色」6色の薄いブルーバージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィジェットデザインを追加。 ・Ver2.1.6~の新機能「フロントペ...

 

 

以下、サンプルはすべての画像です。

他の配色スキンは以下の画像で紺色の部分がそれぞれのキーカラーに変わります。

各色の詳細は上記カラーコード下のそれぞれの詳細ページでご確認下さい。

 

ヘッダーとグローバルナビ

和(紺)ヘッダー

 

フロントページインデックス

2020/05/25 Ver2.1.6~の機能です。

 

Cocoonオリジナルスキン:和(紺)

「もっと見る」ボタン ホバー時

 

Cocoonオリジナルスキン:和(紺)

 

エントリーカード

記事一覧でのカード表示

和(薄ピンク)エントリーカード

マウスが乗った時は背景色を変えてふわっと浮き上がります。

和(紺):エントリーカード

 

ブログカード

上記エントリーカードと動きと色は同じで枠線ありになります。

和(薄ピンク)ブログカード

オンマウス時

和(紺):ブログカード

 

ページネーション

和(紺):ページネーション

 

ホバー時

 

和(紺)ページネーション

 

サイドバー見出し(h3)

和(紺):サイドバー見出し

 

フッター見出し(h3)

和(紺):フッター見出し

 

記事内見出し(h2~h5)

和(紺):見出し

 

目次

和(紺):目次

 

SNSボタン

和(紺):SNSボタン

 

テーブル

和(紺):テーブル

 

コメント送信ボタン

和(紺):コメント送信ボタン

 

 

ダウンロード

CSSを記述したスタイルシートのみにしていますので軽量です。

 

すべて3kb程度のZIP形式圧縮ファイルです。それぞれを解答するとフォルダにCSS(style.css)が1つ入っています。

紺色

Cocoonスキン和(紺)

 

フォルダ:skin-wa-blue

 

Cocoonスキン和(橙)

フォルダ:skin-wa-orange

 

薄ピンク

Cocoonスキン和(ピンク)

フォルダ:skin-wa-pink

 

抹茶

Cocoonスキン和(抹茶)

フォルダ:skin-wa-green

 

Cocoonスキン和(紫)

フォルダ:skin-wa-purple

 

薄いブルー

Cocoonスキン和(薄いブルー)

フォルダ:skin-wa-lightblue

 

サーバーへのアップロードについて

ダウンロードしたファイルを解凍し、Cocoon子テーマのskinsフォルダフォルダごとアップロードしてご利用下さい。

 

アップロード場所
/wp-content/themes/cocoon-child-master/skins

 

サーバーへアップロードするには、FTPソフトやSFTPソフトを使います。

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

 

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

 

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

スキン導入時の選択画面サンプル

 

和(薄ピンク)スキン一覧から

 

子テーマのディレクトリに入れると、スキン名の前に[Child]と表示されます。

 

Cocoon標準搭載のスキンは以下をご覧ください。

Cocoon標準スキン全種・画面サンプル一覧とファイル構成
スキンの設定 Cocoonのデザインスキンは、標準で100種類以上用意されています。 たくさんのスキンの見た目を一気に見れるようにまとめました。 設定は「Cocoon設定」の「スキン」タブから選択。 各スキンで使われているカラーコードは以下...

 

 

その他のオリジナルスキン

その他にもオリジナルスキンを作っています。

黒×ビビッドカラー:5パターン

 

Cocoonのスキン「黒を基調にビビッドカラー5パターン」(Ver2.1.6~対応)
Cocoonの独自スキン「黒」を基調にしたバージョンを作成しました。 2020年3月29日 ブルーとグリーンの2色追加しました。 2020年5月11日 少しデザイン追加し、ダウンロードファイルは軽量化しました。 2020/05/25 ・カテ...

 

 

2020TOKYOオリンピック

 

Cocoonのスキン「2020 TOKYO」オリンピックエンブレムカラー
Cocoonの独自スキン「2020年東京オリンピック」バージョンを作成しました。 2020年東京オリンピックエンブレムの紺と赤を使ったスキンです。 参考:東京2020公認マークガイドライン(PDF) 2020/05/22 カテゴリー・タグウ...

 

プロ野球12球団

 

Cocoonのオリジナルスキン:日本プロ野球シリーズ(Ver2.1.6~対応)
Cocoonの独自スキン、プロ野球の球団テーマカラーを基調にしたシリーズです。 2020/05/25 すべてのスキンを更新しました。 各スキンに、Ver2.1.6~の新機能「フロントページ」のインデックスデザインも追加。 セリーグ 読売ジャ...

 

 

コメント

  1. […] →スキンの紹介ページはこちら […]

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