実用的で強力なエディター機能(標準ブロックの拡張)

399 views
約21分

専用プラグイン「DigiPress Ex – BLocks Free」、または「DigiPress Ex – Blocks」とセットで利用すると、WordPress の標準ブロックを大幅に拡張して使い勝手を向上させます。

さらにオリジナルブロックによって、HTML や CSS を一切記述せずにデザイン性の高い高度なビジュアルコンテンツを実際に表示されるページと同じデザインで確認しながら編集作業が行えます。


オリジナルブロック「吹き出し」

アバター画像、名前、吹き出し文章ブロック内に直接入力するだけで完成する会話風の吹き出しコンテンツを表示します。

表示例
デジ太郎
やあ!
これは独自ブロックの「吹き出し」だよ!
デジ子
なによこれ!
とっても簡単じゃないの!
よく使い回す吹き出しは、再利用ブロックに追加しておくと便利よね!

オリジナルブロック「ブログカード」

サイト内のページだけでなく、外部URLにも対応した、Webページの情報をリッチコンテンツ化する「ブログカード」を表示します。

表示例

オリジナルブロック「ボタン」

テーマにプリセットのCSSボタン装飾を利用したボタンリンク、またはWordPress 標準の「ボタン」ブロックよりも自由度が高いカスタムボタンリンクを作成できるオリジナルブロックです。

表示例

オリジナルブロック「ラベル」

テーマにプリセットのCSS装飾を利用したテキストラベルを表示するオリジナルブロックです。

ラベル最もベーシックな表示

基本のラベルカラーは、テーマのキーカラーに依存します。

ラベルアイコンを表示した場合
ラベルブルーラベル
ラベルライトブルーラベル
ラベルグリーンラベル
ラベルパステルグリーンラベル
ラベルレッドラベル
ラベルピンクラベル
ラベルオレンジラベル
ラベルブラックラベル
ラベルグラデーションラベル

オリジナルブロック「説明リスト」

タイトルとその内容をまとめた HTML の定義リストタグ(dl, dt, dd)を表示するためのオリジナルブロックです。

表示例
Step 1 : WordPress のインストール

詳細についてここに表示します。ここのコンテンツは新たに様々なブロックを追加して自由に構成できます。

まずは WordPress をサーバー上にインストールします。

Step 2 : テーマのインストール

WordPress用のテーマである DigiPress をインストールします。

オリジナルブロック「アコーディオンパネル」

このブロックは有料版の機能です。

タイトルをクリックすると、その内容が開閉表示されるアコーディオンパネルコンテンツを表示するオリジナルブロックです。

表示例
アコーディオンパネル1

このパネルは最初から開いたままにするよう指定しています(初期値は閉じた状態)。

アコーディオンパネルのコンテンツ内には、別のブロックを追加できます。

カラムブロックを追加し、各カラムに画像ブロックを追加した表示例。

これは→
カラムブロック内に→
画像を表示

DigiPress Ex – Blocks のブロックももちろん追加できます。

デジ太郎
これは吹き出しブロックです!
カーソルを合わせると、僕がぶるぶるするよ!!

オリジナルブロック「再利用コンテンツ」

再利用コンテンツ機能の詳細については以下をご覧ください。

オリジナルブロック「アイコンリスト」

このブロックは有料版の機能です。

リストの先頭に好みのアイコンを指定したり、カラーボックスでリストを括ることができるオリジナルブロックです。
アイコンの大きさやボックス背景、ボーダーなどの配色、形状をカスタムでき、リストは最大3カラムまで設定できます。

シンプルな表示例
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
2カラム表示例1〜3カラム指定可
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
3カラム表示例ストライプ背景
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
破線表示例
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
二重線表示例
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。
  • アイコンリストです。

オリジナルブロック「カラーボックス」

テーマにプリセットのCSS装飾を利用したカラーボックスを表示するオリジナルブロックです。
カラーボックスでは、CTAとして利用したり、独立したコンテンツとして他のコンテンツとは区別したい場合に活用できます。

このブロックでは、ボックス内にさらに様々なブロックを追加することができます。

表示例

カラーボックスブロック

