grayishスキン適用中

美しいグレーに統一されたデザインの「grayish」スキンを同梱

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

Na2 factoryを運営されているななふさんが作成されたgrayishスキンを同梱させていただきました。

Cocoon-grayish
grayish(グレイッシュ)は、無料で高機能なWordPressテーマ、Cocoonのスキンです。画面いっぱいに表示されるメインビジュアル、シンプルなデザイン、独自のテーマカスタマイザーが特徴です。...

Cocoonの見た目が大幅に変わるかなり気合の入ったスキンになっています。

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

「grayish」スキン

grayishスキンは、コーポレートサイトにでも利用できる機能強化されたスキンになっています。

トップページにサイトのイメージとなる画像を画面いっぱい表示できる仕様になっています。

その画面いっぱい表示できる仕様は、全ての端末に対応しています。

サイトの印象を画面全体で体感できるようになっています。

ちなみにインデックスページなどは以下のように表示されます。

grayishスキン専用サイトはこちら。スキンの見た目をまずはご体感ください。

Cocoon-grayish
grayish(グレイッシュ)は、無料で高機能なWordPressテーマ、Cocoonのスキンです。画面いっぱいに表示されるメインビジュアル、シンプルなデザイン、独自のテーマカスタマイザーが特徴です。...

grayishスキンを知るには、まずはこちらの記事からご参照ください。

grayish(グレイッシュ)へようこそ!最初はこの記事から。
grayish(グレイッシュ)を使い始める前に、まずはこの記事をご覧ください。grayishの特徴を簡単にまとめています。 親テーマCocoonの公式ページへのリンクあり。 ※マニュアル一覧を全記事の...

レイアウト

grayishスキンの特徴的なデザインは多岐に渡ります。なので全てを紹介はできませんが主なところだけでも紹介させていただきます。

メインビジュアル

まず一番の特徴は、前述したメインビジュアル部分でしょう。

サイトを訪れた方に「どんなサイトか」を真っ先に印象付けられる仕様になっています。

フロントページ設定:メインビジュアル
フロントページのメインビジュアルについて、設定方法を説明します。 事前にメインビジュアルにしたい画像を用意しましょう! 画像をどのように準備したらいいのか迷っている方は以下記事を御覧ください。 Coc...

見出し

見出しはとにかくスッキリとシンプルな印象。

見出しだけが目立つ感じではなく、主役の文章の引き立て役に徹する印象を受けました。

ブロックエディタ見本 コアブロック
コアブロックの見出し、段落(アイコンボックスのみ)、引用、プルクオート、テーブルについてスキンでスタイルを追加しています。記事作成の際にご参照ください。

引用

引用はこんな感じ。

引用元もしっかりとスタイリングしてあります。

ブロックエディタ見本 コアブロック
コアブロックの見出し、段落(アイコンボックスのみ)、引用、プルクオート、テーブルについてスキンでスタイルを追加しています。記事作成の際にご参照ください。

シェア・フォローボタン

シェアボタンやフォローボタンも特徴的です。

まず投稿の上部に表示されるトップシェアボタンはなく、コンテンツの左側に追従する形で表示されます。

本文下のシェアボタンやフォローボタンはこんな感じです。

統一感のある控えめのデザインがいいですね。

目次

目次は、余白もゆったりととってあり見やすいデザインになっています。

アイコンボックス

grayishスキンではCocoon独自のボックススタイルにも対応しています。

アイコンボックスもグレーで色調が統一されています。

ブロックエディタ見本 Cocoonブロック
Cocoonブロックについて、スキン独自のスタイルを当てているものについて見本を載せています。記事作成の際に参考になれば幸いです。一部のブロックは独自スタイルを当てていません。独自スタイルのないブロッ...

付箋風ボックス

付箋風ボックスもこんな感じで統一。

その他のボックスデザインも多数色調が統一されています。詳しくはこちらをご参照ください。

ブロックエディタ見本 Cocoonブロック
Cocoonブロックについて、スキン独自のスタイルを当てているものについて見本を載せています。記事作成の際に参考になれば幸いです。一部のブロックは独自スタイルを当てていません。独自スタイルのないブロッ...

ボックスメニュー

ウィジェットの表示場所とスキンスタイル見本
Cocoonのウィジェットは機能が豊富にあり、表示できる場所がたくさんあります。その分、どこに表示されるのか慣れるまで時間がかかります。この記事では、投稿ページで表示される場所を分かりやすく色付けして...

ランキング

ウィジェットの表示場所とスキンスタイル見本
Cocoonのウィジェットは機能が豊富にあり、表示できる場所がたくさんあります。その分、どこに表示されるのか慣れるまで時間がかかります。この記事では、投稿ページで表示される場所を分かりやすく色付けして...

ブログカード

ブログカードがこちら。「Read More」ボタンが付加されています。

スマホ端末、もしくはサイドバーのブログカードはこんな感じで縦型になるみたいですね。

プロフィール(サイドバー)

他にもたくさん独自デザインがあるのですが全ては紹介しきれないため、詳しくはgrayishスキンサイトをご確認ください。

Cocoon-grayish
grayish(グレイッシュ)は、無料で高機能なWordPressテーマ、Cocoonのスキンです。画面いっぱいに表示されるメインビジュアル、シンプルなデザイン、独自のテーマカスタマイザーが特徴です。...

オリジナル機能あり

grayishスキンは独自にスキンの設定を変えられるカスタマイズ機能も付いています。

WordPressダッシュボードの「外環」→「カスタマイズ」→「skin-graysh:カスタマイズ」からフォントやカラー、テキスト、ヘッダー、プロフィール、モバイル設定などを変更できます。

詳しくはこちらなどをご参照ください。

テーマカスタマイザーでカラー変更(使い方とカラーの適用箇所まとめ)
grayish独自のテーマカスタマイザーではテキストカラー、アクセントカラー5色の変更が可能になっています。 それぞれを変更した場合、どこが変わるのかについてまとめています。 デザインの統一感をだすた...

設定方法

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

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

スキン変更一発で、Cocoonの「Cocoonぽさ」をかなり消してくれるスキンとなっています。まるで別のサイトになったかのような感覚になるでしょう。

是非、以下のサイトだけでも見て「どういう雰囲気のサイトになるのか」を確認してみてください。

Cocoon-grayish
grayish(グレイッシュ)は、無料で高機能なWordPressテーマ、Cocoonのスキンです。画面いっぱいに表示されるメインビジュアル、シンプルなデザイン、独自のテーマカスタマイザーが特徴です。...

使い方などはマニュアルから調べることもできます。

Cocoon-grayish
grayish(グレイッシュ)は、無料で高機能なWordPressテーマ、Cocoonのスキンです。画面いっぱいに表示されるメインビジュアル、シンプルなデザイン、独自のテーマカスタマイザーが特徴です。...

サイトのイメージをガラリと変更したいなぁ

なんて場合は是非ご利用ください。

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