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. スキンの複雑(高度)なカスタマイズをする場合

投稿・固定ページの設定

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

記事作成

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

ブログTips

  1. メインビジュアルやアイキャッチの画像作成には、Canvaがおすすめ
  2. サイトロゴを簡単に作りたい。CanvaとAdobe Expressの使用例

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

  1. コンテンツ下部に人気記事ランキングを表示
  2. テーマカスタマイザーでカラー変更(使い方とカラーの適用箇所まとめ)
  3. テーマカスタマイザー:グローバルナビの高さや背景色を変更する(PC時)
  4. テーマカスタマイザー:NewPost等のテキストを変更する
  5. 子テーマのCSSでカスタマイズしたい場合
  6. メインビジュアルにスライダーや動画を設定できるプラグイン作りました(※v1.0.8にアップデート。不具合修正)

サイト型で作りたい場合

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

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

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

カスタマイズ

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

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

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

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

サイトフォントの設定(※24/03/26 Macでの游ゴシック体表示について追記)

grayishでは、Noto Sans JP (Webフォント)をおすすめしていますが、表示速度の面でデバイスフォントをお好みの方が多い印象を持っています。 Cocoonのフォントの選択肢は豊富にあるのですが、利用者が多そうなデバイスフォント(游ゴシック体, ヒラギノ角ゴとヒラギノ角ゴ, メイリオ(Cocoonインストール後の初期設定))について重点的に表示確認を行っています。 Cocoon ver2.7.2からMacについても游ゴシック体が適用されるようになりましたが、デバイスやブラウザによって表示されないケースがあります。この点について注意書きを追記しました。
スポンサーリンク
カスタマイズ

Cocoonの新機能でパターンデータをシェア可能に!作例のパターンをシェア&使い方

サイト型のフロントページに使えるようなブロックの作例を前の記事でご紹介しましたが、ブロックの作成、追加CSSクラス名の入力など作業が割と多く、もっと手軽にシェアしたいと思ってました。Cocoon ver2.7.1より追加されたパターン機能で、パターンデータのエクスポート&インポートが可能になった為、各自でインポート可能なデータを用意することにしました。これによってブロックに関しては簡単に作例と同じ構成で使用可能です。専用のCSSを追加することでデザインを再現できます。 尚、WordPress6.5ではパターンの場所が変更になり、タイトルの変更ができなくなっていますが、コードエディターに切り替えることで変更可能です。この手順も追記しています。
マニュアル

モバイルの設定

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

フロントページ向けのブロックパターン詰め合わせ(デモページあり)

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

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

サイト型フロントページなど、1カラムのページで使用可能な、カバーブロックや画像ブロックを画面幅いっぱいに広げるサンプルコードをご紹介します。 HTMLを書くことなくCSSだけでできます。ブロックの高度な設定で追加CSSクラスを付け、対応するCSSを子テーマやページのカスタムCSSに追加することで実現します。 背景を画面幅いっぱいにして作るNews(新着情報)セクションの作例も載せています。
マニュアル

メニュー設定:PCグローバルナビ

Cocoonのグローバルナビと作成手順は同じです。grayish独自仕様があります。メニューの最後に検索ボタンが付く、お好みでSNSボタンの追加が可能、サブメニュー表示は3階層下まで、フロントページとその他のページでは表示が異なる、などです。 フロントページでは、ロゴはメニューに含まれません。フロントページ以外では、ロゴとメニューが横一列に表示される仕様になっています。 PCの時、サブメニューはある程度スクロールすると非表示になります。トップに戻ると表示されます。
カスタマイズ

テーマカスタマイザー:グローバルナビの高さや背景色を変更する(PC時)

フロントページと、その他のページで設定する項目を分けています。 その他のページではロゴ画像が設定されている場合、ロゴ画像が見やすいように高さを調整するのに役立つと思います。 ヘッダーの背景色について、デフォルトでは薄いグレーの半透明ですが、サイトに合わせて色を変更したり、半透明を透明にしたり等をお好みで行うことができます。
マニュアル

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

grayish(グレイッシュ)を使い始める前に、まずはこの記事をご覧ください。grayishの特徴を簡単にまとめています。 親テーマCocoonの公式ページへのリンクあり。 ※マニュアル一覧を全記事の本文下に付けており、今どの記事を読んでいるのかを分かりやすく表示しています。
カスタマイズ

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

サイト型にするための準備として、フロントページ・新着記事一覧用の固定ページを作成する手順と、 WordPress管理画面の表示設定について紹介しています。 このサイトのフロントページの構成についても解説しています。
スポンサーリンク
タイトルとURLをコピーしました