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

ブロックエディター

記事内に広告が含まれています。
カスタマイズ

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

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

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

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

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

Cocoon ver2.7.3でタブブロックが追加されました。grayishではデフォルトスタイルの他、シンプルに使いまわせそうなスタイルのバリエーションを追加しています。ブロックエディタの追加CSSクラスに所定のクラス名を入力してご利用いただけます。フロントページで使えそうなスタイルも追加していますので、サンプルをご覧になっていただき、是非ご利用ください。
カスタマイズ

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

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

記事の装飾に使える、スキン独自のカラーパレット

Cocoonブロックなどの、スキン独自スタイルに使用しているカラーについて、記事内でも利用できるようにカラーパレットに追加しています。段落などのテキスト、背景色を変えるだけでも印象が変わるので、是非ご活用ください。ハイライトとして一部分だけの色変更にも使用できます。ご自分だけのカラーを追加したい場合は、Cocoon設定から追加可能なのでお試しください。
確認・注意事項

記事作成はブロックエディタ(Gutenberg)をご利用ください

CocoonにはCocoonブロックも完備されており、記事作成でブロックエディタを問題なく使用できるようになっています。クラシックエディタも依然ニーズがあることは理解していますが、管理人の工数の問題もあり、クラシックエディタで動作確認はできておりません。
デザイン見本

ブロックエディタ見本 コアブロック

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

ブロックエディタ見本 Cocoonブロック

Cocoonブロックについて、スキン独自のスタイルを当てているものについて見本を載せています。記事作成の際に参考になれば幸いです。一部のブロックは独自スタイルを当てていません。独自スタイルのないブロックは目次の一番最後の項目にリスト化しています。
スポンサーリンク
タイトルとURLをコピーしました