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

Cocoonのスキン「2020 TOKYO」オリンピックエンブレムカラー

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

Cocoonの独自スキン「2020年東京オリンピック」バージョンを作成しました。

2020年東京オリンピックエンブレムのを使ったスキンです。

2020年東京オリンピックエンブレム

参考:東京2020公認マークガイドライン(PDF)

 

2020/05/22

カテゴリー・タグウィジェットデザインを追加し、ヘッダー画像を1つ変更。

2020/05/25

Ver2.1.6~の新機能「フロントページ」のインデックスデザインも追加。

 

スポンサーリンク

画面サンプル

TOKYO2020スキンサンプル

 

ヘッダー変更2パターン可能

赤の入った市松模様の画像か、無地にもできます。

 

2020TOKYOスキン用部品

タブ切替メニュー

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

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

Cocoonのスキン「2020TOKYO」用部品:タブ切替メニュー
Cocoonの独自スキン「2020TOKYO」オリンピックカラーに使えるタブ切替メニューのデザインです。 元のスキンは以下です。 カテゴリー・タグウィジェット用の部...

 

Cocoonスキン:2020TOKYO

基本カラー

東京オリンピックエンブレムのカラーコード

#002063#ee334e

 

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

TOKYO2020スキンサンプル

 

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

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

 

TOKYO2020スキンサンプル

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

TOKYO2020スキンサンプル

 

エントリーカード

記事一覧でのカード表示

2020TOKYO:エントリーカード

 

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

 

2020TOKYO:エントリーカード

ブログカード

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

 

2020TOKYO:ブログカード

オンマウス時

 

2020TOKYO:ブログカード

ページネーション

2020TOKYO:ページネーション

 

 

オンマウス時「ページナンバー」

2020TOKYO:ページネーション

 

 

サイドバー見出し(h3)

2020TOKYO:サイドバー見出し

 

フッター見出し(h3)

2020TOKYO:フッター見出し

 

カテゴリー・タグウィジェット

Cocoonスキン(2020TOKYO):カテゴリー・タグウィジェット

 

記事内見出し(h2~h5)

2020TOKYO:見出し

 

目次

2020TOKYO:目次

 

SNSボタン

 

2020TOKYO:SNSボタン

 

テーブル

2020TOKYO:テーブル

 

 

コメント送信ボタン

2020TOKYO:コメント送信ボタン

 

 

 

ダウンロード

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

2020TOKYO

TOKYO2020スキンサンプル

 

 

 

解凍ファイル内容

フォルダ:skin-2020tokyo

<構成>

images
header_00.jpg
header_01.jpg
ichimatsu.jpg
ichimatsu_s.jpg
style.css

 

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

TOKYO2020スキンサンプル

ヘッダー画像を変更・削除したい場合

style.cssの38~40行目を削除、修正する事で、ヘッダーを変更できます。

ヘッダー画像削除・編集CSS

 

 

3行を削除した場合

2020TOKYO:ヘッダーなし

 

画像を変える場合

スキンフォルダ内部にもう1枚ヘッダー用画像が入っています。

「header_00.jpg」を「header_01.jpg」に変更すると

.header{
background-image: url("images/header_01.jpg");
}

以下のようなヘッダーになります。

TOKYO2020スキンサンプル

 

更に他の画像をアップロードして変更する場合も、スタイルシートのこの箇所を変更して下さい。

 

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

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

 

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

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

コメント

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