カラーボックス内にはさらに様々なブロックを自由に追加して独立したコンテンツを表示できます。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

オリジナルブロック「タイムライン」

表示例ステップフレーズ位置が左側の場合
2003年5月27日
WordPress 初版リリース

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

2005年12月31日
WordPress 2.0 (Duke) リリース

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

2010年6月17日
WordPress 3.0 (Thelonious) リリース

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

2018年12月7日
WordPress 5.0 (Bebo) リリース

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

表示例吹き出し+シャドウスタイル
ステップ 1
オンライン注文・決済

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

ステップ 2
ご注文内容の確認

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

ステップ3
商品の発送

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

ステップ 4
商品の到着・確認

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

表示例アコーディオン(開閉)形式
ステップ 1

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

ステップ 2

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

ラベルブロック
  • リストブロック
    • リストブロック
  • リストブロック
ステップ3

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

ステップ 4

ここにタイムラインのステップごとのコンテンツを表示します。
ここにはテキストだけでなく、標準・オリジナルブロックを含めた様々なブロックを追加できます。

オリジナルブロック「メディアカバー」

表示デモスクロールフェードインアニメーション+メディア切り抜き

Delicious Food

カバー内に任意の画像または動画を表示できます。
インナーメディアは位置(左右)と表示割合を指定できます。
表示デモ縦書き

オリジナルブロック「ロゴスライダー」

表示例5カラム、左→右
表示例6カラム
表示例リンク化

オリジナルブロック「オーバーラップ画像」

表示例4枚、スクロールアニメーションあり

オリジナルブロック「プログレスバー」

表示例グラデーション、角丸
割引率
今なら58% !
42%OFF!
表示例光沢加工、アイコン付き
投票率
あと5日
表示例スクロールフェードイン有効
取得率
76.4%
本年度
表示例ブロック共通オプション使用(背景動画)
注文率
全体の68.6%

オリジナルブロック「円形プログレスバー」

表示例カラムごとに背景
Green
0%
Pink
0%
Yellow
0%
Purple
0%
表示例カラム全体に背景動画
Our Awesome Stats

私たちが選ばれる理由

0%
CSS
0%
JavaScript
0%
PHP
0%
Python

オリジナルブロック「カウントアップ」

表示例カラムごとに背景
0
受賞回数
0
実績
0%
満足度
0
クライアント
表示例カラム全体に背景画像
Our Awesome Stats

私たちが選ばれる理由

0
受賞回数
0
実績
0%
満足度
0
クライアント

オリジナルブロック「カウントダウン」

表示例上にテキスト、ミリ秒表示

受付終了まであと

0
0時間
0
0.
0
カウントダウン終了!
表示例背景動画(共通オプション)

オープンまであと

0Days
0:
0:
0
カウントダウン終了!

オリジナルブロック「お客様の声」

表示例背景画像を固定、ぼかし
新谷るる

フリーモデル

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

サカモトリョウ

ゴルフレッスンプロ

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

河村友歌

フリーモデル

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

表示例ブロック背景にグラデーションと動画を指定
表示例ブロックタイトル & 説明付き

お客様の声

過去に当サービスをご利用いただいたお客様から寄せられた感想をご紹介します。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

新谷るる

フリーモデル

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

サカモトリョウ

ゴルフレッスンプロ

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

河村友歌

フリーモデル

オリジナルブロック「ショーケース」

このブロックは有料版の機能です。

このブロックでは、商品やサービス、メンバーなどの一覧を画像付きのリンクで並べて表示したい場合に活用できます。

表示例

オリジナルブロック「プロセスステップ」

このブロックは有料版の機能です。

このブロックでは、物事の順序、工程、手続き方法などの説明を順番に表示できるプロセスステップ(工程)コンテンツを表示します。

表示例
1
2
3
4

オンラインでのご注文

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

ご決済の確認

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

商品の梱包

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

商品の発送

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

オリジナルブロック「メニュー表」

このブロックは有料版の機能です。

このブロックでは、飲食店などでよく見かけるメニューをWebページ上のコンテンツとして表示したい場合に活用できます。

表示例1横書き
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
表示例2縦書き
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
  • あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

