# Cocoon-grayish > WordPressテーマCocoonのスキン、grayish（グレイッシュ）の機能や使い方を紹介します。 --- ## 固定ページ - [エックスサーバーお友達紹介プログラム](https://cocoon-grayish.na2-factory.com/xs-friend-program/): エックスサーバーのお友達紹介プログラムは... - [for_demo_pattern](https://cocoon-grayish.na2-factory.com/for_demo_pattern/): About このブログについて Word... - [お問い合わせ事例集](https://cocoon-grayish.na2-factory.com/contact-jirei/): これまで当サイトに寄せられたお問い合わせ... - [記事内ページャーの確認](https://cocoon-grayish.na2-factory.com/pager-testpage/): これはデモ用の固定ページです。 記事内に... - [ライセンスについて](https://cocoon-grayish.na2-factory.com/skin-licence/): grayishはWordPressテーマ... - [プライバシーポリシー](https://cocoon-grayish.na2-factory.com/privacy-policy-2/): 基本方針 当サイトは、個人情報の重要性を... - [運営者情報](https://cocoon-grayish.na2-factory.com/about/): grayishの制作者、ななふの紹介ペー... - [お問い合わせ](https://cocoon-grayish.na2-factory.com/for_skin_contact/): このサイトのマニュアルを読んでも使い方が... - [NewPost](https://cocoon-grayish.na2-factory.com/newpost/): - [Cocoon-grayish-TOP](https://cocoon-grayish.na2-factory.com/): https://youtu. be/uf... --- ## 投稿 - [Cocoon2.8.5.5以降(正式配布ver2.8.6)にバージョンアップ後、配布プラグインの更新が必要になります](https://cocoon-grayish.na2-factory.com/rel-infor-23/): ※25/05/26 わいひらさんより、v... - [フロントページ向けの新着記事パターンを追加。スマホで記事を2列ずつ表示。](https://cocoon-grayish.na2-factory.com/for-frontpage-blkpattern-newpostadd/): Cocoon grayishのフロントペ... - [Cocoonのカスタムテキストでテキスト装飾を追加できます。サンプルコード紹介：ドット、丸、ゴマ、三角、波やストライプの下線など](https://cocoon-grayish.na2-factory.com/cocoon-cstmtext-variation/): Cocoonにはデフォルトでテキストの装... - [Cocoon ver2.8.5.1でのgrayishアップデート情報と、配布プラグインアップデートのお願い](https://cocoon-grayish.na2-factory.com/rel-infor-22/): Cocoon ver2. 8. 5. 1... - [grayish色見本サイトを作りました！カラーコードをコピペしてすぐに使えます](https://cocoon-grayish.na2-factory.com/color-samplesite-open/): grayishのカラー設定をデフォルトか... - [Cocoon ver2.8.3でのgrayish不具合報告](https://cocoon-grayish.na2-factory.com/rel-infor-21/): Cocoon ver2. 8. 3でのg... - [【お知らせ】デモサイトのデザインリニューアルとココナラ店について](https://cocoon-grayish.na2-factory.com/info-demo-site/): 特にスキンの情報ではないのですが、お知ら... - [Cocoon ver2.8.1.1でのgrayish不具合報告](https://cocoon-grayish.na2-factory.com/rel-infor-20/): Cocoon ver2. 8. 1. 1... - [バリアブルフォントのサンプルとカスタマイズ例をご紹介します](https://cocoon-grayish.na2-factory.com/grayish-variable-font/): Cocoon ver2. 8. 0で、g... - [WordPress6.7以降へアップデートによるgrayish不具合報告](https://cocoon-grayish.na2-factory.com/rel-infor-19/): WordPress6. 7以降にアップデ... - [Cocoon ver2.8.0でのgrayish仕様変更について](https://cocoon-grayish.na2-factory.com/rel-infor-18/): Cocoonのver2. 8. 0にて、... - [メインビジュアルと重なる間、ナビメニューのカラーを変えるカスタマイズ【PC表示限定】](https://cocoon-grayish.na2-factory.com/cstm-mv-navi-color/): フロントページかつPC表示（画面幅102... - [Cocoon ver2.7.9.1でのgrayish不具合修正と仕様変更](https://cocoon-grayish.na2-factory.com/rel-infor-17/): Cocoon ver2. 7. 9でのg... - [Cocoon ver2.7.8でのgrayish仕様変更。ブログ型フロントページのMoreボタンをView Moreへ変更](https://cocoon-grayish.na2-factory.com/rel-infor-16/): Cocoon ver2. 7. 8でのg... - [メインビジュアルをPCとモバイルで別画像にするカスタマイズ【CSSのみ】](https://cocoon-grayish.na2-factory.com/cstm-mv-pcsp-change/): という方へのカスタマイズ参考記事になりま... - [Cocoonの新着記事ブロックなどをスライダーにできるプラグイン作りました※※Cocoon2.8.5.5以降にアップデート後、プラグインもv2.0.0にアップデートしてください](https://cocoon-grayish.na2-factory.com/plugin-postautoplay/): Cocoonは新着記事や人気記事などの一... - [独自ドメイン取得したら、SSL化(httpからhttpsへ)してからサイトを作ろう。中途半端なSSL化にご注意](https://cocoon-grayish.na2-factory.com/setup-domain-ssl/): WordPressでこれからブログを始め... - [Cocoon新着記事ショートコードの新機能で任意の記事一覧を表示可能に。初心者さん向けに使い方を解説します](https://cocoon-grayish.na2-factory.com/about-cocoon-newpost-order/): Cocoonのver2. 7. 5より、... - [ロゴ設定の機能追加します。※Cocoon ver2.7.4.1以降で利用可能（24/09/02 独自ドメインSSL化に関する内容の追加）](https://cocoon-grayish.na2-factory.com/add-headerlogo-setting/): grayish機能追加のお知らせです。 ... - [境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。※24/12/24 なみなみや円弧についてプラグインとCSS修正](https://cocoon-grayish.na2-factory.com/for-frontpage-blkpattern-maskzig/): 今回もサイト型フロントページ向けに、画像... - [Cocoon ver2.7.3.5でのgrayish不具合情報※ver2.7.4で修正](https://cocoon-grayish.na2-factory.com/rel-infor-15/): 現在公開されているCocoon ver2... - [メインビジュアルにスライダーや動画を設定できるプラグイン作りました※Cocoon2.8.5.5以降にアップデート後、プラグインもv2.0.0にアップデートしてください](https://cocoon-grayish.na2-factory.com/plugin-mv-add/): grayish専用になりますが、メインビ... - [Cocoonタブブロックのgrayishスタイル見本](https://cocoon-grayish.na2-factory.com/cocoon-tabblk-style/): Cocoon ver2. 7. 3で追加... - [Cocoon ver2.7.3でのgrayish仕様変更のお知らせ](https://cocoon-grayish.na2-factory.com/rel-infor-14/): Cocoonのver2. 7. 3でgr... - [モバイルの設定](https://cocoon-grayish.na2-factory.com/mobile-setting/): この記事では、Cocoon設定＞モバイル... - [サイト型のフロントページ向け：滑らかな曲線の境界線ブロックをつくる（円弧・波）※カバーブロック利用で簡単に使えるように改良！](https://cocoon-grayish.na2-factory.com/for-frontpage-blkpattern-cir-wave/): この記事では、サイト型の１カラムのフロン... - [Cocoon ver2.7.2.2でのgrayish仕様変更のお知らせ](https://cocoon-grayish.na2-factory.com/rel-infor-13/): Cocoonのver2. 7. 2. 2... - [フロントページ向けのブロックパターン詰め合わせ(デモページあり）※Cocoon ver2.8.5.1へアップデート後はプラグインもアップデートしてください](https://cocoon-grayish.na2-factory.com/for-frontpage-blkpattern/): grayishでサイト型フロントページを... - [Cocoonの新機能でパターンデータをシェア可能に！作例のパターンをシェア&使い方](https://cocoon-grayish.na2-factory.com/cocoon-pattern-share/): 前に公開した記事にて、サイト型でフロント... - [Cocoon ver2.7.1でのgrayish仕様変更のお知らせ](https://cocoon-grayish.na2-factory.com/rel-infor-12/): Cocoonのver2. 7. 1でgr... - [サイト型フロントページにも使える！カバーブロックを画面の幅いっぱいに広げるサンプルコード](https://cocoon-grayish.na2-factory.com/img-fullwide-code/): 今回は、grayishでサイト型のフロン... - [サイト型にしたい場合の準備編](https://cocoon-grayish.na2-factory.com/sitetype-make-setting/): grayishをご利用の方からの問い合わ... - [CocoonのOGP設定。X（旧Twitter）やFacebookへシェアしたときの表示を確認しよう※2024年２月現在](https://cocoon-grayish.na2-factory.com/about-cocoon-ogp-image/): この記事では、CocoonのOGP設定方... - [Cocoon ver2.7.0でのgrayish不具合情報＆仕様変更のお知らせ](https://cocoon-grayish.na2-factory.com/rel-infor-11/): （24/02/06)Cocoonのv2.... - [Cocoon ver2.6.9でのgrayish不具合情報（※24/02/01追記あり）](https://cocoon-grayish.na2-factory.com/rel-infor-10/): 現在公開されているCocoon ver2... - [記事の装飾に使える、スキン独自のカラーパレット](https://cocoon-grayish.na2-factory.com/skin-org-colorpalette/): 記事の装飾に使用可能な、スキン独自のカラ... - [子テーマのCSSでカスタマイズしたい場合](https://cocoon-grayish.na2-factory.com/skin-child-customize/): 子テーマのCSSで細かく自分の好みに合わ... - [スキンの複雑（高度）なカスタマイズをする場合](https://cocoon-grayish.na2-factory.com/skin-ctrl-customize/): grayishのスキン制御(option... - [grayish、Cocoonに同梱していただきました！](https://cocoon-grayish.na2-factory.com/rel-infor-9/): この度、grayishはCocoonに同... - [サイトロゴを簡単に作りたい。CanvaとAdobe Expressの使用例](https://cocoon-grayish.na2-factory.com/kanten-logo-make/): サイトのロゴをテキストではなく画像で作り... - [本サイトの記事の文章や画像、動画の修正について](https://cocoon-grayish.na2-factory.com/rel-infor-8/): 本サイトの内容について、修正を行っている... - [ver1.0.6 リリースしました。不具合修正](https://cocoon-grayish.na2-factory.com/rel-infor-7/): ver1. 0. 5について、Cocoo... - [ver1.0.5 リリースしました。不具合修正](https://cocoon-grayish.na2-factory.com/rel-infor-6/): ver1. 0. 4について、Cocoo... - [サムネイル画像の縦横比について](https://cocoon-grayish.na2-factory.com/thumbnail-aspectratio/): grayishではフロントページなどで表... - [Cocoonで非推奨の機能(AMP,PWA)はご利用できません(v2.7.0で廃止されました）](https://cocoon-grayish.na2-factory.com/noref-function/): Cocoon v2. 7. 0より、AM... - [ver1.0.4 リリースしました。不具合修正](https://cocoon-grayish.na2-factory.com/rel-infor-5/): ver1. 0. 3について、Cocoo... - [ver1.0.3 リリースしました。不具合修正](https://cocoon-grayish.na2-factory.com/rel-infor-4/): ver1. 0. 2について、Cocoo... - [ver1.0.2 リリースしました。不具合修正](https://cocoon-grayish.na2-factory.com/rel-infor-3/): ver1. 0. 1について、Cocoo... - [ver1.0.1 リリースしました。不具合修正など](https://cocoon-grayish.na2-factory.com/rel-infor-2/): ver1. 0. 0について、Cocoo... - [Cocoonのスキン、grayish（グレイッシュ）ver1.0.0 リリース！](https://cocoon-grayish.na2-factory.com/rel-infor-1/): こんにちは！ フリーランスWebデザイナ... - [記事作成はブロックエディタ（Gutenberg）をご利用ください](https://cocoon-grayish.na2-factory.com/grayish-classiceditor-nouse/): grayishは、クラシックエディタで動... - [推奨画像サイズ一覧](https://cocoon-grayish.na2-factory.com/ref-img-size/): grayishで推奨するアイキャッチ等の... - [テーマカスタマイザー：NewPost等のテキストを変更する](https://cocoon-grayish.na2-factory.com/manual-cstm-contents-text/): grayishのスキン独自テーマカスタマ... - [テーマカスタマイザー：グローバルナビの高さや背景色を変更する（PC時）](https://cocoon-grayish.na2-factory.com/manual-cstm-pcheader/): grayishのスキン独自テーマカスタマ... - [テーマカスタマイザーでカラー変更（使い方とカラーの適用箇所まとめ）](https://cocoon-grayish.na2-factory.com/manual-cstm-th-color/): grayishのスキン独自テーマカスタマ... - [投稿・固定ページ：SNSシェア・フォローボタンの設定](https://cocoon-grayish.na2-factory.com/manual-snsbtn-set/): 投稿・固定ページで表示されるSNSシェア... - [投稿ページ：関連記事の設定](https://cocoon-grayish.na2-factory.com/manual-related/): この記事では、投稿ページの記事下に表示さ... - [投稿・固定ページ：目次の設定](https://cocoon-grayish.na2-factory.com/manual-index/): この記事では、主に投稿・固定ページで利用... - [コンテンツ下部に人気記事ランキングを表示](https://cocoon-grayish.na2-factory.com/manual-cstm-poplist/): コンテンツ下部に人気記事ウィジェットを設... - [grayish（グレイッシュ）へようこそ！最初はこの記事から。](https://cocoon-grayish.na2-factory.com/manual-start/): こんにちは。 Cocoonのスキンgra... - [フッターのウィジェット設定](https://cocoon-grayish.na2-factory.com/manual-footer-widget/): フッターにウィジェットを設定する手順につ... - [ウィジェットの表示場所とスキンスタイル見本](https://cocoon-grayish.na2-factory.com/widgets-sample/): Cocoonのウィジェットは機能が豊富で... - [投稿・固定ページ：サイドバーのウィジェット初期設定](https://cocoon-grayish.na2-factory.com/manual-sidebar-init/): WordPressをインストールして、テ... - [メニュー設定：【ご注意】モバイルメニューは使用できません](https://cocoon-grayish.na2-factory.com/notes-mbmenu-nouse/): Cocoonのメニュー設定で、モバイルメ... - [サイトフォントの設定（※24/03/26 Macでの游ゴシック体表示について追記）](https://cocoon-grayish.na2-factory.com/manual-site-font/): サイトフォントは、サイト全体に適用される... - [キャッチフレーズの設定](https://cocoon-grayish.na2-factory.com/manual-catchphrase/): キャッチフレーズは、フロントページのメイ... - [プロフィールボックスの設定](https://cocoon-grayish.na2-factory.com/manual-profbox/): サイト運営者のプロフィールを設定する手順... - [メニュー設定：タブレット・スマホのヘッダー・フッターモバイルボタン](https://cocoon-grayish.na2-factory.com/manual-sp-menu/): タブレット・スマホ時（画面幅1023px... - [メインビジュアルやアイキャッチの画像作成には、Canvaがおすすめ](https://cocoon-grayish.na2-factory.com/howto-img-make/): メインビジュアルやアイキャッチの画像を、... - [サイトタイトルと英字フォント選択](https://cocoon-grayish.na2-factory.com/site-title-set/): スキンの初期設定として、サイトのタイトル... - [Cocoon設定のプレビューについて](https://cocoon-grayish.na2-factory.com/cocoon-set-preview/): Cocoon設定であらゆるタブにプレビュ... - [スキン制御について](https://cocoon-grayish.na2-factory.com/about_skin_ctrl/): grayishはCocoon設定のデザイ... - [メニュー設定：PCグローバルナビ](https://cocoon-grayish.na2-factory.com/manual-pc-menu/): PC時（画面幅1024px以上）のヘッダ... - [ブロックエディタ見本 コアブロック](https://cocoon-grayish.na2-factory.com/block-sample-core/): 固定ページや投稿ページの記事作成に使用す... - [ブロックエディタ見本 Cocoonブロック](https://cocoon-grayish.na2-factory.com/block-sample/): 固定ページや投稿ページの記事作成に使用す... - [フロントページ設定：フロントページタイプ](https://cocoon-grayish.na2-factory.com/top-index-fronttype/): フロントページの画面いっぱいのメインビジ... - [フロントページ設定：メインビジュアル](https://cocoon-grayish.na2-factory.com/manual-top-mv/): フロントページのメインビジュアルについて... --- ## Works - [グレイッシュ・サラダ・バー](https://cocoon-grayish.na2-factory.com/works/works-saladabar/): overview 概要 群馬県前橋市付近... - [グレイ・フォト](https://cocoon-grayish.na2-factory.com/works/works-photolab/): Color Text Color #53... --- # # Detailed Content ## 固定ページ ### エックスサーバーお友達紹介プログラム - Published: 2024-10-01 - Modified: 2024-12-07 - URL: https://cocoon-grayish.na2-factory.com/xs-friend-program/ これからエックスサーバーのご利用を検討されている方へ エックスサーバーのお友達紹介プログラム をご存知ですか？ エックスサーバーお友達紹介プログラムより：https://www. xserver. ne. jp/friend. php エックスサーバーのキャッシュバックなどのキャンペーンと併用可能！ さらにお友達紹介の割引が受けられます！！ エックスサーバーのお友達紹介プログラムは、メール又はLINEでの案内しか認められていないため、当サイトではメールでリンクを送付させていただきます。 お友達紹... --- ### for_demo_pattern - Published: 2024-03-19 - Modified: 2025-04-07 - URL: https://cocoon-grayish.na2-factory.com/for_demo_pattern/ About このブログについて WordPressTheme Cocoonのスキン、grayishのブログのフロントページを作るデモページです。各セクションのパターンはダウンロード可能になっています。使用している画像はダミーです。実際にご利用の際はご自身の用意した画像に置換してください。 More PickUp! 上段：大きい横型、下段：4列 New Post 新着記事 More Category おすすめカテゴリー3選 Design フロントページタイプやCocoonブロック、コアブロック、ウ... --- ### お問い合わせ事例集 - Published: 2024-03-11 - Modified: 2025-05-05 - URL: https://cocoon-grayish.na2-factory.com/contact-jirei/ これまで当サイトに寄せられたお問い合わせ内容について、事例集としてまとめています。 不具合発見につながったものに関しては、不具合情報の記事に詳細を書いておりますので、ここではそれ以外の事例についてご紹介します。→不具合情報の一覧はこちら もし、スキンの不具合では？と思われた時、問い合わせフォームを利用する前に、ここで解決できる現象かもしれませんので、以降の内容をまずはご確認ください。 WordPressの設定やCocoon設定についてのお問い合わせも多い感触です。 勿論、スキンの問題なのか、そう... --- ### 記事内ページャーの確認 - Published: 2023-10-03 - Modified: 2023-10-03 - URL: https://cocoon-grayish.na2-factory.com/pager-testpage/ これはデモ用の固定ページです。 記事内にページ区切りが使用されて記事下にページャーが表示されるときの表示確認用です。 コアのページ区切りブロックを使用しています --- ### ライセンスについて - Published: 2023-09-23 - Modified: 2023-09-23 - URL: https://cocoon-grayish.na2-factory.com/skin-licence/ grayishはWordPressテーマCocoon用のスキンです。 ライセンス Cocoonは100％ GPLですので、当スキンも100% GPLとなります。 どなたでも自由にご利用いただけます。 利用規約 Cocoonの利用規約に従います。 ご利用前に以下のCocoonの利用規約をご覧ください。 https://wp-cocoon. com/terms-of-use/ --- ### プライバシーポリシー - Published: 2023-09-22 - Modified: 2023-09-23 - URL: https://cocoon-grayish.na2-factory.com/privacy-policy-2/ 基本方針 当サイトは、個人情報の重要性を認識し、個人情報を保護することが社会的責務であると考え、個人情報に関する法令を遵守し、当サイトで取扱う個人情報の取得、利用、管理を適正に行います。 適用範囲 本プライバシーポリシーは、お客様の個人情報もしくはそれに準ずる情報を取り扱う際に、当サイトが遵守する方針を示したものです。 個人情報の利用目的 当サイトは、お客様からご提供いただく情報を以下の目的の範囲内において利用します。 ご本人確認のため お問い合わせ、コメント等の確認・回答のため メールマガジン... --- ### 運営者情報 - Published: 2023-09-01 - Modified: 2025-02-13 - URL: https://cocoon-grayish.na2-factory.com/about/ grayishの制作者、ななふの紹介ページです。 フリーランスWebデザイナーです。 「ななふ」というのは、屋号のNa2factory（ななファクトリー）の略称です。 ななふ 平仮名かつ短い方が覚えやすいかと思いまして、 ななふと呼んでください！ プロフィール画像を変更しました！ 25/02/13イラストレータのナツノマエコ様に、とっても可愛らしいイラストを描いていただきましたー！！ナツノマエコ様は私がデザインの勉強を開始したころからInstagramでフォローさせていただいており、現在ココナラ... --- ### お問い合わせ - Published: 2023-08-02 - Modified: 2025-04-16 - URL: https://cocoon-grayish.na2-factory.com/for_skin_contact/ このサイトのマニュアルを読んでも使い方が分からない点や、お気付きの事がありましたら、こちらのフォームからご連絡いただけますと幸いです。 お問い合わせの前に これまで寄せられたお問い合わせの内容をまとめたページを用意しました。 まずはこちらで同じような事例があるかどうか、ご確認ください。 https://cocoon-grayish. na2-factory. com/contact-jirei/ 個別のカスタマイズについて よく、「〇〇のXXを消したいので方法を教えてください！」というお問い合わ... --- ### NewPost - Published: 2023-08-01 - Modified: 2023-08-01 - URL: https://cocoon-grayish.na2-factory.com/newpost/ --- ### Cocoon-grayish-TOP - Published: 2023-08-01 - Modified: 2025-04-24 - URL: https://cocoon-grayish.na2-factory.com/ https://youtu. be/uf6vJh1GW9c https://youtu. be/Ad7jqN-aFjE 公開中 メインビジュアルに動きが欲しいな〜と思っている方向けに、動画又はスライダーを設定できるプラグインを作りました。プラグインのダウンロードと、使用方法の記事は以下になります。 https://cocoon-grayish. na2-factory. com/plugin-mv-add/ プラグインを使用した動画版とスライダー版のデモサイトを作りましたので、是非ご覧ください！... --- --- ## 投稿 ### Cocoon2.8.5.5以降(正式配布ver2.8.6)にバージョンアップ後、配布プラグインの更新が必要になります - Published: 2025-04-25 - Modified: 2025-05-28 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-23/ - カテゴリー: 更新情報 - タグ: プラグイン ※25/05/26 わいひらさんより、ver2. 8. 6へのアップデートの発表がありました！公式の記事はこちらスキン自体の変更はありません。Cocoonの現在（25/04/25時点）配布されている最新バージョンは2. 8. 5. 4です。次のCocoonのバージョン（2. 8. 5. 5以降）で、配布プラグインの更新が必要になります。 現時点では予告という形になりますが、G. Wも近いので早めにお知らせさせていただきます。 次のCocoonのバージョン（2. 8. 5. 5以降）では、Coco... --- ### フロントページ向けの新着記事パターンを追加。スマホで記事を2列ずつ表示。 - Published: 2025-04-02 - Modified: 2025-04-02 - URL: https://cocoon-grayish.na2-factory.com/for-frontpage-blkpattern-newpostadd/ - カテゴリー: カスタマイズ, サイト型, マニュアル - タグ: CSS, パターン, プラグイン Cocoon grayishのフロントページ向けの新着記事のパターン2つを追加します。 2つとも、スマホ（SP）（画面幅480px以下）のとき、記事を2列に表示するパターンになります。 動画で見てみる↓ スマホで記事を2列に表示 追加パターンは以下2つです。 ①grayish-cstm-pat-8-newpost. json PC時：3列タブレット（画面幅834px以下)：2列 今まで配布している新着記事パターン（grayish-cstm-pat-2-newpost. json）とPC時の表示は... --- ### Cocoonのカスタムテキストでテキスト装飾を追加できます。サンプルコード紹介：ドット、丸、ゴマ、三角、波やストライプの下線など - Published: 2025-03-21 - Modified: 2025-03-24 - URL: https://cocoon-grayish.na2-factory.com/cocoon-cstmtext-variation/ - カテゴリー: ブログTips, マニュアル, 記事作成 - タグ: CSS, ブロックエディター Cocoonにはデフォルトでテキストの装飾機能が豊富にあり、記事を書く際に簡単に一部分のテキストのカラーを変えたり、太字にしたり、打ち消し線をつけたり・・・とっても便利ですよね。 テーマデフォルトでも十分に装飾できるのですが、オリジナルの装飾を追加したい！ということもあると思います。 また、デフォルトの装飾機能と同じようにボタンをポチッと押すだけで使えたらいいですよね。 今回ご紹介するのは、そのような希望を叶えてくれる、「カスタムテキスト」機能です。※カスタムテキストは、Cocoon ver2.... --- ### Cocoon ver2.8.5.1でのgrayishアップデート情報と、配布プラグインアップデートのお願い - Published: 2025-03-09 - Modified: 2025-03-09 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-22/ - カテゴリー: 不具合情報, 更新情報 - タグ: 不具合 Cocoon ver2. 8. 5. 1でのgrayishのアップデート情報についてお知らせいたします。 https://wp-cocoon. com/2-8-5/ また、Cocoonをアップデートすると、grayish用に配布しているプラグインについてもアップデートが必要になりますので、ご利用の方はご確認ください。（※MV addは対象外です） grayish用プラグインのアップデートについて Cocoonをver2. 8. 5. 1にアップデートすると、grayish用に配布している以下プラ... --- ### grayish色見本サイトを作りました！カラーコードをコピペしてすぐに使えます - Published: 2025-01-09 - Modified: 2025-01-09 - URL: https://cocoon-grayish.na2-factory.com/color-samplesite-open/ - カテゴリー: ブログTips, 更新情報 - タグ: カラー設定, テーマカスタマイザー grayishのカラー設定をデフォルトから変更したいけど、どんな色を組み合わせたらいいのか、お困りの方へ・・・ 管理人が考えてみた、色見本を試せるサイトを作ってみました！ 現在９パターンご紹介しております。 カラーコードは各記事の中で表にしておりますので、コピペしてすぐに試せます。 ハート 是非ご覧になってみてください！！ grayish色見本サイト 以下クリックで色見本サイトに飛びます！ 色の選択ドロップダウンメニューは、フロントページ、各一覧ページ、投稿などで試せるように全ページに表示させて... --- ### Cocoon ver2.8.3でのgrayish不具合報告 - Published: 2024-12-24 - Modified: 2024-12-24 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-21/ - カテゴリー: 不具合情報, 更新情報 - タグ: 不具合 Cocoon ver2. 8. 3でのgrayishの不具合情報についてお知らせいたします。 不具合報告：もしもアフィリエイトのかんたんリンク使用時、表示が崩れる 開発版で修正済みです ※24/12/24 Cocoonの開発版の最新（ver2. 8. 3. 2以降）で修正済みです。 この不具合でお困りの方は、大変お手数ですが以下手順で開発版のCocoonをダウンロードしてご利用ください。 公式の手順になります。CocoonのGithubから開発版の最新バージョンをダウンロードし、管理画面からテー... --- ### 【お知らせ】デモサイトのデザインリニューアルとココナラ店について - Published: 2024-12-23 - Modified: 2025-04-10 - URL: https://cocoon-grayish.na2-factory.com/info-demo-site/ - カテゴリー: 更新情報 特にスキンの情報ではないのですが、お知らせまで！ サラダバーデモサイトのフロントページのデザインリニューアル デモサイトの一つ、grayish-salada-barのフロントページについて、メインビジュアル下に続くデザインをリニューアルしました！ サラダバーのデモサイトを見てみる！ リニューアルのコンセプト 群馬県前橋市付近にある、おしゃれなサラダバーからのデザイン、サイト制作ご依頼を受けたとして制作しました。 サイトの目的はご予約での来店増加で、主要な客層は30代〜50代の女性、大人っぽい雰囲... --- ### Cocoon ver2.8.1.1でのgrayish不具合報告 - Published: 2024-11-28 - Modified: 2024-12-24 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-20/ - カテゴリー: 不具合情報, 更新情報 Cocoon ver2. 8. 1. 1でのgrayishの不具合情報についてお知らせいたします。 不具合報告：ブロックエディタでアコーディオンブロックを開いたときや、サイドバーのカテゴリーやタグ設定欄の表示が伸びる 修正済みです ※24. 12. 02追記 Cocoon ver2. 8. 2にテーマアップデートを行うことで不具合解消されます。 https://wp-cocoon. com/2-8-2/ ※24/11/30 Cocoonの開発版の最新（ver2. 8. 1. 2以降）で修正済みで... --- ### バリアブルフォントのサンプルとカスタマイズ例をご紹介します - Published: 2024-11-27 - Modified: 2025-01-09 - URL: https://cocoon-grayish.na2-factory.com/grayish-variable-font/ - カテゴリー: カスタマイズ, マニュアル - タグ: CSS, フォントの指定, プラグイン Cocoon ver2. 8. 0で、grayishで読み込んでいる英字Googleフォントについて、仕様変更を行っております。（仕様変更の詳細はこちら） この記事では、新しく使用できるようになった各フォントのウェイト（太さ）についてサンプルを載せています。 また、カスタマイズ例などもご紹介します。 太いウェイトが使えるようになったので以下のようなカスタマイズもできるように！ 版ズレ風！バナーとかでよく見るかわいい感じ Cocoon-grayish 日本語もかわいい テーマカスタマイザーのフォン... --- ### WordPress6.7以降へアップデートによるgrayish不具合報告 - Published: 2024-11-27 - Modified: 2024-11-27 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-19/ - カテゴリー: 更新情報 WordPress6. 7以降にアップデートした場合に発生するgrayishの不具合情報と、修正内容についてお知らせいたします。 尚、開発版のCocoonではすでに修正を行っていますので、本記事の内容でお困りの方は開発版最新のCocoonを入手していただき、テーマのアップデートを行っていただければと思います。 https://wp-cocoon. com/manual-update-of-cocoon-theme/ 不具合報告：エディタでタブ見出しボックスの見出し背景色がスキンカラーではなく、グ... --- ### Cocoon ver2.8.0でのgrayish仕様変更について - Published: 2024-11-11 - Modified: 2024-11-27 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-18/ - カテゴリー: 更新情報 Cocoonのver2. 8. 0にて、grayishで仕様変更がありますので事前に内容をお知らせします。 不具合修正：タブブロックのタブ数が多い場合、タブ部分の表示が崩れる v2. 7. 9. 1での以下不具合を修正します。 子テーマの修正コードはバージョンアップ後は削除してください 不具合発見の記事にて、ご案内させていただいた子テーマのCSSの修正コードをご利用になっている方は、大変お手数ですがバージョンアップの際に削除していただきますよう、よろしくお願いいたします。 ハート 以下の修正コー... --- ### メインビジュアルと重なる間、ナビメニューのカラーを変えるカスタマイズ【PC表示限定】 - Published: 2024-10-29 - Modified: 2024-12-23 - URL: https://cocoon-grayish.na2-factory.com/cstm-mv-navi-color/ - カテゴリー: カスタマイズ, マニュアル - タグ: CSS, JavaScript, アニメーション, ヘッダー フロントページかつPC表示（画面幅1024px以上）のとき限定のカスタマイズになります。 ハート メインビジュアルと重なる間だけ、ナビメニューのテキストカラーと背景色を変えたいな〜！ メインビジュアルにどんな画像を設定するかによってですが、その上に重なる間だけ、ナビメニューのテキストカラーや背景色を変えたいことがあると思います。 カスタマイズ対象：以下のナビメニュー スクロールに連動して、メインビジュアルの表示が終わったら、通常のテーマカスタマイザーで設定しているカラーに戻るカスタマイズです。 ... --- ### Cocoon ver2.7.9.1でのgrayish不具合修正と仕様変更 - Published: 2024-10-28 - Modified: 2024-11-15 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-17/ - カテゴリー: 更新情報 Cocoon ver2. 7. 9でのgrayishの不具合情報と、修正内容、仕様変更についてお知らせいたします。 https://wp-cocoon. com/2-7-9/ 不具合報告：タブブロックのタブ数が多い場合、タブ部分の表示が崩れる v2. 7. 9. 1での不具合を発見したのでお知らせいたします。（※24/10/31追記） タブブロックのデフォルト（横スクロールタイプ）にて、タブ数を多く設定している場合に発生します。 以下は不具合が分かりやすい為、円タイプの例です。（他のタイプでも同... --- ### Cocoon ver2.7.8でのgrayish仕様変更。ブログ型フロントページのMoreボタンをView Moreへ変更 - Published: 2024-10-07 - Modified: 2024-11-11 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-16/ - カテゴリー: 更新情報 Cocoon ver2. 7. 8でのgrayishの仕様変更についてお知らせいたします。 https://wp-cocoon. com/2-7-8/ ブログ型フロントページのMoreボタンのデフォルトテキストを「View More」に変更しました。 grayishをブログ型でご利用で、Cocoon設定＞インデックスタブで タブ一覧 カテゴリーごと（2,3カラムも同様） の設定をされている方に影響があります。 【変更対象】 Cocoon設定>インデックスで、タブ一覧を選択時、最新の記事以外の、表... --- ### メインビジュアルをPCとモバイルで別画像にするカスタマイズ【CSSのみ】 - Published: 2024-09-27 - Modified: 2024-10-29 - URL: https://cocoon-grayish.na2-factory.com/cstm-mv-pcsp-change/ - カテゴリー: カスタマイズ, マニュアル - タグ: CSS, タブレット・スマホ, ヘッダー ハート grayishのメインビジュアルの画像について、PC時とモバイル時で別の画像にしたい！ という方へのカスタマイズ参考記事になります。 子テーマのstyle. cssにモバイル用（画面幅1023px以下）の画像のURLを設定するだけの簡単なカスタマイズです。 ついでにメインビジュアルの表示位置を調整するコードも紹介します。 なお、プラグイン「grayish MV add Plugin」をご利用の方は対象外の内容となります。 完成イメージ デモサイトでの動作を動画に撮りました。 画面幅が10... --- ### Cocoonの新着記事ブロックなどをスライダーにできるプラグイン作りました※※Cocoon2.8.5.5以降にアップデート後、プラグインもv2.0.0にアップデートしてください - Published: 2024-09-06 - Modified: 2025-05-26 - URL: https://cocoon-grayish.na2-factory.com/plugin-postautoplay/ - カテゴリー: カスタマイズ, マニュアル, 更新情報 - タグ: アニメーション, プラグイン Cocoonは新着記事や人気記事などの一覧を、ブロックやショートコードを配置するだけでサイト内のいろいろな場所に表示できるようになっています。 今回は、新着記事などを横方向に動くスライダーにするプラグイン「grayish Post Autoplay Plugin（グレイッシュ・ポストオートプレイ・プラグイン）」を作りましたのでご紹介します。 Cocoon v2. 8. 5. 5〜(2. 8. 6) 25/05/26Cocoonをver2. 8. 5. 5（正式配布ver2. 8. 6）にアップデ... --- ### 独自ドメイン取得したら、SSL化(httpからhttpsへ)してからサイトを作ろう。中途半端なSSL化にご注意 - Published: 2024-09-02 - Modified: 2024-09-02 - URL: https://cocoon-grayish.na2-factory.com/setup-domain-ssl/ - カテゴリー: マニュアル, 確認・注意事項 WordPressでこれからブログを始める方や、コーポレートサイトを作ろうとされている方へ向けて、独自ドメイン取得後すみやかにSSL化を済ませることをおすすめしたいと思います。 この記事のSSL化とは、サーバー各社の提供している無料独自SSL設定を対象としています。 SSL化前にWordPressをインストールしてサイトを作っていっても、後で適切にSSL化できれば問題ないのですが、中途半端に設定したことでトラブルになるケースがあるため、記事にしたいと思います。 ご利用のレンタルサーバーによって設... --- ### Cocoon新着記事ショートコードの新機能で任意の記事一覧を表示可能に。初心者さん向けに使い方を解説します - Published: 2024-08-28 - Modified: 2024-08-28 - URL: https://cocoon-grayish.na2-factory.com/about-cocoon-newpost-order/ - カテゴリー: カスタマイズ, マニュアル - タグ: コアブロック, ショートコード, ブロックエディター Cocoonのver2. 7. 5より、便利な新機能が追加されました！ 新着記事ショートコードに、ナビカードのように任意の記事一覧を表示できる機能（ordered_posts）が追加されました。 新着記事ショートコードは新着記事ブロックと同様な機能で、基本的にその名の通り、新しい記事から順番に一覧を表示できる機能です。 v2. 7. 5で追加されたオプションordered_postsを使用することで、指定した記事を、ユーザーの表示したい順番で表示できるようになりました。 ハート 表示したい記事の... --- ### ロゴ設定の機能追加します。※Cocoon ver2.7.4.1以降で利用可能（24/09/02 独自ドメインSSL化に関する内容の追加） - Published: 2024-06-13 - Modified: 2024-11-19 - URL: https://cocoon-grayish.na2-factory.com/add-headerlogo-setting/ - カテゴリー: マニュアル, 更新情報 - タグ: テーマカスタマイザー, ヘッダー grayish機能追加のお知らせです。 PC時のフロントページ以外のヘッダーロゴと、画面幅1023px以下のモバイル時のヘッダーモバイルボタンのロゴについて、個別に任意の画像を設定可能になります。 Cocoon ver2. 7. 4. 1以降で利用可能です。 PC時のフロントページ以外のヘッダーロゴについては、Cocoon設定>ヘッダー>ヘッダーロゴでロゴ画像を設定した場合のみ、本機能が有効になります。ロゴ画像を設定していないサイトテキストの状態では無効になります。 Cocoon ver2. 7... --- ### 境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。※24/12/24 なみなみや円弧についてプラグインとCSS修正 - Published: 2024-06-04 - Modified: 2024-12-24 - URL: https://cocoon-grayish.na2-factory.com/for-frontpage-blkpattern-maskzig/ - カテゴリー: カスタマイズ, サイト型, フロントページ, マニュアル - タグ: CSS, パターン, ブロックエディター 24/12/24 なみなみ、円弧、なみなみラインについて、MacPCのSafariや、iOS端末（iPhoneやiPadなど）で画面幅を変えた場合に表示が崩れる現象を確認した為、プラグインgrayish-cstmpat-cssをver1. 1. 0にバージョンアップしました。 プラグインをご利用の方は、お手数ですがGithubより最新版をダウンロードしてアップデートをお願いいたします。 追加CSSクラス名の変更はありません。プラグインのアップデートのみ、行っていただければと思います。 ただし、本... --- ### Cocoon ver2.7.3.5でのgrayish不具合情報※ver2.7.4で修正 - Published: 2024-05-29 - Modified: 2024-11-11 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-15/ - カテゴリー: 更新情報 現在公開されているCocoon ver2. 7. 3. 5でのgrayishの不具合についてお知らせいたします。 ※24/06/03この記事の不具合は、Cocoon ver2. 7. 4で修正されています。 https://wp-cocoon. com/2-7-4/ 【修正済み】モバイルスライドインメニューを使用時、モバイルメニューにSNSボタンと検索ボックスが表示されない 現象 Cocoonのデフォルトでは、管理画面＞外観＞メニューでヘッダーメニューに設定したメニューがPC時のグローバルメニュ... --- ### メインビジュアルにスライダーや動画を設定できるプラグイン作りました※Cocoon2.8.5.5以降にアップデート後、プラグインもv2.0.0にアップデートしてください - Published: 2024-05-05 - Modified: 2025-05-26 - URL: https://cocoon-grayish.na2-factory.com/plugin-mv-add/ - カテゴリー: カスタマイズ, マニュアル, 更新情報 - タグ: アニメーション, パターン, プラグイン grayish専用になりますが、メインビジュアルに動きが欲しい方がいらっしゃるかもと思い、スライダー又は動画を設定できるプラグイン「grayish MV add Plugin」を作りました。 Cocoon v2. 8. 5. 5〜(2. 8. 6) 25/05/26Cocoonをver2. 8. 5. 5(正式配布ver2. 8. 6)にアップデート後は、プラグインをv2. 0. 0にアップデートしてご利用ください。アップデートが必要な理由など詳しい説明については、「Cocoon2. 8. 5.... --- ### Cocoonタブブロックのgrayishスタイル見本 - Published: 2024-04-30 - Modified: 2024-11-19 - URL: https://cocoon-grayish.na2-factory.com/cocoon-tabblk-style/ - カテゴリー: デザイン見本, ブロックエディタ見本 - タグ: Cocoonブロック, CSS, ブロックエディター 見出し Cocoon v2. 8. 0にアップデートすると、以下記載のv2. 7. 9. 1の不具合が解消されます。 もし子テーマのstyle. cssに以下記載の修正コードをご利用の場合は、削除の必要があります。大変お手数ですが各自でご対応お願いいたします。（詳細はこちらの記事を御覧ください。） v2. 7. 9. 1の不具合情報 Cocoon v2. 7. 9. 1にアップデートすると、タブブロックの横スクロールタイプにて、タブ数を多く設定している場合に表示が崩れる不具合があります。 htt... --- ### Cocoon ver2.7.3でのgrayish仕様変更のお知らせ - Published: 2024-04-25 - Modified: 2024-11-11 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-14/ - カテゴリー: 更新情報 Cocoonのver2. 7. 3でgrayishの仕様変更を行った点についてお知らせいたします。 Cocoonのバージョンアップ記事は以下です。 https://wp-cocoon. com/2-7-3/ ver2. 7. 3で仕様変更した内容について ①タブブロックのスタイルを追加 Cocoonに新しくタブブロックが追加されました！＾＾ 投稿や固定ページの本文だけでなく、パターンを使用すればサイドバーや他のウィジェットの場所でも簡単に表示可能です。 フロントページについても、アイディア次第で... --- ### モバイルの設定 - Published: 2024-04-18 - Modified: 2024-11-18 - URL: https://cocoon-grayish.na2-factory.com/mobile-setting/ - カテゴリー: マニュアル, 基本設定 - タグ: Cocoon設定, スキン制御, タブレット・スマホ この記事では、Cocoon設定＞モバイルタブで設定可能な内容について説明いたします。 モバイル時（タブレット・スマホ）でメインビジュアルにサイトタイトル又はロゴが表示されない、というお問い合わせが何回かあったので記事にしました。 モバイルメニュー grayishではモバイルメニューはスキン制御により、 ヘッダー・フッターモバイルボタン に固定されます。 ※ヘッダー・フッターモバイルボタンの設定方法は以下の記事をご参照ください。 https://cocoon-grayish. na2-factor... --- ### サイト型のフロントページ向け：滑らかな曲線の境界線ブロックをつくる（円弧・波）※カバーブロック利用で簡単に使えるように改良！ - Published: 2024-04-04 - Modified: 2024-05-24 - URL: https://cocoon-grayish.na2-factory.com/for-frontpage-blkpattern-cir-wave/ - カテゴリー: カスタマイズ, サイト型, マニュアル - タグ: パターン 改良しました！ 24/05/07追記 カスタムHTMLブロックで作成する方法を紹介していましたが、コードに不慣れな方には扱いにくいだろうな・・・と思い、カバーブロックで利用できるように改良しました！ 記事の内容を、より多くの方に使用してもらえるであろう改良版に合わせて変更しました。 カバーブロックのテキストカラーを変更することで、エディタ上で色変更が可能です。 パターンも用意しましたので、ダウンロード＆インポートしてすぐにご利用可能です。 記事内のコピペ用CSSも更新してます。 カスタムCSSの... --- ### Cocoon ver2.7.2.2でのgrayish仕様変更のお知らせ - Published: 2024-04-01 - Modified: 2024-11-11 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-13/ - カテゴリー: 更新情報 Cocoonのver2. 7. 2. 2でgrayishの仕様変更を行った点についてお知らせいたします。 24/04/02 追記 ヘッダー・アピールエリアの背景固定iOS端末の対応について、Cocoon ver2. 7. 2. 3で仕様から削除されました。（使用方法によって不具合になってしまうユーザーさんがいらっしゃったようです）grayishで行った仕様変更については特に影響はないので、このままでいきます。 背景固定iOS端末対応については、必要な方は従来通り、個別にカスタマイズして対応すると... --- ### フロントページ向けのブロックパターン詰め合わせ(デモページあり）※Cocoon ver2.8.5.1へアップデート後はプラグインもアップデートしてください - Published: 2024-03-20 - Modified: 2025-05-01 - URL: https://cocoon-grayish.na2-factory.com/for-frontpage-blkpattern/ - カテゴリー: カスタマイズ, サイト型, マニュアル - タグ: CSS, パターン, プラグイン grayishでサイト型フロントページを作りたい方へ向けて、よくあるセクションのパターンをまとめて紹介させていただきます。 アップデートのお願い 25. 03. 11 追記Cocoonをver2. 8. 5. 1にアップデート後、NewPostとRankingのパターンをご利用の場合、日付情報のアイコン（投稿日と更新日のアイコン）が2つづつ表示されてしまうと思います。大変お手数ですが、v1. 1. 1以降にアップデートしてください。 また、エディタ上では新着・人気記事一覧ブロックの日付情報のON... --- ### Cocoonの新機能でパターンデータをシェア可能に！作例のパターンをシェア&使い方 - Published: 2024-03-08 - Modified: 2024-09-28 - URL: https://cocoon-grayish.na2-factory.com/cocoon-pattern-share/ - カテゴリー: カスタマイズ, サイト型, マニュアル - タグ: CSS, パターン, ブロックエディター 前に公開した記事にて、サイト型でフロントページに使えるブロックの作例を紹介しています。 続編も準備中！ https://cocoon-grayish. na2-factory. com/img-fullwide-code/ 上記記事にて、ブロックの作成手順や、CSSも一式載せましたが、正直・・・・ ハート ブロックの配置や追加CSSクラス付けたり、やることが多くてめんどくさい！ って思われたんじゃないかなあ〜〜と。(;_;) 私自身も記事を書くのが結構たいへんで時間かかってしまい、効率悪く感じま... --- ### Cocoon ver2.7.1でのgrayish仕様変更のお知らせ - Published: 2024-02-26 - Modified: 2024-11-11 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-12/ - カテゴリー: 更新情報 Cocoonのver2. 7. 1でgrayishの仕様変更を行った点についてお知らせいたします。 Cocoon ver2. 7. 0での不具合については、ver2. 7. 1にアップデートすることで解消されます。 ver2. 7. 0でのgrayish不具合 不具合内容は以下記事にまとめています。 https://cocoon-grayish. na2-factory. com/rel-infor-11/ ver2. 7. 1で仕様変更した内容について ver2. 7. 1でのgrayish仕... --- ### サイト型フロントページにも使える！カバーブロックを画面の幅いっぱいに広げるサンプルコード - Published: 2024-02-21 - Modified: 2025-01-16 - URL: https://cocoon-grayish.na2-factory.com/img-fullwide-code/ - カテゴリー: カスタマイズ, サイト型, マニュアル - タグ: CSS 今回は、grayishでサイト型のフロントページの装飾などに使える、カバーブロック（画像ブロックもOK）を画面幅に広げるサンプルコードを紹介させていただきます。 grayishを使用しないCocoonのデフォルトの場合なども、同じ様に使用可能です。（※ただし、注意するポイントあり。詳細はこちら） フロントページに限らず、１カラムで作成した投稿や固定ページで使用できる内容になります。 ２カラムのページでこのサンプルコードを使用されると、画像がメインカラムからはみ出て実用に耐えない表示になってしまい... --- ### サイト型にしたい場合の準備編 - Published: 2024-02-09 - Modified: 2025-03-24 - URL: https://cocoon-grayish.na2-factory.com/sitetype-make-setting/ - カテゴリー: カスタマイズ, サイト型, マニュアル grayishをご利用の方からの問い合わせにて、サイト型で、フロントページを固定ページで作りたい、というお声を多数頂いております。 この記事では、準備編として、grayishを使ってサイト型で作るための表示設定と、フロントページ、新着記事一覧ページのページ設定についてご紹介します。 サイト型で作るための手順は、grayishではない他スキンを使用されていても、スキンを使用していなくても、Cocoonではないテーマをご利用の場合でも共通の手順になります！ サポート対象外です サイト型で作成される場... --- ### CocoonのOGP設定。X（旧Twitter）やFacebookへシェアしたときの表示を確認しよう※2024年２月現在 - Published: 2024-02-07 - Modified: 2024-02-12 - URL: https://cocoon-grayish.na2-factory.com/about-cocoon-ogp-image/ - カテゴリー: マニュアル, 基本設定 - タグ: Cocoon設定 この記事では、CocoonのOGP設定方法と、SNS（特にX）へシェアした場合の表示の確認方法などを書いています。Cocoonをご利用の場合、スキンの有り無しに関わらず、共通の内容になります。 ハート 特にホームイメージについて、何回か設定方法についてお問い合わせをいただいたので、記事にします！ CocoonのOGP設定方法については公式のマニュアルもありますし、過去いろんなサイトで解説されてきていると思います。 ただ、ここ最近（2022年〜2023年）X（旧Twitter）の仕様変更が続いてお... --- ### Cocoon ver2.7.0でのgrayish不具合情報＆仕様変更のお知らせ - Published: 2024-02-06 - Modified: 2024-11-11 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-11/ - カテゴリー: 更新情報 （24/02/06)Cocoonのv2. 7. 0がリリースされると思いますが、残念ながらリリース前にgrayishの不具合が出てしまっているのでお知らせいたします。今後も何か発覚次第、随時更新して参ります。 Cocoon v2. 6. 9での不具合については、v2. 7. 0にアップデートすることで解消されます。 v2. 6. 9でのgrayish不具合 不具合内容は以下記事にまとめています。 https://cocoon-grayish. na2-factory. com/rel-infor... --- ### Cocoon ver2.6.9でのgrayish不具合情報（※24/02/01追記あり） - Published: 2024-01-17 - Modified: 2024-11-11 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-10/ - カテゴリー: 更新情報 現在公開されているCocoon ver2. 6. 9で判明している、grayishの不具合や修正情報などについて記載しています。 24/01/27 グローバルナビがクリックできない問題について追記24/02/01 H3見出しの編集時、カーソルが動かない問題について追記24/02/05 英フォント「Inknut Antiqua」選択時、PCグローバルナビと、モバイルのハンバーガーメニュー内の検索Boxが縦長になるについて追記 画像は拡大表示できます この記事内の画像について、拡大表示が可能になって... --- ### 記事の装飾に使える、スキン独自のカラーパレット - Published: 2023-12-01 - Modified: 2025-01-10 - URL: https://cocoon-grayish.na2-factory.com/skin-org-colorpalette/ - カテゴリー: マニュアル, 記事作成 - タグ: カラー設定, ブロックエディター 記事の装飾に使用可能な、スキン独自のカラーパレットについて紹介いたします。 スキン独自のスタイルを当てていないブロックにも使用できるので、良かったら使ってください・・！！ ハート 管理人もちょくちょく使っています！ スキン独自のカラーパレット 投稿や固定ページを作成する際のブロックエディタ内で利用可能です。 例えば段落ブロックで文章を入力するとき、ブロックエディタの「設定」を表示させていると、段落に使える様々な設定が見えていますよね。 Cocoonの独自のボーダー設定、スタイル、ブロック下余白な... --- ### 子テーマのCSSでカスタマイズしたい場合 - Published: 2023-11-29 - Modified: 2023-11-30 - URL: https://cocoon-grayish.na2-factory.com/skin-child-customize/ - カテゴリー: カスタマイズ, マニュアル - タグ: CSS, スキン制御 子テーマのCSSで細かく自分の好みに合わせてカスタマイズしたい方に向けた内容となります。 例えば、以下のようなケースがあると思います。 grayishでスキン制御されているフォントサイズ等について、スキン制御を編集せずにもっと手軽にカスタマイズしたい カスタマイザーでカラー変更したけど、特定の場所は個別でカラーを設定したい 本記事のコードは推奨するものではなく、参考用です。各自のカスタマイズ内容によってはうまくいかない場合もありますので、予めご了承ください。 子テーマのCSS等をカスタマイズされ... --- ### スキンの複雑（高度）なカスタマイズをする場合 - Published: 2023-11-22 - Modified: 2024-01-09 - URL: https://cocoon-grayish.na2-factory.com/skin-ctrl-customize/ - カテゴリー: 確認・注意事項 - タグ: Cocoon設定, スキン制御 grayishのスキン制御(option. csv)の変更や、functions. phpなどのファイルを直接編集するなどの複雑（高度）なカスタマイズを行いたい場合の内容になります。 子テーマを有効化していて、FTPソフトを利用する前提となります。 記事の内容のまとめ：以下の流れを推奨します。 親テーマのスキンデータをFTPソフトでご自身のPCにダウンロード→編集→子テーマの下にFTPソフトでアップ→子テーマのスキンとして使用する スキン制御を変更すると表示が崩れるなど、全体のレイアウトに影響が... --- ### grayish、Cocoonに同梱していただきました！ - Published: 2023-11-22 - Modified: 2023-11-22 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-9/ - カテゴリー: 更新情報 この度、grayishはCocoonに同梱されることとなりました！！！※Cocoonのver2. 6. 9より ハート めちゃくちゃ光栄です・・・！ さらに、Cocoon制作者であるわいひら様に、grayishの紹介の記事まで書いていただきました！！！お忙しい中、本当にありがとうございます！！！ https://wp-cocoon. com/skin-grayish-topfull/ 気軽にgrayishをお試しいただけます Cocoon設定のスキンタブ＞スキン一覧からgrayishを選択してい... --- ### サイトロゴを簡単に作りたい。CanvaとAdobe Expressの使用例 - Published: 2023-11-01 - Modified: 2023-11-27 - URL: https://cocoon-grayish.na2-factory.com/kanten-logo-make/ - カテゴリー: ブログTips - タグ: Canva, 画像作成 サイトのロゴをテキストではなく画像で作りたい、と思う方も多くいらっしゃると思います。今回はgrayishでロゴ画像を使用したい場合に、無料かつ簡単に作る方法について書いていきたいと思います。 尚、grayishでのロゴ画像の推奨作成サイズは 幅 1000px 高さ 250px としています。 Canvaは作りやすいが、PNGの背景透過がプロ版のみ 以前メインビジュアルやアイキャッチを作成するには、Canvaがおすすめという記事を書きました。 https://cocoon-grayish. na2... --- ### 本サイトの記事の文章や画像、動画の修正について - Published: 2023-10-27 - Modified: 2023-11-20 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-8/ - カテゴリー: 更新情報, 確認・注意事項 本サイトの内容について、修正を行っている箇所についてお知らせします。 「トップページ」→「フロントページ」 スキン制作当初に「トップページ」として書いていた箇所について、「フロントページ」に変更を行っています。 記事内は大方修正できたと思うのですが、画像、動画には「トップページ」の表現が含まれていることがあります。 随時差し替え予定ですが、機能的に変更がない部分は修正しない場合もありますので、予めご了承いただければと思います。 スキン独自テーマカスタマイザーの項目変更 スキンv1. 0. 4より... --- ### ver1.0.6 リリースしました。不具合修正 - Published: 2023-10-25 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-7/ - カテゴリー: 更新情報 ver1. 0. 5について、Cocoonフォーラムの皆様からいただいた内容や自分で発見した不具合の修正を行いました。 不具合修正の概要 コンテンツ下部にウィジェットを置いた場合幅が狭くなる不具合修正 スクロールヒントのスキンスタイルを全てのテーブル対象へ変更 その他細かいスタイルの修正など Ver1. 0. 6をフロントページのダウンロードボタンから入手いただけます。以下のボタンをクリックするとフロントページに移動します。 ダウンロードはこちら（フロントページに移動します） Cocoon動作確... --- ### ver1.0.5 リリースしました。不具合修正 - Published: 2023-10-24 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-6/ - カテゴリー: 更新情報 ver1. 0. 4について、Cocoonフォーラムの皆様からいただいた内容や自分で発見した不具合の修正を行いました。 不具合修正の概要 コメントの画像についてaspect-ratio対象外に変更 投稿のページ送りナビ（デフォルト）について最初の投稿の時、NEXTボタンが左寄りになってしまう現象を修正 投稿のページ送りナビについてホバー時に背景色を付けていたのを無しに変更 投稿のページ送りナビについて「表示タイプ」をデフォルトに固定（スキン制御） ボックスメニューについてFontAwesome5... --- ### サムネイル画像の縦横比について - Published: 2023-10-24 - Modified: 2023-11-27 - URL: https://cocoon-grayish.na2-factory.com/thumbnail-aspectratio/ - カテゴリー: 確認・注意事項 - タグ: Cocoon設定, 画像作成 grayishではフロントページなどで表示されるサムネイルについて、CSSで縦横比を９：１６に設定しています。 投稿・固定ページ内に使用される画像（アイキャッチも含みます）や、CTAボックスやランキングに使用される画像は対象外です。プロフィールボックスやコメントウィジェットで表示される画像も対象外です。 縦横比が適用される部分について スキンによる縦横比が適用されるサムネイル部分は以下になります。 各投稿に設定されたアイキャッチ（アイキャッチが登録されていない場合はNo-image画像になります... --- ### Cocoonで非推奨の機能(AMP,PWA)はご利用できません(v2.7.0で廃止されました） - Published: 2023-10-24 - Modified: 2024-02-09 - URL: https://cocoon-grayish.na2-factory.com/noref-function/ - カテゴリー: 確認・注意事項 - タグ: Cocoon設定 Cocoon v2. 7. 0より、AMP、PWAの機能は廃止されました。 https://wp-cocoon. com/2-7-0/ 以下の記事内容についても無効となります。AMP、PWAのタブは削除されていますのでご注意ください。 Cocoon設定で、AMP、PWAという機能がありますが、現在（2023年10月時点）は非推奨となっております。 Cocoon設定のAMP：非推奨 Cocoon設定のPWA：非推奨 grayishでは、これらの機能について一切動作確認を行っておりません。 ご利用に... --- ### ver1.0.4 リリースしました。不具合修正 - Published: 2023-10-12 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-5/ - カテゴリー: 更新情報 ver1. 0. 3について、Cocoonフォーラムの皆様からいただいた内容や自分で発見した不具合の修正を行いました。 v1. 0. 4でスキン独自テーマカスタマイザーの項目名等を修正していますが、マニュアルの記事の内容はまだ変更できておりません。随時マニュアルを更新して参りますので、少々お時間をいただければと思います? 不具合修正の概要 スキン独自テーマカスタマイザーの項目について修正 トップページ→フロントページへ変更等、親テーマのマニュアル記載との不一致箇所の修正 テキスト変更可能な箇所を... --- ### ver1.0.3 リリースしました。不具合修正 - Published: 2023-10-06 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-4/ - カテゴリー: 更新情報 ver1. 0. 2について、Cocoonフォーラムの皆様からいただいた内容や自分で発見した不具合の修正を行いました。 不具合修正の概要 . appeal-buttonからスキン独自クラスの削除 ブロックエディタ関連 エディタ内でアコーディオンボックスを開いたときの高さがおかしい エディタ内でカテゴリの設定欄の高さがおかしい エディタ内のタグ設定欄の内側に四角の枠が表示される エディタ内でアイコンボックスの選択時のフォーカスの範囲が小さい エディタ内でランキングボックスのアイコンが表示されない ... --- ### ver1.0.2 リリースしました。不具合修正 - Published: 2023-10-04 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-3/ - カテゴリー: 更新情報 ver1. 0. 1について、Cocoonフォーラムの皆様からいただいた内容や自分で発見した不具合の修正を行いました。 不具合修正の概要 aタグ等からスキン独自クラスの削除 ブロックエディタ関連 エディタ内でタブボックスのAmazonアイコンが表示されない エディタ内でCocoonボックス内のテキスト色変更が確認できない タブボックスの英字フォントがテーマカスタマイザーの設定を反映していない プロフィールボックスウィジェットをコンテンツ上部に表示した際のスタイルをコンテンツ下部と同様に変更 st... --- ### ver1.0.1 リリースしました。不具合修正など - Published: 2023-10-03 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-2/ - カテゴリー: 更新情報 ver1. 0. 0について、Cocoonフォーラムの皆様からいただいた以下の不具合修正を行いました。 不具合修正の概要 各種ボタンのホバー時のアニメーションが暴れるのを修正 ブロックエディタを開く際にエラーが出ていたのを修正 記事内のページャーにもスタイル追加 一覧の下に出るページネーションの数字が左寄りになっているのを修正 Ver1. 0. 1をフロントページのダウンロードボタンから入手いただけます。以下のボタンをクリックするとフロントページに移動します。 ダウンロードはこちら（フロントペー... --- ### Cocoonのスキン、grayish（グレイッシュ）ver1.0.0 リリース！ - Published: 2023-10-02 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/rel-infor-1/ - カテゴリー: 更新情報 こんにちは！ フリーランスWebデザイナーのななふと申します。 WordPressテーマ、「Cocoon」のスキンを作りました。 スキン名は「grayish（グレイッシュ）」です。 Ver1. 0. 0をフロントページのダウンロードボタンから入手いただけます。以下のボタンをクリックするとフロントページに移動します。 ダウンロードはこちら（フロントページに移動します） Cocoon動作確認バージョン 親テーマ： 2. 6. 6. 1子テーマ： 1. 1. 3で動作確認済みです。 ステマ規制への対策... --- ### 記事作成はブロックエディタ（Gutenberg）をご利用ください - Published: 2023-09-23 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/grayish-classiceditor-nouse/ - カテゴリー: 確認・注意事項 - タグ: ブロックエディター grayishは、クラシックエディタで動作確認を行っておりません。 記事の作成はブロックエディタをご利用ください。 ハート クラシックエディタ派の方には大変申し訳ないです・・・ クラシックエディタ（公式プラグイン）について WordPressの公式サイトにて、クラシックエディタについて以下のように記載されています。 Classic Editor は公式な WordPress プラグインであり、少なくとも2024年まで、または必要なくなるまでの間、完全にサポート・保守されます。 https://j... --- ### 推奨画像サイズ一覧 - Published: 2023-09-21 - Modified: 2023-12-19 - URL: https://cocoon-grayish.na2-factory.com/ref-img-size/ - カテゴリー: マニュアル - タグ: 画像作成 grayishで推奨するアイキャッチ等の画像サイズをまとめました。 フロントページのメインビジュアル メインビジュアルの画像サイズ推奨（16 : 9）：　幅1920px x 高さ1080px 画面いっぱいに表示されるので、きれいな画像でこだわりたい方が多いと思います。 ただ、画像の容量が大きすぎる（MbyteとかNG）と表示速度に影響がでる為、ある程度圧縮してから（〜100kbyteぐらいが目安かと思います）メディアにアップロードしましょう。 以下のサイトでは無料で画像の圧縮が可能です。（リサイ... --- ### テーマカスタマイザー：NewPost等のテキストを変更する - Published: 2023-09-20 - Modified: 2023-11-01 - URL: https://cocoon-grayish.na2-factory.com/manual-cstm-contents-text/ - カテゴリー: カスタマイズ, マニュアル - タグ: Cocoon設定, テーマカスタマイザー grayishのスキン独自テーマカスタマイザーで、フロントページの見出し上テキスト「New Post」や「Category」、ボタンの「More」等を変更することができます。 「New Post」や「Category」はCocoon設定 > インデックス > カテゴリーごとを選択した場合表示されます スキン独自テーマカスタマイザーで全体：テキスト変更を開く スキン独自テーマカスタマイザーの立ち上げ手順が不明の方は、以下をご覧ください。 テーマカスタマイザー立ち上げ手順 全体：テキスト変更　を開き... --- ### テーマカスタマイザー：グローバルナビの高さや背景色を変更する（PC時） - Published: 2023-09-20 - Modified: 2024-02-26 - URL: https://cocoon-grayish.na2-factory.com/manual-cstm-pcheader/ - カテゴリー: カスタマイズ, マニュアル - タグ: テーマカスタマイザー, ヘッダー grayishのスキン独自テーマカスタマイザーでは、PC時のヘッダーについてグローバルナビの高さ・背景色の変更・背景色の不透明度をカスタマイズ可能です。 フロントページとその他のページで別の項目になっています。 まずはフロントページの変更方法について、説明していきます。 フロントページ スキン独自テーマカスタマイザーでフロントページ設定：ヘッダーを開く スキン独自テーマカスタマイザーの立ち上げ手順が不明の方は、以下をご覧ください。 テーマカスタマイザー立ち上げ手順 フロントページ設定：ヘッダーを... --- ### テーマカスタマイザーでカラー変更（使い方とカラーの適用箇所まとめ） - Published: 2023-09-12 - Modified: 2025-01-10 - URL: https://cocoon-grayish.na2-factory.com/manual-cstm-th-color/ - カテゴリー: カスタマイズ, マニュアル - タグ: カラー設定, テーマカスタマイザー grayishのスキン独自テーマカスタマイザーでカラー変更を行うことができます。カラー変更の手順と、適用される箇所について、まとめました。 テーマカスタマイザー立ち上げ手順 まず、テーマカスタマイザーの立ち上げ手順がご不明の場合は以下をご覧ください。 テーマカスタマイザーの立ち上げ手順 スキン独自のカスタマイズ項目の全体：カラー設定を開いて、カラー変更を行っていきます。 スキン独自のカスタマイズ項目：全体：カラー設定を開いた画面 カラー変更の手順 変更したいカラーの「色を選択」をクリックします。... --- ### 投稿・固定ページ：SNSシェア・フォローボタンの設定 - Published: 2023-09-12 - Modified: 2023-11-01 - URL: https://cocoon-grayish.na2-factory.com/manual-snsbtn-set/ - カテゴリー: マニュアル, 投稿・固定ページ - タグ: Cocoon設定 投稿・固定ページで表示されるSNSシェアボタン、フォローボタンの設定について説明します。デフォルトで表示になっています。 トップシェアボタン（縦表示） 以下は特に設定など不要で、自動で行います。 PC時のみトップシェアボタンが縦表示になります。画面幅1400px以下は通常表示（アイキャッチ下に横並び）に戻ります。画面の高さが縦表示に必要な高さに満たない場合は通常表示（アイキャッチ下に横並び）に戻ります。フッター近くでふわっと表示OFFします。v1. 0. 5より、コンテンツのmainエリアがある... --- ### 投稿ページ：関連記事の設定 - Published: 2023-09-11 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/manual-related/ - カテゴリー: マニュアル, 投稿・固定ページ - タグ: Cocoon設定 この記事では、投稿ページの記事下に表示される関連記事について説明します。 関連記事は、スキン制御により、常に表示されるようになっています。 関連記事の設定変更は、Cocoon設定 > 投稿タブで行います。 Cocoon設定の投稿タブで設定変更が可能 Cocoon設定の投稿タブを開きます。 関連記事設定の項目で、見出しのテキストなどをお好みで設定します。 関連記事の見出しの変更など可能 当サイトでは、関連記事の見出しに「Related Posts」、サブ見出しに「関連記事」と入力しています。 関連... --- ### 投稿・固定ページ：目次の設定 - Published: 2023-09-11 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/manual-index/ - カテゴリー: マニュアル, 投稿・固定ページ - タグ: Cocoon設定, ウィジェット この記事では、主に投稿・固定ページで利用されるCocoon設定の目次の設定について説明します。 ハート Cocoonでは目次表示のためのプラグインは不要だよ！ Cocoon設定の目次タブでお好みで変更 Cocoon設定の目次タブを開きます。 目次はデフォルトで表示されるようになっています。 Cocoon設定 > 目次 公式の目次のマニュアルもご一読ください。 https://wp-cocoon. com/toc/ 上記ページより以下、引用です。 Cocoonの見出し機能は、H見出しを元に作成され... --- ### コンテンツ下部に人気記事ランキングを表示 - Published: 2023-09-11 - Modified: 2023-11-01 - URL: https://cocoon-grayish.na2-factory.com/manual-cstm-poplist/ - カテゴリー: カスタマイズ, マニュアル - タグ: ウィジェット コンテンツ下部に人気記事ウィジェットを設定した場合、スキン独自のスタイルで人気記事ランキングを表示できます。 この記事では、その手順について説明します。 ※swiperというJavaScriptのライブラリが読み込まれます。 コンテンツ下部にウィジェットを設定する WordPress管理画面 > 外観 > ウィジェットに入ります。 人気記事ウィジェットをクリックし、コンテンツ下部に追加します。 「ウィジェットを追加」ボタンをクリックすると、コンテンツ下部に人気記事ウィジェットが追加されます。 ス... --- ### grayish（グレイッシュ）へようこそ！最初はこの記事から。 - Published: 2023-09-07 - Modified: 2025-04-01 - URL: https://cocoon-grayish.na2-factory.com/manual-start/ - カテゴリー: マニュアル, 基本設定 こんにちは。 Cocoonのスキンgrayish（グレイッシュ）を制作しました、ななふと申します。 ななふ grayishに興味を持っていただいてありがとうございます！！ ハート ななふの心の声？？のハートです。よろしく〜 grayish（グレイッシュ）について grayish（グレイッシュ）は、Cocoonの持つ機能を活かしながら、比較的簡単にサイト型風の見た目のブログを作れるスキン、を目指して制作しました。 主な特徴 フロントページのメインビジュアル、画面いっぱいに表示 ブログ型のまま、シン... --- ### フッターのウィジェット設定 - Published: 2023-09-04 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/manual-footer-widget/ - カテゴリー: マニュアル, 基本設定 - タグ: ウィジェット フッターにウィジェットを設定する手順についてです。 カテゴリーやタグ、アーカイブ等、サイト内を回遊してもらえそうなアイテムを設置するのがおすすめです。 Cocoonで設定可能なウィジェットについて、以下公式の記事も合わせてご覧ください。 https://wp-cocoon. com/default-widgets/ PCのときは３列表示 WordPress > 外観 > ウィジェットで設定します。 WordPress > 外観 > ウィジェットで設定 フッター左・中・右に各自のお好みでウィジェッ... --- ### ウィジェットの表示場所とスキンスタイル見本 - Published: 2023-09-02 - Modified: 2024-09-09 - URL: https://cocoon-grayish.na2-factory.com/widgets-sample/ - カテゴリー: ウィジェット見本, デザイン見本, マニュアル, 投稿・固定ページ - タグ: ウィジェット Cocoonのウィジェットは機能が豊富で、様々な場所に表示することができます。 WordPress管理画面 > 外観 > ウィジェット この記事では、投稿ページとサイドバーに設置可能なウィジェットについて、設置される場所を確認することができるようになっています。 ↓以下のように表示されている薄い赤色の部分です。 固定ページ内に設置できるウィジェットついても基本的に本記事と同様となりますので、固定ページでの見本については省略します。 フロントページや一覧ページでの表示については、動画でのご紹介にな... --- ### 投稿・固定ページ：サイドバーのウィジェット初期設定 - Published: 2023-09-01 - Modified: 2024-09-09 - URL: https://cocoon-grayish.na2-factory.com/manual-sidebar-init/ - カテゴリー: マニュアル, 投稿・固定ページ - タグ: ウィジェット, サイドバーの設定 WordPressをインストールして、テーマを設定したばかりの初期状態では、投稿・固定ページのサイドバーにブロックウィジェットが設定されています。 Cocoonでは、ブロックウィジェットをサポートしていません。 このままご利用になっている方をよく見かけますが、一旦全部削除し、Cocoonで利用可能なウィジェットを設定するようにしましょう。 ブロックウィジェットはテーマのマニュアルやスキンのマニュアルと見た目も機能も異なっているため、そのまま使用していて「不具合では？」などというお問い合わせが寄せ... --- ### メニュー設定：【ご注意】モバイルメニューは使用できません - Published: 2023-08-31 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/notes-mbmenu-nouse/ - カテゴリー: マニュアル, メニュー設定, 確認・注意事項 Cocoonのメニュー設定で、モバイルメニューがあると思います。 タブレット・スマホ時（画面幅1023px以下の端末）にのみ表示される、グローバルナビのことです。 https://wp-cocoon. com/mobile-global-menu/ ↓上記の参考記事より引用です。 grayishでは、申し訳ありませんがこちらを使用することができません。 WordPress管理画面 > 外観 > メニューにて、ヘッダーモバイルメニューのメニューを作成しても、どこにも表示されませんのでご注意ください... --- ### サイトフォントの設定（※24/03/26 Macでの游ゴシック体表示について追記） - Published: 2023-08-30 - Modified: 2024-04-27 - URL: https://cocoon-grayish.na2-factory.com/manual-site-font/ - カテゴリー: マニュアル, 基本設定 - タグ: Cocoon設定, フォントの指定 サイトフォントは、サイト全体に適用されるフォントです。 grayishのテーマカスタマイザーで設定する、英字フォントの当たる場所以外の全てのフォントとなります。 Cocoon設定で用意されているフォントの組み合わせから選択します。 管理人のおすすめフォントその①は、Noto Sans JP（Noto Sans Japanese）（※Webフォント）です。 Webフォントなので全てのデバイスで同じ見た目に揃えられ、何よりくせのない美しい万能フォントです。 ですが、日本語Webフォントはデータが大き... --- ### キャッチフレーズの設定 - Published: 2023-08-30 - Modified: 2023-10-30 - URL: https://cocoon-grayish.na2-factory.com/manual-catchphrase/ - カテゴリー: マニュアル, 基本設定 - タグ: Cocoon設定 キャッチフレーズは、フロントページのメインビジュアルでサイトタイトルの上または下に表示されます。 サイトの概要として、入力しておきましょう。 ※SEO的にもタイトルタグにサイトタイトルと共に表示されます。 キャッチフレーズを入力する場所 WordPress管理画面 > 設定 > 一般にあります。 サイトタイトルの下に入力欄があります。 Cocoon設定でフロントページの表示を制御する キャッチフレーズをフロントページに表示するか、サイトタイトルの上下どちらに表示するかは、Cocoon設定 > ヘ... --- ### プロフィールボックスの設定 - Published: 2023-08-29 - Modified: 2024-02-07 - URL: https://cocoon-grayish.na2-factory.com/manual-profbox/ - カテゴリー: マニュアル, 基本設定 - タグ: Cocoonブロック, ウィジェット, テーマカスタマイザー サイト運営者のプロフィールを設定する手順と、プロフィールボックスウィジェット等でどのように表示されるのかが分かる見本を載せています。 プロフィールボックスはウィジェットで様々な場所に設定できるようになっています。本記事では省略しますが、ショートコードでも設置できます。記事内のCocoonブロックからも呼び出せます。 grayishでは、定番の記事のサイドバーや、ウィジェットでフッター上に設置されることを想定しています。 公式の以下記事の手順でプロフィールボックスに必要な情報を設定します。 htt... --- ### メニュー設定：タブレット・スマホのヘッダー・フッターモバイルボタン - Published: 2023-08-29 - Modified: 2024-07-15 - URL: https://cocoon-grayish.na2-factory.com/manual-sp-menu/ - カテゴリー: マニュアル, メニュー設定, 基本設定 - タグ: タブレット・スマホ, テーマカスタマイザー, ヘッダー, メニュー作成 タブレット・スマホ時（画面幅1023px以下）のモバイルボタンメニューを設定する手順です。 23/11/28 追記ヘッダーモバイルボタンのメニューに#logoを含まない場合に不具合があります。Cocoon ver2. 6. 9. 1で修正されます。不具合内容を確認 デフォルトで設定されているボタン grayishはCocoon設定でモバイルボタンメニューをヘッダー・フッターモバイルボタンに設定しています。（スキン制御） テーマをインストール後、メニュー設定を何も行っていない場合、タブレット・スマ... --- ### メインビジュアルやアイキャッチの画像作成には、Canvaがおすすめ - Published: 2023-08-26 - Modified: 2023-11-27 - URL: https://cocoon-grayish.na2-factory.com/howto-img-make/ - カテゴリー: ブログTips - タグ: Canva, 画像作成 メインビジュアルやアイキャッチの画像を、どうやって探したり作ったりすればよいのか？？と困っている方向けの記事です。 ハート フリー素材が沢山ありすぎて何を使えばいいのやら・・・・ 使いたい画像が見つかってもどうやって加工するんだろう・・・ 私はAdobeツールやFigmaを主に使っていますが、もっと手軽にサクッと画像が作れるCanvaをお勧めしたいと思います！！ Canvaは用途に合わせてテンプレートが沢山あり、ロゴやファビコンの作成も可能です。 今回はメインビジュアルとアイキャッチについて作成... --- ### サイトタイトルと英字フォント選択 - Published: 2023-08-24 - Modified: 2024-12-02 - URL: https://cocoon-grayish.na2-factory.com/site-title-set/ - カテゴリー: マニュアル, 基本設定 - タグ: テーマカスタマイザー, フォントの指定 スキンの初期設定として、サイトのタイトル、英字フォントを決定していきましょう。 サイトのタイトルは、WordPress管理画面>設定>一般設定の一番上にある「サイトのタイトル」に入力したテキストが使用されます。 WordPress管理画面＞設定＞一般 当サイトでは「Cocoon-grayish」と入力しています。 フロントページではメインビジュアル中央に、サイトタイトルが表示されます。 ロゴ画像を設定しない場合は、サイトタイトルがロゴ代わりに各ページのヘッダーやフッターに表示されます。 サイトタ... --- ### Cocoon設定のプレビューについて - Published: 2023-08-18 - Modified: 2024-02-26 - URL: https://cocoon-grayish.na2-factory.com/cocoon-set-preview/ - カテゴリー: 確認・注意事項 - タグ: Cocoon設定 Cocoon設定であらゆるタブにプレビュー画面が用意されていると思います。 grayishでプレビュー可能な箇所 grayishでは、「スキン」「全体」「カラム」「モバイル」「404」の設定ページについてのみ、実際と同様な表示になるように調整しています。 スキン 全体 モバイル 404 その他の設定ページにもプレビュー画面がありますが、親テーマの設定のままになっています。 ハート （プレビュー全てに対応することは断念しました・・・） 申し訳ありませんが、上記以外のプレビューについては実際のブログ... --- ### スキン制御について - Published: 2023-08-17 - Modified: 2025-03-14 - URL: https://cocoon-grayish.na2-factory.com/about_skin_ctrl/ - カテゴリー: 確認・注意事項 - タグ: Cocoon設定, スキン制御 grayishはCocoon設定のデザイン・レイアウトに関する項目について、多数箇所スキン制御しています。 Cocoon設定の各タブ内で、以下画像にあるように「スキン制御」が表示され、ピンクの枠で囲まれている箇所のことになります。 スキン制御となっている箇所は、Cocoon設定では変更できません。 スキン制御の方法 スキンフォルダの下にある、option. csvというファイルで行っています。 公式サイトの以下の方法になります。 https://wp-cocoon. com/option-csv... --- ### メニュー設定：PCグローバルナビ - Published: 2023-08-17 - Modified: 2024-03-13 - URL: https://cocoon-grayish.na2-factory.com/manual-pc-menu/ - カテゴリー: マニュアル, メニュー設定, 基本設定 - タグ: テーマカスタマイザー, ヘッダー, メニュー作成 PC時（画面幅1024px以上）のヘッダーに表示されるグローバルナビのメニューを設定する手順です。 基本的に親テーマの公式マニュアルと同様になります。 https://wp-cocoon. com/header-menu/ grayishでは、スキン独自の仕様があります。 grayish独自仕様 グローバルナビは、常に画面上部に固定されます。 フロントページとその他のページで、表示が異なります。フロントページにはロゴは含まれません。その他のページはロゴと並んで表示します。 メニューの最後に自動で... --- ### ブロックエディタ見本 コアブロック - Published: 2023-08-17 - Modified: 2024-01-11 - URL: https://cocoon-grayish.na2-factory.com/block-sample-core/ - カテゴリー: デザイン見本, ブロックエディタ見本 - タグ: コアブロック, ブロックエディター 固定ページや投稿ページの記事作成に使用するCocoonブロック、コアのブロックについてスキンで独自スタイルを追加しています。 この記事ではコアブロックの各スタイルについて見本を載せています。（スキンでスタイルを追加しているのは一部のブロックのみになります。） コアブロックと呼んでいるのは、WordPressのデフォルトで用意されているブロックです。※段落、見出し、画像、引用などのことです。 Cocoonの独自ブロックである、Cocoonブロックの各見本については、別記事にまとめておりますので、以... --- ### ブロックエディタ見本 Cocoonブロック - Published: 2023-08-04 - Modified: 2023-11-20 - URL: https://cocoon-grayish.na2-factory.com/block-sample/ - カテゴリー: デザイン見本, ブロックエディタ見本 - タグ: Cocoonブロック, ブロックエディター 固定ページや投稿ページの記事作成に使用するCocoonブロック、コアのブロックについてスキンで独自スタイルを追加しています。 この記事ではCocoonブロックの各スタイルについて見本を載せています。 尚、親テーマで色変更に対応しているブロックは、エディタ上でカラーパレットの選択によりオリジナルの配色にすることが可能です。 色変更ができないブロックや、一部分だけ色変更可能なブロックもあります。 アイコンボックス アイコンを用いて直感的にメッセージ内容を伝えるためのボックスです。 ※こちらはエディタ... --- ### フロントページ設定：フロントページタイプ - Published: 2023-08-01 - Modified: 2023-12-22 - URL: https://cocoon-grayish.na2-factory.com/top-index-fronttype/ - カテゴリー: デザイン見本, フロントページ, フロントページ見本, マニュアル, 基本設定 - タグ: Cocoon設定, テーマカスタマイザー フロントページの画面いっぱいのメインビジュアルに続いて表示される、新着記事やカテゴリー一覧記事の表示タイプを選択します。 アピールエリアやカルーセル、コンテンツ上部ウィジェットなどの表示を設定している場合は、それらの下に続いて表示されます。 フロントページタイプの設定は、ブログ型に設定されている場合のみ有効です。 サイトがブログ型かどうかの確認方法は以下になります。 WordPress管理画面 > 設定 > 表示設定の、一番上にある「ホームページの表示」で 最新の投稿 にチェックが入っている状態... --- ### フロントページ設定：メインビジュアル - Published: 2023-08-01 - Modified: 2024-09-28 - URL: https://cocoon-grayish.na2-factory.com/manual-top-mv/ - カテゴリー: フロントページ, マニュアル, 基本設定 - タグ: テーマカスタマイザー フロントページのメインビジュアルについて、設定方法を説明します。 事前にメインビジュアルにしたい画像を用意しましょう！ 画像をどのように準備したらいいのか迷っている方は以下記事を御覧ください。 https://cocoon-grayish. na2-factory. com/howto-img-make/ ご確認ください この記事で設定しているメインビジュアルについて、WordPressの表示設定によって表示されないことがあります。 以下の設定がされている時、フロントページが表示されない為、メイ... --- --- ## Works ### グレイッシュ・サラダ・バー - Published: 2025-04-27 - Modified: 2025-04-28 - URL: https://cocoon-grayish.na2-factory.com/works/works-saladabar/ - Worksカテゴリ: Works_Site overview 概要 群馬県前橋市付近にある、おしゃれなサラダバー「グレイッシュ・サラダ・バー」のホームページを制作しました。（※デモサイト） 新鮮な野菜を活かしたメニューが揃っていることや、お店の大人向けの落ち着いた雰囲気を伝えるデザインを目指しました。 https://youtu. be/p-PdW-cZq0M? si=JyWYvXmJYRWhTsT8 Design デザインのポイント 主要な客層は30代〜50代の女性。 お店のこだわりは、近隣の農家と契約し、毎日採れたての野菜を仕入れてい... --- ### グレイ・フォト - Published: 2025-04-27 - Modified: 2025-05-05 - URL: https://cocoon-grayish.na2-factory.com/works/works-photolab/ - Worksカテゴリ: Works_Blog https://youtu. be/ysCyeG56mlc Color Text Color #535252 Main Accent #6d5d52 Main light 1 #afa495 Main light 2 #f5f3f1 Sub Deep 1 #483d3b Sub Deep 2 #483d3b Font En Jost Jp Noto Sans JP Logo 404 --- ---