マテリアルデザインのスキン「SILK(シルク)」を追加。ブロックスタイルも豊富

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

ろこさんが作成されたCocoonスキンのSILK(シルク)を同梱させていただきました。

https://dateqa.com/cocoon/

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

レイアウト

主なレイアウトを紹介します。

マテリアルデザイン

陰影と配色はマテリアルデザインのガイドラインに沿って作られているスキンです。

シルクスキンはMaterial Design

キーカラーやダークスキンにも対応しています。

詳しくはこちら。

https://dateqa.com/cocoon/

見出し

見出し部分はこんな感じ。

シルクスキンの見出し

シェアボタン

シェアボタンは丸型のデザインでシェアカウントがとても読みやすい。

シルクスキンのシェアボタン

本文下のシェアボタンはこんな感じ。

シルクスキンの本文下のシェアボタン

目次

大見出しの目次が見やすくなっています。

シルクスキンの目次

アイコンボックス

アイコンボックスのスタイルも刷新。

シルクスキンのアイコンボックス

タブボックス

タブボックスのタブが内側に入り込むスタイルに。

シルクスキンのタブボックス

付箋風ボックス

付箋風ボックスも陰影がつくだけで全然違った趣に。

シルクスキンの付箋風ボックス

ブログカード

ブログカードもよりスマホ向きのデザインに。

シルクスキンのブログカード

ボタン

シルクスキンのボタン

引用

シルクスキンの引用スタイル

プロフィール

プロフィールはこんな感じで縦長。

シルクスキンのプロフィール

アピールエリア

アピールエリアも黒系のシックなものに。

シルクスキンのアピールエリア

各ブロックにスタイルが追加されている

シルクスキンの特徴として、各ブロックに便利なスタイルも追加されています。

アコーディオンボックスを並べて表示させたり、

シルクスキンのアコーディオン

グループボックスとアイコンリストブロックの組み合わせにより、比較表なども作れるようになっています。

シルクスキンの比較表

ブログカードを並べて表示できたりします。

シルクスキンの複数ブログカード

その他にもいろいろな機能があるのですが、ここでは紹介しきれないので、詳しくはスキンの紹介ページでご確認ください。

https://dateqa.com/cocoon/

設定方法

今回紹介したスキンは、Cocoon親テーマに同梱されています。

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

Cocoon設定からシルクスキンを選択

とにかく細部まで凝ったスキンなので、是非試してみてください。

スキンの詳細はこちら。

https://dateqa.com/cocoon/
タイトルとURLをコピーしました