オリジナルブロック「画像比較」

表示デモ画像のみを指定した例
表示デモコントローラーカラー変更、ラベルあり
表示デモ垂直方向、表示割合の初期値変更、マウスオーバー追随

オリジナルブロック「チャート」

表示デモ棒グラフ
表示デモ棒グラフ(垂直)
表示デモ円グラフ
表示デモドーナツチャート
表示デモレーダーチャート

オリジナルブロック「データテーブル」

表示例ブロック追加直後(ダミーデータ)
表示例画像アバター、複数行有効、背景カラー調整
表示例ブロック共通オプション使用

オリジナルブロック「縁取りテキスト」

表示例テキストと動画を重ねた場合
OUTLINED TEXT
表示例オーバーラップ画像を固定
OUTDOOR STYLE
OUTDOOR STYLE
表示例アウトラインと文字をずらした場合
はなまる保育園
\ げんきにすくすく /

このサンプルは、オリジナルの「アイコン」ブロックと「縁取りテキスト」ブロックを組み合わせ、アイコンではアウトラインオプションを使用して表現しています。

グラデーションテキスト
表示例背景にドロップオブジェクト
FUNKY
PRESIDENT

オリジナルブロック「切り抜きテキスト」

表示例

Text Clipping

Text Clipping

Text Clipping

オリジナルブロック「テキストアニメーション」

表示例中央、アニメーションは上→下/下→上

Highly Flexible WordPress Theme

DigiPress

テキストアニメーションブロック

DigiPress Ex – Blocks for WordPress Plugin

無料版でも利用可能(機能制限付き)

表示例右寄せ、アニメーションは右→左/左→右

Highly Flexible WordPress Theme

DigiPress

テキストアニメーションブロック

DigiPress Ex – Blocks for WordPress Plugin

無料版でも利用可能(機能制限付き)

オリジナルブロック「フェードインテキスト」

表示例左寄せ、アニメーションは左→右/右→左、時差あり

Highly Flexible WordPress Theme

DigiPress

DigiPress Ex – Blocks for WordPress Plugin

フェードインテキストブロック
無料版でも利用可能(機能制限付き)

表示例中央、アニメーションは上→下/下→上

Highly Flexible WordPress Theme

DigiPress

DigiPress Ex – Blocks for WordPress Plugin

フェードインテキストブロック
無料版でも利用可能(機能制限付き)

オリジナルブロック「タイピングアニメーション」

表示例左寄せ、中央揃え、右寄せ

Highly Flexible WordPress Theme

DigiPress for your web site

タイピングアニメーションブロック(タイピング速度変更)

表示例キャレット表示

キャレット【 | 】あり、タイピング速度は90ミリ秒|

キャレット【 _ 】あり、タイピング速度は150ミリ秒_

キャレット【 ^ 】あり、タイピング速度は200ミリ秒^

キャレット【 ] 】あり、タイピング速度は300ミリ秒]

オリジナルブロック「シェイプセパレータ」

表示例シェイプセパレータを上下に連続配置
構造
エディター側の状態
表示例メディアカバーブロックと隣接
これはメディアカバーブロックです
メディアカバーブロックの上にシェイプセパレータブロックがあります。
構造
エディター側の状態

表示例メディアカバーの上下に配置、シャドウあり
これはメディアカバーブロックです
メディアカバーブロックの上下にシェイプセパレータブロックがあります。

表示例背景カラーと組み合わせた場合
これはメディアカバーブロックです
メディアカバーブロックの上下にシェイプセパレータブロックがあります。
これはメディアカバーブロックです
メディアカバーブロックの上にシェイプセパレータブロックがあります。
構造
エディター側の状態

この記事を書いた人

digipress.incプロデューサーDigiPress サポート
これはユーザーのプロフィール情報エリアです。
肩書きや対象ユーザーのSNSアカウントのリンク、紹介文などをWordPressのプロフィール画面から登録するだけで自動的に表示されます。

また、各プロフィール情報はMicrodata形式として出力されるため、検索エンジンにも寄稿者として認識させることができます。
Follow :
FacebookでシェアTwitterでシェアPinterestでシェア