フロントページのメインビジュアルに、プラグイン「grayish MV add」を使用中!詳しくはここをClick!
PR

マニュアル

記事内に広告が含まれています。
スキンgrayishのマニュアル

基本設定

  1. grayish(グレイッシュ)へようこそ!最初はこの記事から。
  2. サイトタイトルと英字フォント選択
  3. キャッチフレーズの設定
  4. サイトフォントの設定(※24/03/26 Macでの游ゴシック体表示について追記)
  5. フロントページ設定:メインビジュアル
  6. フロントページ設定:フロントページタイプ
  7. プロフィールボックスの設定
  8. メニュー設定:PCグローバルナビ
  9. メニュー設定:タブレット・スマホのヘッダー・フッターモバイルボタン
  10. フッターのウィジェット設定
  11. モバイルの設定
  12. CocoonのOGP設定。X(旧Twitter)やFacebookへシェアしたときの表示を確認しよう※2024年2月現在

基本のプラスα

確認・注意事項

  1. スキン制御について
  2. 記事作成はブロックエディタ(Gutenberg)をご利用ください
  3. Cocoon設定のプレビューについて
  4. メニュー設定:【ご注意】モバイルメニューは使用できません
  5. Cocoonで非推奨の機能(AMP,PWA)はご利用できません(v2.7.0で廃止されました)
  6. サムネイル画像の縦横比について
  7. 本サイトの記事の文章や画像、動画の修正について
  8. スキンの複雑(高度)なカスタマイズをする場合
  9. 独自ドメイン取得したら、SSL化(httpからhttpsへ)してからサイトを作ろう。中途半端なSSL化にご注意

投稿・固定ページの設定

  1. 投稿・固定ページ:サイドバーのウィジェット初期設定
  2. 投稿・固定ページ:目次の設定
  3. 投稿ページ:関連記事の設定
  4. 投稿・固定ページ:SNSシェア・フォローボタンの設定

記事作成

  1. ブロックエディタ見本 Cocoonブロック
  2. Cocoonタブブロックのgrayishスタイル見本
  3. ブロックエディタ見本 コアブロック
  4. 記事の装飾に使える、スキン独自のカラーパレット

ブログTips

  1. メインビジュアルやアイキャッチの画像作成には、Canvaがおすすめ
  2. サイトロゴを簡単に作りたい。CanvaとAdobe Expressの使用例
  3. Cocoon新着記事ショートコードの新機能で任意の記事一覧を表示可能に。初心者さん向けに使い方を解説します

オプション設定(スキンカスタマイズなど)

  1. コンテンツ下部に人気記事ランキングを表示
  2. テーマカスタマイザーでカラー変更(使い方とカラーの適用箇所まとめ)
  3. テーマカスタマイザー:グローバルナビの高さや背景色を変更する(PC時)
  4. テーマカスタマイザー:NewPost等のテキストを変更する
  5. 子テーマのCSSでカスタマイズしたい場合
  6. メインビジュアルにスライダーや動画を設定できるプラグイン作りました(※v1.0.8にアップデート。不具合修正)
  7. ロゴ設定の機能追加します。※Cocoon ver2.7.4.1以降で利用可能(24/09/02 独自ドメインSSL化に関する内容の追加)
  8. Cocoonの新着記事ブロックなどをスライダーにできるプラグイン作りました
  9. メインビジュアルをPCとモバイルで別画像にするカスタマイズ【CSSのみ】
  10. メインビジュアルと重なる間、ナビメニューのカラーを変えるカスタマイズ【PC表示限定】

サイト型で作りたい場合

  1. サイト型にしたい場合の準備編
  2. サイト型フロントページにも使える!カバーブロックを画面の幅いっぱいに広げるサンプルコード
  3. Cocoonの新機能でパターンデータをシェア可能に!作例のパターンをシェア&使い方
  4. フロントページ向けのブロックパターン詰め合わせ(デモページあり)※プラグインとPickupパターンを修正
  5. サイト型のフロントページ向け:滑らかな曲線の境界線ブロックをつくる(円弧・波)※カバーブロック利用で簡単に使えるように改良!
  6. 境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。

【Cocoon公式サイト マニュアル】

このサイトではgrayishの設定に絞った説明になっていますので、Cocoonのその他のマニュアルは公式サイトを御覧ください。

カスタマイズ

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

フロントページかつPC表示の場合のカスタマイズです。メインビジュアルに選ぶ画像によって、その上に重なっているナビメニューのテキストが見にくくなったりすることがあると思います。メインビジュアル表示中のみ、カスタマイズカラーにし、スクロールしてメインビジュアルを通り過ぎたら、テーマカスタマイザーで設定したカラーに戻ります。
カスタマイズ

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

