グリッドブロックの使い方

グリッドブロック

STORK SEのカスタムブロック(STORK BLOCKS)の「グリッド」は、グリッド形式のコンテンツを作成できるブロックです。

グリッドブロックの表示例

ブロックエディタ標準のカラムブロックよりもレイアウトの自由度が高く、モバイルとPCでカラム数を変更できるのが特徴です。


グリッド1


グリッド2


グリッド3


グリッド4


グリッド5


グリッド6

グリッドブロックの使い方

グリッドブロックの使い方について説明します。使い方のイメージとして、下記の動画もご覧ください。

このブロックを追加する方法

このブロックをコンテンツに追加するには、以下の2通りの方法があります。

  1. ブロック挿入ツールで「グリッド」を検索して追加
  2. エディタ(ビジュアル編集)に/gridを入力して追加

グリッドブロックの設定

PC設定 / モバイル設定

グリッド同士の余白グリッド同士の余白(間隔)を1pxレベルで調節できます。
カラム数グリッドのカラム(列数)を指定できます。

PC表示用とモバイル(スマホ)標示用で設定が分かれています。

グリッドブロックの使用例

下記のような項目ごとに区切ったコンテンツを作成するのに向いています。

ブロックエディタ

エディタ上で直感的に操作できます。カスタムブロックやブロックオプションも多数搭載。

テーマカスタマイザー

サイト設定やデザインの調節など、オプションを利用して自由にカスタマイズできます。

タグ・コードの設定

アフィリエイトタグなどのコードもカスタマイズ画面に貼り付けるだけで設置できます。

ウィジェットエリア

広告やバナーなどの様々なコンテンツを最適な場所に表示できます。

プリセットパターン

初心者でも簡単にページコンテンツを作成できるパターンをテーマ内にセットしています。

マイパターン

パターン化したコンテンツをエディタやウィジェットなど、好きな場所で呼び出せます。

ヘッダーアイキャッチ

トップページの顔となるメインビジュアルを画像や動画で表示できます。

ピックアップコンテンツ

トップページなどにリンク付きのリッチバナーを表示できます。

記事スライダー

特定の投稿や固定ページをスライダースタイルで表示できます。

記事ヘッダー

投稿・固定ページの記事ヘッダーのレイアウトを切り替えられるようになっています。

ランディングページ

ランディングページに特化した固定ページ用のテンプレートを利用できます。

ショートコード

ショートコードも利用可能。旧ストークなどのショートコードも反映できます。

目次の自動生成

記事内の見出しを抽出して、目次を自動生成する機能を実装しています。

スクロール追従エリア

サイドバーやフッターに固定表示できるウィジェットエリアを用意しています。

固定フッターメニュー

モバイル用でスクロール追従型のフッターメニューを表示できます。

高いカスタマイズ性

HTMLやCSSを触ることなく、オプションで細かいところまで調節できます。

SEOと構造化マークアップ

テーマ内のHTMLは検索エンジンにも好まれる設計。JSON-LD形式の構造化データも出力できるようになっています。

表示速度への対応

内部構造の最適化による可能な限りの軽量化。CSSをキャッシュ化して読み込みを早くするなどの機能もあります。

下記のようにPCは5列、スマホでは3列など、カラム数を分けて表示できます。

グリッド1
グリッド2
グリッド3
グリッド4
グリッド5
グリッド6
グリッド7
グリッド8
グリッド9
グリッド10
グリッド11
グリッド12
グリッド13
グリッド14
グリッド15

▼投稿下部のウィジェットエリア

▼投稿下部のウィジェットエリア

さらに洗練された
究極のモバイルファーストテーマ

WordPressテーマSTORK SEストークSE

これまでに5万回以上ダウンロードされたWPテーマのシリーズ最新版「STORK SE」です。さらに洗練されたデザイと機能で「誰が使っても美しいデザイン」のサイトを作成できます。