Cocoonの独自スキン「2020年東京オリンピック」バージョンを作成しました。
2020年東京オリンピックエンブレムの紺と赤を使ったスキンです。
参考：東京2020公認マークガイドライン（PDF）
2020/05/22
2020/05/25
画面サンプル
ヘッダー変更２パターン可能
赤の入った市松模様の画像か、無地にもできます。
2020TOKYOスキン用部品
タブ切替メニュー
タブで切り替えて、カテゴリー別の最新記事などを表示できるデザイン部品も作成しています。
このスキン用のデザインをコピペ出来ます。
Cocoonスキン：2020TOKYO
基本カラー
東京オリンピックエンブレムのカラーコード
| #002063 | #ee334e |
ヘッダーとグローバルナビ
フロントページインデックス
2020/05/25 Ver2.1.6～の機能です。
「もっと見る」ボタン ホバー時
エントリーカード
記事一覧でのカード表示
マウスが乗った時は背景色を変えてふわっと浮き上がります。
ブログカード
上記エントリーカードと動きと色は同じで枠線ありになります。
オンマウス時
ページネーション
オンマウス時「ページナンバー」
サイドバー見出し（h3）
フッター見出し（h3）
カテゴリー・タグウィジェット
記事内見出し（h2～h5）
目次
SNSボタン
テーブル
コメント送信ボタン
ダウンロード
2020TOKYO
解凍ファイル内容
フォルダ：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]と表示されます。
ヘッダー画像を変更・削除したい場合
style.cssの38～40行目を削除、修正する事で、ヘッダーを変更できます。
３行を削除した場合
画像を変える場合
スキンフォルダ内部にもう１枚ヘッダー用画像が入っています。
「header_00.jpg」を「header_01.jpg」に変更すると
.header{
background-image: url("images/header_01.jpg");
}
以下のようなヘッダーになります。
更に他の画像をアップロードして変更する場合も、スタイルシートのこの箇所を変更して下さい。
Cocoon標準搭載のスキンは以下をご覧ください。
その他のオリジナルスキンは以下をご覧ください。
コメント