四季をコンセプトにした優しいデザインの「Season」スキンを4種追加

スキン
この記事は約3分で読めます。

ぽんひろ.comを運営されているぽんひろさんが公開されている「Season」スキン4種類をCocoonに同梱しました。

デモサイトはこちら。

Cocoonスキン「Season」 デモ
WordpressテーマCocoonのスキン「Season」のデモページです。サイドバーから春夏秋冬4つのスキンに切り替えができます。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

Season(シーズン)

Seasonは、春夏秋冬をコンセプトに、配色がされている柔らかなデザインのスキンです。

春らしい配色の「Season(Spring)」

skin-season-spring

活気のある夏配色の「Season(Summer)」

skin-season-summer

落ち着いた秋配色の「Season(Autom)」

skin-season-autumn

冬のようなクリア感のある「Season(Winter)」

skin-season-winter

の計4色をCocoon親テーマに同梱しました。

見出し

Springの見出しはこんな感じ(他3種も色違い)。

Springの見出し

インデックス

インデックスページのエントリーカードはこんな感じ。

Seasonのインデックスエントリーカード

SNSボタン

フォローボタンやシェアボタンは丸型。

シェアボタンやフォローボタンは

CTAボックス

Call to Actionボックスもスキンに合わせた明るい色に。

2019-05-10_18h16_53

各種パーツ

各種パーツもオリジナルデザインがされています。

文字装飾

文字装飾もSeasonスキンに最適化された色が施されています。

文字装飾もSeasonスキンに最適化

マーカーとかも。

Seasonスキンのマーカー色

文字装飾
文字装飾のデザインです。オススメの使い方は一つに絞ることです。いろいろ使うと逆に何が大事かわからなくなります。「強調はコレ!」と最初に決めるといいですね。どうしても複数使いたい場合は太字ともう1つで多くても二つまでがオススメです。文字のスタ

ブログカード

ブログカードもふわっとした感じ。

Seasonオリジナルデザインブログカード

ブログカード
ブログカードのデザインです。Cocoonに搭載されているブログカードのスタイルを変更しています。ブログカード一覧

ボタン

ボタンの色も、スキンに合わせて少し淡い色になっています。

Seasonスキンのボタン色

ボタン
ボタンのデザインです。Cocoonに搭載されているボタンの色を変更しています。元々の色は下記記事からご覧いただけます。ボタン一覧レッドボタンボタンボタンピンクボタンボタンボタンパープルボタンボタンボタン...

オリジナル装飾

他にはないSeasonスキンの特徴として、スキン独自の装飾が使えるようにオリジナルスタイルが割り当てられています。

リスト

リストスタイルは、こんな感じなのが全部で10種類。

Seasonリストスタイル1

Seasonリストスタイル2

全種類見る場合はこちらをチェック。

リスト(箇条書き)【オリジナル】
リスト(箇条書き)のデザインです。オリジナルになります。利用するにはプラグイン「AddQuicktag」を導入する必要があります。導入方法は下記記事をご覧ください。使い方ビジュアルエディタの場合テキストエディタの場合リスト一覧...

ボックス

オリジナルのボックススタイルも全部で10種類。

Seasonボックススタイル1

Seasonボックススタイル2

全種類確認するにはこちらをチェック。

ボックス【オリジナル】
ボックスのデザインです。オリジナルになります。利用するにはプラグイン「AddQuicktag」を導入する必要があります。AddQuicktagの導入方法は下記記事をご覧ください。使い方ビジュアルエディタテキストエディタタイトル入力欄なしここ

アコーディオン

なんと、ボタンで内容表示を切り替えられるアコーディオンボックスも利用できます。

オリジナルアコーディオンスタイル

利用方法はこちらをチェック。

アコーディオン【オリジナル】
アコーディオンです。オリジナルになります。利用するにはプラグイン「AddQuicktag」を導入する必要があります。AddQuicktagの導入方法は下記記事をご覧ください。重要同じページで複数使うときは少しコードを変更しなければいけません

オリジナルスタイルを簡単に利用する方法

これらのオリジナルスタイルは、AddQuicktagプラグインを利用することで、手軽に利用できるようにもなっています。

設定情報があらかじめ登録されたファイルが用意されているため、ダウンロードしてインポートするだけで利用できます。

addquicktag-season.json

設定方法はこちら。

AddQuicktagの導入方法
当スキンのオリジナルのスタイルを使うにはAddQuicktagをインストールする必要があります。AddQuicktagとはWordPressのプラグインで、エディターを拡張するためのものです。例えば、ボタンを1クリックで作ったり、文字の装飾

設定ファイルまで用意されているなんて、なんて至れり尽くせり。

設定方法

Seasonスキンは、Cocoon自体にも同梱されています。

利用するには、Cocoon設定の「スキン」タブから「Season」スキンを適用して保存してみてください。

Seasonスキンの設定方法

Seasonスキンの詳細については、以下のページをご確認ください。

Cocoonスキン「Season(シーズン)」を作りました!【WordPress】
WordPressテーマCocoonのスキン「Season(シーズン)」を作りました!春夏秋冬の4種類の配色に分けられたスキンになっています。オリジナルのスタイルも20種類以上!既存のスタイルも大幅チェンジ!優しい雰囲気のデザインにしてみま...

デモページはこちら。

Cocoonスキン「Season」 デモ
WordpressテーマCocoonのスキン「Season」のデモページです。サイドバーから春夏秋冬4つのスキンに切り替えができます。

サイドバーにある「スキン切り替え」ドロップダウンから、各種スキンの表示を確認できます。

Seasonスキン切り換えドロップダウン

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