画面いっぱいに表示するメインビジュアルをPCとモバイル(画面幅1023px以下とします)で別の画像にしたい、という方へ向けたカスタマイズ方法です。 また、PC時とモバイル時それぞれの画像の表示位置の調整方法も紹介しています。 子テーマのstyle.cssにコードを追加します。事前にバックアップを取ってからカスタマイズしてください。
カスタマイズ

Cocoonの新着記事ブロックなどをスライダーにできるプラグイン作りました

新着記事ブロックなどの追加CSSクラスに指定のクラス名を入力することで、自動で横方向にアニメーションするスライダーにできます。 等速で無限ループするタイプと、記事ごとにスナップするノーマルタイプから選択します。 細かいカスタマイズはできませんが、手軽に記事のスライダーをつくることができます。 grayishを使用していないCocoonスキンなしでも動作します。いくつか注意点がありますので、記事の内容をよくご確認になってからご利用ください。
スポンサーリンク
マニュアル

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

サイトを途中まで作ってから独自ドメインのSSL化を行う場合、WordPressでは他にも設定の変更が必要な箇所があります。Cocoonの公式マニュアルを見ながら手順を確認しましょう。 SSL化が中途半端な状態ですとgrayishのロゴ設定機能が動作しないことがあります。
カスタマイズ

Cocoon新着記事ショートコードの新機能で任意の記事一覧を表示可能に。初心者さん向けに使い方を解説します

新着記事ショートコードで任意の記事一覧を表示させる手順をショートコードに慣れていない、初心者さん向けに解説します。ナビカードでも同様な記事一覧を作れますが、新着記事ショートコードの新しいオプションordered_postsで記事のIDを指定するだけでよいので、より手軽に作れます。 また、grayishのフロントページ向け配布パターンに含まれている、新着記事表示用パターンでも使用可能です。こちらについても編集手順を説明しています。
マニュアル

ロゴ設定の機能追加します。※Cocoon ver2.7.4.1以降で利用可能(24/09/02 独自ドメインSSL化に関する内容の追加)

ロゴ設定の機能追加のお知らせです。Cocoon ver2.7.4.1以降で利用可能です。PC時のフロントページ以外のヘッダーロゴと、モバイル時のロゴを任意の画像に変更可能になります。 テーマカスタマイザーでメディアにある画像を設定できます。
カスタマイズ

境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。

サイト型フロントページに使えるシリーズ、今回は境界線をなみなみやギザギザにできるCSSを紹介します。 また、画像やカバーブロックを直接円弧、斜めに切り抜きするCSSも紹介します。 さらに区切り線として使用可能な、直線・なみなみ・ギザギザのパターンも配布します。
カスタマイズ

メインビジュアルにスライダーや動画を設定できるプラグイン作りました(※v1.0.8にアップデート。不具合修正)

grayishのメインビジュアルにスライダー、動画を設定するプラグインを作りましたので紹介いたします。 専用のパターンを使用します。パターンとプラグインをこの記事からダウンロード可能です。
マニュアル

モバイルの設定

Cocoon設定のモバイルタブで、「常にサイトヘッダーロゴを表示する」の項目にチェックが入っていない場合、モバイル時のメインビジュアルにサイトテキスト又はロゴが表示されません。 メインビジュアルにサイトテキストやロゴを表示したい場合は、チェックを入れて設定を保存してください。 その他モバイルの設定項目について説明しています。
カスタマイズ

サイト型のフロントページ向け:滑らかな曲線の境界線ブロックをつくる(円弧・波)※カバーブロック利用で簡単に使えるように改良!

1カラムのサイト型フロントページなので装飾として使える、滑らかな曲線のブロックを紹介します。セクションの境界を円弧や波の形で表示することができます。 カバーブロック利用で簡単に使用可能に改良しました。 grayishに限らず、Cocoonのスキンなしの場合などでも利用可能です。
カスタマイズ

フロントページ向けのブロックパターン詰め合わせ(デモページあり)※プラグインとPickupパターンを修正

ブログのフロントページによくあるセクション(About、Pickup、NewPost、Rankingなど)別にすぐに使えるパターンデータを用意しました。 パターンと合わせて手軽にデザインを再現できるCSSプラグインも配布します。 今回紹介したパターンで、デモのフロントページを作ってみたので是非ご覧になってください。パターンをペタペタと貼り付けるだけで作れます。 記事内にあるご利用の注意事項をよくご確認の上、ご利用ください。
スポンサーリンク
タイトルとURLをコピーしました