WordPressテーマCocoonの黒系スキン「モダンブラック」を作りました

WordPressテーマ「Simplicity」の後継となるテーマ「Cocoon」が公開されています。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

色々進化しつつもSimplicityのシンプルさはしっかり引き継いでいるという印象です。ほんとすごい。

このブログも「Cocoon」利用中です!

私はワクワクする物に出会うとどこかカスタマイズして自分仕様にしたがるクセがあるのですが、この「Cocoon」もまさにそのワクワク状態です。

なので「Cocoon」のスキンも作ってみました!

個人的なワクワクポイントとしてファイル構成がSimplicityよりかなりすっきりしたこともあります。関数やテンプレートのカスタマイズもすごくやりやすい!

スポンサーリンク

Cocoonスキン「モダンブラック」の特徴

いや、そもそも「Cocoon」というテーマ名が「繭のように白いシンプルなテーマ」がコンセプトなのに「黒」ってどうよ?と思いましたが、ブラック系が好きな人もいると思うので。シンプルだからこそカスタマイズのし甲斐があります。

このスキン「モダンブラック」とにかく色を使ってません。基本はブラック・グレー・ホワイトとなってます。

それでは細かく紹介していきます。
※Cocoonの設定はインストールしてすぐの基本デフォルトのままです。

ヘッダー部分

ヘッダーレイアウト「センターロゴ」

デフォルト状態

設定でヘッダー全体とグローバルナビのカラー変更

ヘッダーレイアウト「トップメニュー」

 トップメニューにした場合には色の設定が必要

MEMO

トップメニューにするだけだと左右に白い部分ができるので「ヘッダー全体背景色」と「グローバルナビ色」を同じ色に設定してください。

 設定でヘッダー全体のカラー変更(グローバルナビカラーは設定なし)

エントリーカード

カテゴリーの色を設定した場合はその色で表示します。未設定の場合はブラックになります。エントリーカードはマウスオーバーでうっすらシャドウが入ります。

見出し

 見出しはシンプルに

目次

引用(Blockquote) 

キャプションあり画像

拡張スタイル

デフォルトのカラーだとちょっと可愛すぎるので少し落ち着いた色にしてみました。

2019.6.3 スタイル対応できていなかった拡張スタイルを追加しました。

モバイルサイズだと少し違った表示になります。

SNSボタン

 

MEMO

2019.6.3
SNSボタンのスタイルは削除しました。
標準の機能でカラー設定(モノクロ・ブランドカラー・白抜きブランドカラー)をお願いします。

 

本文下(関連記事の上)

本文の下で関連記事の上のフォローボタンなどのエリアはこのようになっています。

モバイルフッターバー

モバイルボタンレイアウトをスライドインボタンにしている場合、モバイルサイズでこのような表示になります。

デモサイト

他にも、「次のページ」リンクやフッターなど全体的に雰囲気を合わせています。

実際の表示イメージはデモサイトを見てもらった方が早いですね。

リンク デモサイト

※上記デモサイトはWPテーマCocoonのスキン表示テスト中です。

ダウンロード、アップデート情報

アオイ
アオイ

スキン「モダンブラック」はCocoon本体に同梱済みですのでダウンロードしなくても利用できますよ!

バージョン:1.2(2019.6.3)

Download スキン モダンブラック (5 KB)

バージョンアップで行った主な修正点

1.2(2019.6.3)
・一部の拡張スタイルがスキンに合わせたスタイルになっていなかったのを修正しました。
・SNSボタンのスタイル削除しました。

1.1(2018.10.31)
目次のところとか分からないくらいの微妙な変更を加えています。

スキンの設定方法

ダウンロードしたファイルはフォルダごとCocoonテーマの「skins」フォルダにアップロードしてください。カスタマイズする場合は子テーマの「skins」フォルダにアップロードしてください。

そして、「Cocoon設定」の「スキン」タブを開いて「スキン一覧」から選択してください。


気軽に着せ替えできるテーマ「Cocoon」のスキン機能。「モダンブラック」も一度お試しくださいねー。

こちらも!

WordPressテーマCocoonのデザインスキン「Fuwari和色」を作りました
和色をベースにした主張しすぎないシンプルなWordPressテーマCocoonのスキンを作りました。
WordPress
PROFILE
アオイ

スマホもタブレットもAndroid派。新しいWEBサービスやツール、ガジェットはすぐ試したいタイプ。ネコとミズタマが好き。何かをカスタマイズしがち。

アオイをフォローする
スポンサーリンク
スポンサーリンク
ミズタマブログ
タイトルとURLをコピーしました