WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!! | SWELL DESIGN GALLERY by WebNote+
2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!
WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!! | SWELL DESIGN GALLERY by WebNote+
2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!
WordPressテーマ「STORK19」のブロックエディターの使い方や機能をまとめて紹介します。
STORK19のブロックエディターは、オリジナリティよりも他テーマで採用されている人気機能を積極的に取り入れながら開発が進められている印象です。
この記事では、画像を多めに使いながらそれぞれのブロック機能を紹介していきます。
STORK19の公式サイトでも以下のような解説記事が準備されているので参考にしてください。
v6.1.1
v3.16.1
記事はできる限り最新情報に更新していきますが、キャプチャ等は執筆時点の物が多くなると思います。
最終確認日:2023/1/21 STORK19 Ver.3.17
WordPressテーマSTORK19では、ブロックエディターの機能に以下の独自機能が追加されています。
STORK19の独自機能を使いこなすためには、まずWordPress標準のブロックエディターの使い方を把握することも大切です。以下の記事にまとめているので参考にしてください。
それでは、STORK19のブロックエディターオリジナル機能を紹介していきます。
WordPressテーマSTORK19で独自に用意されているオリジナルのブロックは以下です。
それぞれ紹介していきます。
ボックスブロックは、囲み枠の中にテキストや画像を自由に配置できるブロックです。
STORK19のボックスブロックでできることは以下のとおりです。
ボックスブロックには、タイトルの有無で2種類のブロックに分かれています。
タイトルが無いボックスブロックでは、2種類のデザインから選択できます。
ボックス(タイトル付き)ブロックでは、3種類のデザインから選択できます。
ボックスのカラーの変更もできるようになっています。
補足説明ブロックは、アイコンの付いた囲み枠の中にテキストや画像を自由に配置できるブロックです。
STORK19の補足説明ブロックでできることは以下のとおりです。
スタイルは4種類から選択できます。
v.3.17のアップデートで「メモ」と「ヒント」スタイルが追加されました。
STORK19では、段落ブロックにも補足説明用のスタイルがありますが、補足説明ブロックでは、箇条書きや画像など自由にブロックを配置できる点がメリットになります。
吹き出しブロックでは、テキストを会話風の装飾で表現することができます。
STORK19の吹き出しブロックでできることは以下のとおりです。
良く使う吹き出しの画像やデザイン、配置を最大10個まで登録しておくことができるマイセット登録機能があります。
登録した吹き出しはサイドバーから簡単に記事内に配置できます。
吹き出しの登録は簡単で、実際の記事の編集画面でお好みのふきだしを作成して「マイセットを登録する」ボタンをクリックするだけでOKです。
吹き出しとアイコン枠のカラーと吹き出しの配置を設定できる仕様になっています。
アコーディオンブロックは、コンテンツを折り畳んで隠しておくことができるブロックです。うまく活用するとページをすっきりさせることができます。
STORK19のアコーディオンブロックでできることは以下のとおりです。
アコーディオンのスタイルを3種類から選択できます。
FAQブロックでは、「良くある質問」のような質問と回答がセットになったコンテンツを配置できます。
STORK19のFAQ(Q&A)ブロックでできることは以下のとおりです。
それから、STORK19には2種類のFAQブロックがあります。
2種類は基本機能は同じですが、FAQ(開閉式)ブロックでは、アコーディオンのようにFAQのA(回答)部分をクリックで開閉できるようになります。
サイドバーの構造化データ設定欄の「構造化データ利用する」をオンにすることで、よくある質問(FAQ)の構造化データを出力することができます。
構造化データを出力すると、Googleの検索結果にリッチリザルトが表示されることがあります。
スタイルを6種類から選択できます。
メインカラーは、STORK19テーマカスタマイザーの設定に連動しています。
QAアイコンもサイドバー内で設定できます。
ステップブロックは、物事を時系列順や手順ごとに並べて紹介する時に便利なブロックです。
STORK19のステップブロックでできることは以下のとおりです。
ステップのデザインを3種類から選択できます。
STEP部分のラベルも自由に変更が可能です。
関連記事ブロックは、ブログカード形式でリンクを貼ることができるブロックです。
STORK19の関連記事ブロックでできることは以下のとおりです。
デザインは3種類から選択できます。
カード型の場合は、パソコン、モバイル、タブレットの画面サイズごとに表示するカラム数を設定できます。
記事のURLかIDを入力することでブログカードを表示できます。
外部リンクには関連記事ブロックを使用できない点は注意が必要です。
グリッドブロックは、WordPress標準のカラムブロックに機能を追加したようなブロックです。
STORK19のグリッドブロックでできることは以下のとおりです。
グリッド同士の余白と、カラム数(列の数)をPCとモバイルでそれぞれ設定できます。グリッドの中には自由にブロックを配置可能です。
記事リストブロックでは、記事を新着順やカテゴリーごとにまとめて表示させることができます。
STORK19の記事リストブロックでできることは以下のとおりです。
記事リストブロックには3種類のブロックが用意されています。
名称のとおりですが、新着順に表示するか、カテゴリー、タグごとに記事を絞り込んで表示するか、用途に合わせてブロックを使い分けます。
表示タイプ(デザイン)は3種類から選択できます。
カード型の場合は、パソコン、モバイル、タブレットの画面サイズごとに表示するカラム数を設定できます。
その他、表示する内容や除外する記事の設定などもできるようになっています。
WordPressテーマSTORK19では、以下のWordPress標準ブロック(コアブロック)に対して独自の拡張機能が追加されています。
それぞれ紹介していきます。
WordPress標準ブロックの段落ブロックにデザイン面で機能が追加されています。
STORK19の段落ブロックでできることは以下のとおりです。
スタイルを15種類から選択できる
12種類のオリジナルスタイルが追加されていて、デフォルトと合わせると15種類から選択できるようになっています。
デザインの数が多いので動画にまとめました。
動画内ではスタイルが13種類しかありませんが、v.3.17のアップデートで「メモ」と「ヒント」のスタイルが追加されて計15種類になっています。
WordPress標準ブロックの見出しブロックにデザイン面で機能が追加されています。
STORK19の段落ブロックでできることは以下のとおりです。
テーマカスタマイザーで基本的な見出しのデザインを設定できます。
WordPress管理画面→「外観」→「カスタマイズ」→「投稿・固定ページ設定」→『見出しデザイン』
また、見出しブロックのスタイルには、記事で主に使う「デフォルト」以外に「スタイルなし」、「セクション見出し」が用意されています。
これらは、トップページなどで活用することが多くなりますが、ブロックバリエーションとしても登録されています。
WordPress標準ブロックのリストブロックにデザイン面で機能が追加されています。
STORK19のリストブロックでできることは以下のとおりです。
スタイルを15種類から選択できる
リストのスタイルを15種類から選択できます。
デザインの数が多いので動画にまとめました。
WordPress標準ブロックのテーブルブロックに機能が追加されています。
STORK19のテーブルブロックでできることは以下のとおりです。
サイトを閲覧するデバイスの幅が480px以下の場合のみ、表を横スクロールさせることができます。
それから1列目をth(テーブル見出し)風のデザインにすることができます。1列目がグレーになりますが、色の指定はできません。
WordPress標準ブロックの画像ブロックにデザイン面で機能が追加されています。
STORK19の画像ブロックでできることは以下のとおりです。
スタイルを15種類から選択できる
画像のスタイルを15種類から選択できます。
デザインの数が多いので動画にまとめました。
WordPress標準ブロックのグループブロックに機能が追加されています。
STORK19のグループブロックでできることは以下のとおりです。
ブロックの内部の余白を4段階から選択できます。
ブロックの形状を設定できます。
WordPress標準ブロックのカバーブロックにデザイン面で機能が追加されています。
STORK19のカバーブロックでできることは以下のとおりです。
ブロックの形状を設定できる
カバーブロック全体の形状を、グループブロック同様に指定できます。
WordPressテーマSTORK19では、WordPress標準のブロックエディター機能に対して以下の独自拡張機能が追加されています。
それぞれ紹介していきます。
STORK19では、以下のような文字装飾が可能です。
STORK19ではブロックごとにアニメーションを設定できます。
各ブロックのサイドバーにある「アニメーション設定」から簡単に6パターンのアニメーションから設定が可能です。
STORK19では、ブロックごとに上下の余白量を調整できます。
ブロックツールバーかサイドバーの「上下の余白設定(margin)」から設定が可能です。
PC、タブレット、モバイルごとにブロックを非表示にすることも可能です。
サイドバーの「表示設定」に3つの選択肢が用意されているので、お好みに合わせて選択するだけでOKです。
WordPressテーマSTOK19のブロックエディターについて紹介しました。
STORK19のブロックエディターでできることは以下です。
ブロックエディター機能に関しては、例えばSWELLやSANGOに似たような機能や装飾が用意されています。かなり意識して開発が進められているのかなという印象です。
今後も、STORK19のブロックエディター開発がどのように進んでいくのかチェックしていきたいと思います。
最後まで読んでいただきありがとうございました。
STORK19 の公式サイトはこちら…!
WordPressテーマのブロックエディター機能一覧
この記事が気に入ったら
いいね または フォローしてね!