About
このブログについて

WordPressTheme Cocoonのスキン、grayishのブログのフロントページを作るデモページです。
各セクションのパターンはダウンロード可能になっています。
使用している画像はダミーです。実際にご利用の際はご自身の用意した画像に置換してください。
PickUp!
上段:大きい横型、下段:4列
New Post
新着記事

【お知らせ】デモサイトのデザインリニューアルとココナラ店について
サラダバーのデモサイトのデザインをリニューアルしました。25年1月にgrayishベースWeb制作のサービスをココナラに出品予定です。ご提供可能なデザインのサンプルとしてご覧になっていただけたら幸いです。また、個別のカスタマイズについてはココナラでサービス出品中ですので、もしご入用がありましたらご相談くださいませ。
2024.12.232025.03.13

境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。※24/12/24 なみなみや円弧についてプラグインとCSS修正
サイト型フロントページに使えるシリーズ、今回は境界線をなみなみやギザギザにできるCSSを紹介します。また、画像やカバーブロックを直接円弧、斜めに切り抜きするCSSも紹介します。さらに区切り線として使用可能な、直線・なみなみ・ギザギザのパターンも配布します。
2024.06.042024.12.24

フロントページ向けの新着記事パターンを追加。スマホで記事を2列ずつ表示。
これまで配布しているフロントページ用パターンの新着記事は、PC時3列ずつ、タブレットサイズで2列、スマホで1列の表示をする一つのみです。今回追加するパターンは、①PC時3列ずつ、タブレットサイズ以下は2列表示②PC時4列ずつ、タブレットサイズ以下は2列表示となります。スマホで2列表示したかった方向けのパターンになります。また、今回追加するパターンはCSSのsubgrid(サブグリッド)を使用しているので、行方向(横並び)の見た目がこれまでよりもきれいに揃うようになります。記事ごとにタイトルや詳細の量が異なっていても、多い方に合わせて縦の余白が揃う様になっています。
2025.04.02

Cocoonのカスタムテキストでテキスト装飾を追加できます。サンプルコード紹介:ドット、丸、ゴマ、三角、波やストライプの下線など
カスタムテキストはデフォルトで2つ用意されています。公式のマニュアルに簡単に数を増やせるように参考コードが載っています。テキスト装飾の内容は各自の子テーマのstyle.cssに追加する必要がありますが、テキストの上にドットや円、三角、ゴマを表示したり、バリエーション豊富な下線を付けたりすることが可能です。エディタでボタンを押すだけで追加した装飾を付けることができますので、ぜひ使ってみてください。
2025.03.212025.03.24

Cocoon ver2.8.5.1でのgrayishアップデート情報と、配布プラグインアップデートのお願い
Cocoon ver2.8.5.1でのgrayishのアップデート情報についてお知らせいたします。また、Cocoonをアップデートすると、grayish用に配布しているプラグインについてもアップデート…
2025.03.09

grayish色見本サイトを作りました!カラーコードをコピペしてすぐに使えます
grayishのテーマカスタマイザーのカラー設定、デフォルトから変えてみたいけど、どんな組み合わせがいいのかお困りではありませんか?管理人が考えた組み合わせをサイト上で試せる色見本サイトを作りましたので是非お試しください。グレーと相性のよいくすみ系カラー中心です。各組み合わせのカラーコードを載せていますので、コピペして使用可能です。
2025.01.09

Cocoon ver2.8.3でのgrayish不具合報告
Cocoon ver2.8.3でのgrayishの不具合情報についてお知らせいたします。不具合報告:もしもアフィリエイトのかんたんリンク使用時、表示が崩れる開発版で修正済みです※24/12/24 Co…
2024.12.24
Category
おすすめカテゴリー3選♪

Design
フロントページタイプやCocoonブロック、コアブロック、ウィジェットのデザイン見本です。

【お知らせ】デモサイトのデザインリニューアルとココナラ店について
2024.12.232025.03.13

境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。※24/12/24 なみなみや円弧についてプラグインとCSS修正
2024.06.042024.12.24

Cocoonのカスタムテキストでテキスト装飾を追加できます。サンプルコード紹介:ドット、丸、ゴマ、三角、波やストライプの下線など
2025.03.212025.03.24

grayish色見本サイトを作りました!カラーコードをコピペしてすぐに使えます
2025.01.09

Cocoonタブブロックのgrayishスタイル見本
2024.04.302024.11.19

サイトロゴを簡単に作りたい。CanvaとAdobe Expressの使用例
2023.11.012023.11.27

ウィジェットの表示場所とスキンスタイル見本
2023.09.022024.09.09

Manual
基本設定からカスタマイズまでマニュアルを揃えています。

【お知らせ】デモサイトのデザインリニューアルとココナラ店について
2024.12.232025.03.13

境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。※24/12/24 なみなみや円弧についてプラグインとCSS修正
2024.06.042024.12.24

フロントページ向けの新着記事パターンを追加。スマホで記事を2列ずつ表示。
2025.04.02

Cocoonのカスタムテキストでテキスト装飾を追加できます。サンプルコード紹介:ドット、丸、ゴマ、三角、波やストライプの下線など
2025.03.212025.03.24

バリアブルフォントのサンプルとカスタマイズ例をご紹介します
2024.11.272025.01.09

メインビジュアルと重なる間、ナビメニューのカラーを変えるカスタマイズ【PC表示限定】
2024.10.292024.12.23

メインビジュアルをPCとモバイルで別画像にするカスタマイズ【CSSのみ】
2024.09.272024.10.29

Notes
grayishを使用する際に前もって読んでいただきたい注意事項などをまとめています。

【お知らせ】デモサイトのデザインリニューアルとココナラ店について
2024.12.232025.03.13

境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。※24/12/24 なみなみや円弧についてプラグインとCSS修正
2024.06.042024.12.24

独自ドメイン取得したら、SSL化(httpからhttpsへ)してからサイトを作ろう。中途半端なSSL化にご注意
2024.09.02

スキンの複雑(高度)なカスタマイズをする場合
2023.11.222024.01.09

本サイトの記事の文章や画像、動画の修正について
2023.10.272023.11.20

サムネイル画像の縦横比について
2023.10.242023.11.27

Cocoonで非推奨の機能(AMP,PWA)はご利用できません(v2.7.0で廃止されました)
2023.10.242024.02.09
Ranking
当サイトの人気記事 shift-mode

フロントページ設定:メインビジュアル
2023.08.012024.09.28

フロントページ設定:フロントページタイプ
2023.08.012023.12.22

サイト型にしたい場合の準備編
2024.02.092025.03.24

grayish(グレイッシュ)へようこそ!最初はこの記事から。
2023.09.072025.04.01

メニュー設定:タブレット・スマホのヘッダー・フッターモバイルボタン
2023.08.292024.07.15

サイト型フロントページにも使える!カバーブロックを画面の幅いっぱいに広げるサンプルコード
2024.02.212025.01.16

News
2025.04.02
カスタマイズサイト型マニュアル
2025.03.21
ブログTipsマニュアル記事作成
2025.03.09
不具合情報更新情報
2025.01.09
ブログTips更新情報