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

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

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

 

2020/05/25

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


 

画面サンプル

 

基本カラー

ベイスターズカラー

#094a8c #fcdb2a

 

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

 

パーツ別サンプル

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

 

 

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

 

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

 

エントリーカード

記事一覧でのカード表示

 

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

 

ブログカード

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

 

 

ページネーション

 

「次のページ」ホバー時

 

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

 

 

サイドバー見出し(h3)

 

フッター見出し(h3)

 

記事内見出し(h2~h5)

 

 

カテゴリーウィジェット

ホバー時

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

ホバー時

 

SNSボタン

 

 

テーブル

 

コメント送信ボタン

 

検索フォーム

 

ホバー時

 

 

フッターエリア

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

 

ダウンロード

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

解凍ファイル内容

フォルダ:skin-npb_baystars

<構成>

style.css

 

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

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

 

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

Cocoon用オリジナルスキン24種:ビビッドカラー・和色・プロ野球など
Cocoon用のオリジナルスキンまとめです。 Cocoonに標準装備の同梱スキン一覧は以下をご覧ください。 2020/05/25 すべてのスキンを更新しました。 各スキンに、Ver2.1.6~の新機能「フロントページ」のインデックスデザイン...
綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています

View Comments (2)

  • アップロードしたファイルからテーマをインストールしています: skin-npb_baystars.zip
    パッケージを展開しています…

    テーマをインストールしています…

    パッケージをインストールできませんでした。 style.css スタイルシートには有効なテーマヘッダーが含まれていません。

    テーマのインストールに失敗しました。

    ・macです。wpの「外観」から「テーマのアップロード」を選択し、ダウンロードしたファイルをzipのままアップロードしましたが上記エラーで使用できませんでした。
    手動アップロードはページをみましたが一人で出来そうにないため解決方法をご教授いただけたら幸いです

    • ヨシダさま 初めまして。
      テーマではなくデザインスキンですので、テーマアップロードではなく、
      この記事でも書いている通り、サーバーへアップロードする必要があります。
      SFTP転送についての詳細記事へのリンクでもご紹介している「FileZilla」というソフトは
      Windowsに限らず、Mac、Linuxでも互換性がありますので、お勧めです。
      当方はWindowsのため、Macでの設定については検索してみて下さい。

      たとえば以下のようなサイトで、設定方法が説明されています。
      FileZilla の設定(Mac OS X の場合)

      1.「FileZilla」をダウンロード~設定
      2.当サイトからダウンロードした圧縮ファイルを解凍
      3.「FileZilla」でアップロード
       アップロード場所
       /wp-content/themes/cocoon-child-master/skins
       アップロードファイル
       skin-npb_baystarsフォルダ(style.cssが入っています)