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

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

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

※現在はテスト版としてユーザー登録者のみダウンロードできます。

私も別のブログで実際使っていますが、色々進化しつつもSimplicityのシンプルさはしっかり引き継いでいるという印象です。ほんとすごい。

このブログも現在「Cocoon」利用中です!※2018.6現在

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

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

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

スポンサーリンク

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

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

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

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

ヘッダー部分

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

デフォルト状態

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

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

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

MEMO

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

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

エントリーカード

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

見出し

 見出しはシンプルに

目次

引用(Blockquote) 

キャプションあり画像

拡張スタイル

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

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

SNSボタン

ブランドカラー

ブランドカラー(白抜き)

本文下(関連記事の上)

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

モバイルフッターバー

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

デモサイト

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

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

リンク デモサイト

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

ダウンロード

スキン「モダンブラック」ダウンロード

スキンの設定方法

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

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


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

WordPress
PROFILE
アオイ

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

アオイをフォローする
スポンサーリンク
スポンサーリンク
ミズタマブログ