Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonのスキン「黒を基調にビビッドカラー5パターン」(Ver2.1.6~対応)

スポンサーリンク
スキン
この記事は約6分で読めます。

Cocoonの独自スキン「黒」を基調にしたバージョンを作成しました。

2020年3月29日 ブルーとグリーンの2色追加しました。

 

2020年5月11日 少しデザイン追加し、ダウンロードファイルは軽量化しました。

 

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

画面サンプル

 

Cocoonオリジナルスキン:ビビッドカラー(黒×朱)

 

 

このスキン用の部品

タブ切替メニュー

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

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

Cocoonのスキン「黒×ビビッドカラー」用部品:タブ切替メニュー
Cocoonの独自スキン「黒」を基調にしたバージョンに使えるタブ切替メニューのデザインです。 元のスキンは以下です。 カテゴリー・タグウィジェット用の部品もあります...

 

基本カラー

Cocoonスキン:黒×朱色

#000000#5d5855#f8565a

 

黒×朱色:ヘッダー

Cocoonオリジナルスキン:ビビッドカラー(黒×朱)
Cocoonの独自スキン「黒」を基調にしたシリーズ(5色)の「朱色」バージョン詳細です。 その他の色は以下でご覧ください。 2020/05/22 ...

 

Cocoonスキン:黒×オレンジ

#000000#5d5855#ff4600

 

黒×オレンジ:ヘッダー

Cocoonオリジナルスキン:ビビッドカラー(黒×オレンジ)
Cocoonの独自スキン「黒」を基調にしたシリーズ(5色)の「オレンジ」バージョン詳細です。 その他の色は以下でご覧ください。 2020/05/22 カテ...

 

Cocoonスキン:黒×ピンク

#000000#5d5855#dc1b76

 

黒×ピンク:ヘッダー

Cocoonオリジナルスキン:ビビッドカラー(黒×ピンク)
Cocoonの独自スキン「黒」を基調にしたシリーズ(5色)の「朱色」バージョン詳細です。 その他の色は以下でご覧ください。 2020/05/22 カテゴリー・タグ...

 

Cocoonスキン:黒×ブルー

#000000#5d5855#47a3ff

黒×ブルー:ヘッダー

Cocoonオリジナルスキン:ビビッドカラー(黒×ブルー)
Cocoonの独自スキン「黒」を基調にしたシリーズ(5色)の「ブルー」バージョン詳細です。 その他の色は以下でご覧ください。 2020/05/22 カテゴ...

 

Cocoonスキン:黒×グリーン

#000000#5d5855#00b400

黒×グリーン:ヘッダー

Cocoonオリジナルスキン:ビビッドカラー(黒×グリーン)
Cocoonの独自スキン「黒」を基調にしたシリーズ(5色)の「グリーン」バージョン詳細です。 その他の色は以下でご覧ください。 2020/05/22 カテゴリー・...

 

その他のパーツ

以降は朱色バージョンのサンプルになります。各色のサンプルはそれぞれの詳細ページをご確認下さい。

 

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

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

Cocoonオリジナルスキン:ビビッドカラー(黒×朱)

 

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

 

Cocoonオリジナルスキン:ビビッドカラー(黒×オレンジ)

 

エントリーカード

記事一覧でのカード表示

黒×朱色:エントリーカード

通常の背景色がグレー、マウスが乗った時の背景色は白です。

 

ブログカード

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

黒×朱色:ブログカード

 

ページネーション

黒×朱色:ページネーション

 

「次のページ」ホバー時

黒×朱色:ページネーション

「ページナンバー」ホバー時

 

黒×朱色:ページネーション

 

カテゴリーウィジェット

黒×オレンジ:カテゴリー

タグクラウドウィジェット

黒×オレンジ:タグクラウド

ホバー時

 

黒×オレンジ:タグクラウド

 

フッター見出し(h3)

黒×朱色:フッター

 

記事内見出し(h2~h5)

黒×朱色:見出し

 

SNSボタン

黒×朱色:SNSボタン

 

テーブル

黒×朱色:テーブル

テーブルの見出し(上図サンプル画像の1行目)には<TH>タグを使って下さい。

 

コメント送信ボタン

黒×朱色:コメント送信ボタン

 

検索フォーム

黒×朱色:検索フォーム

 

リンク

 

文字装飾

引用文

黒×オレンジ:引用文

 

マーカー

黒×オレンジ:マーカー

 

ボックス(白抜き)

オリジナルスキン・黒:ボックス(白抜き)

 

ボックス(タブ)

オリジナルスキン・黒:ボックス(タブ)

 

ボックス(付箋風)

オリジナルスキン・黒:ボックス(付箋風)

 

 

ダウンロード

ZIP形式圧縮ファイルです。

スタイルシートのみなので軽量です。(3kb)

黒×朱色

オリジナルスキン:黒×朱

 

フォルダ:skin-black_scarlet

 

黒×オレンジ

フォルダ:skin-black_orange

 

黒×ピンク

オリジナルスキン・黒×ピンク

フォルダ:skin-black_pink

 

黒×ブルー

オリジナルスキン:黒×青

フォルダ:skin-black_blue

 

黒×グリーン

オリジナルスキン:黒×緑

フォルダ:skin-black_green

 

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

 

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

 

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

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

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

 

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

 

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

 

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

オリジナルスキン・黒×朱色

 

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

 

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

Cocoon標準スキン全種・画面サンプル一覧とファイル構成
Cocoonのデザインスキンは、標準で数十種類用意されています。 更に「隠れスキン(7種)」や「自作用サンプル」もあります。 たくさんのスキンの見た目を一気に見れるようにまとめました。 ...

 

その他のオリジナルスキンは以下をご覧ください。

Cocoon用オリジナルスキン24種:ビビッドカラー・和色・プロ野球など
Cocoon用のオリジナルスキンまとめです。 Cocoonに標準装備の同梱スキン一覧は以下をご覧ください。 2020/05/25 すべてのスキンを更新しました。 各ス...

コメント

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