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

Cocoonのスキン:プロ野球シリーズ「横浜ベイスターズカラー」

スポンサーリンク
Cocoonスキン:ベイスターズカラースキン

Cocoonの独自スキン、プロ野球の球団テーマカラーを基調にしたシリーズです。

こちらは横浜ベイスターズカラーのスキンです。

 

2020/05/25

少しデザイン追加し、ダウンロードファイルは軽量化しました。
Ver2.1.6~の新機能「フロントページ」のインデックスデザインも追加。
スポンサーリンク

画面サンプル

Cocoonスキン:ベイスターズカラー

 

基本カラー

ベイスターズカラー

#094a8c#fcdb2a

横浜ベイスターズロゴ

 

ロゴは 公式サイト より引用

 

パーツ別サンプル

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

 

Cocoonスキン:ベイスターズカラー

 

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

Cocoonスキン:ベイスターズカラー

 

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

Cocoonスキン:ベイスターズカラー

 

エントリーカード

記事一覧でのカード表示

 

Cocoonスキン:ベイスターズカラー

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

 

ブログカード

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

Cocoonスキン:ベイスターズカラー

 

 

ページネーション

 

Cocoonスキン:ベイスターズカラー

「次のページ」ホバー時

Cocoonスキン:ジャイアンツカラー

 

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

 

Cocoonスキン:ベイスターズカラー

 

サイドバー見出し(h3)

 

Cocoonスキン:ベイスターズカラー

フッター見出し(h3)

 

Cocoonスキン:ベイスターズカラー

記事内見出し(h2~h5)

Cocoonスキン:ベイスターズカラー

 

 

カテゴリーウィジェット

Cocoonスキン:ベイスターズカラー

ホバー時

Cocoonスキン:ベイスターズカラー

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

Cocoonスキン:ベイスターズカラー

ホバー時

Cocoonスキン:ベイスターズカラー

 

SNSボタン

Cocoonスキン:ベイスターズカラー

 

 

テーブル

 

Cocoonスキン:ベイスターズカラー

コメント送信ボタン

 

Cocoonスキン:ベイスターズカラー

検索フォーム

Cocoonスキン:ベイスターズカラー

 

ホバー時

 

Cocoonスキン:ベイスターズカラー

 

フッターエリア

Cocoonスキン:ベイスターズカラー

フッターメニュー ホバー時

Cocoonスキン:ベイスターズカラー

 

ダウンロード

ZIP形式圧縮ファイル(3kb程度)です。

解凍ファイル内容

フォルダ:skin-npb_baystars

<構成>

style.css

 

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

 

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

 

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

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

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

 

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

 

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

 

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

Cocoonスキン:ベイスターズカラー

 

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

 

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

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

 

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

Cocoonのオリジナルスキン

Cocoonのオリジナルスキン

コメント

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