コードなしでGutenbergで(固定)スティッキーブロックを作成する方法

Gutenberg でスティッキー ブロックを作成する方法をお探しですか? 🤔

アフィリエイトの免責条項を作成したい場合でも、割引を提供したい場合でも、製品の重要な機能に訪問者の注意を引き付けたい場合でも、スティッキー ブロックはこれらの目標を達成するのに役立ちます。

固定ブロックとも呼ばれるスティッキー ブロックは、ユーザーがページを下にスクロールしても画面上に表示されたままになり、ハイライトしたいコンテンツが常に表示されるようになります。

👉 ここで私たちが話していることの例を示します。ユーザーがスクロールしても、ソーシャル アイコンがどのようにその位置で「固定」されるかがわかります。

Gutenberg にスティッキー ブロックを追加すると、シームレスで魅力的なユーザー エクスペリエンスが提供され、メッセージを効果的に伝え、視聴者の興味を引くことができます。

Gutenberg は、すぐに使用できる粘着ブロックを提供しません。 ただし、投稿やページにスティッキー ブロックを追加するために使用できるサードパーティ ツールがあります。

このチュートリアルでは、Otter Blocks と呼ばれる人気の Gutenberg プラグインを使用して、WordPress Web サイトにスティッキー ブロックを追加する方法を説明します。

それでは、詳しく見ていきましょう。 🤿

Gutenberg Editorでスティッキーブロックを追加する方法

Gutenberg Editor でスティッキー ブロックを追加するには、次の手順を実行する必要があります。

• ステップ 1: Otter Blocks プラグインをインストールしてアクティブ化する
• ステップ 2: ブロックのスティッキーへの変換ツールを有効にする
• ステップ 3: スティッキー ブロックの位置を変更する
• ステップ 4: オフセットを構成する
• ステップ 5: モバイルでスティッキー ブロックを有効にする
• オプションのステップ: フロート モードを試す
• オプションのステップ: ブロックの動作を指定する

ステップ 1: Otter Blocks プラグインをインストールして有効化する 🔌

Otter Blocks は、Gutenberg エディターの機能を拡張する WordPress プラグインです。

Web サイトのデザインと機能の向上に役立つ、ページ構成要素、エディター機能、およびテンプレートのコレクションを提供します。

Otter が提供する最も人気のあるブロックには、価格表、お客様の声、ソーシャル アイコン、地図、プログレス バー、アニメーション、カウントダウン、製品レビューなどが含まれます。 Otter ブロックの完全なリストは次のとおりです。

Otter Blocks には無料バージョンとプレミアム バージョン (Otter Pro と呼ばれます) があります。

無料版を使用すると、Gutenberg で基本的なスティッキー ブロックを作成できるため、このチュートリアルを無料で実行できます。

ただし、ブロックと画面間の距離の追加、フロントエンドのスティッキー ブロックの削除、モバイルでのスティッキー ブロックの表示など、説明した一部の手順を実行するには、プラグインのプレミアム バージョンが必要です。

Otter Pro は、1 つの Web サイトに対して年会費 49 ドルで利用できます。 ここから購入できます。 プラグインを使用する前に試してみたい場合は、このデモを試してみてください。

➡️ 続行するには、Otter の無料バージョンまたはプレミアムバージョンをインストールしてください。 以下のチュートリアルでは、特定の機能にプレミアム オプションが必要な場合に注意してみます。

ステップ 2: ブロックのスティッキーへの変換ツールを有効にする 🚧

Gutenberg エディターでスティッキー ブロックを追加するページまたは投稿を開きます。

スティッキーにしたいブロックを選択し、エディターの右側にあるパネルに移動します。

パネルで[ブロック]に移動し、 [ブロック ツール]オプションに移動します。 プラス記号を選択してブロック ツールを展開します。

次に、ドロップダウン メニューから[スティッキーに変換]を選択します。

Stickyという新しいオプションがブロック ツールのすぐ下に表示されます。 それを展開し、 Sticky Toに移動します。

Sticky To では、ブロックを貼り付ける要素を設定できます。 次の 4 つのオプションがあります。

1. 最上位ブロック
2. セクション
3. 親ブロック
4. 画面

これらのオプションと、どれがスティッキーポストに適しているかを理解するには、Gutenberg エディターでドキュメントの概要を開き、スティッキーポストブロックを囲むブロックを確認してください。

最上位のブロックはトップレベルブロックです。 最上位ブロックを選択すると、スティッキー ブロックが最上位ブロックに固定されます。 私たちの場合、それは下の画像の Group ブロックです。

次に、セクションを選択すると、スティッキー ブロックが確実にセクション ブロックに固定され、親ブロックを選択すると、スティッキー ブロックがスティッキー ブロックのすぐ上のブロックに固定されます。

この場合、親ブロックはセクション列ブロックです。 下の画像を参照してください。

最後に、 「画面」オプションを選択すると、すべてのブロックを無視して、投稿をユーザー画面の上部に貼り付けるようにエディターに指示されます。

スティッキー ブロックの位置は、デフォルトでは上部に設定されています。 位置を変更する方法については、次のステップに進んでください。

ステップ 3: スティッキーブロックの位置を変更する 🚩

スティッキー ブロックの位置を変更するには、右側のパネルに戻り、[Stick To] オプションのすぐ下にある [ Position]を探します。

粘着ブロックは画面の上部または下部に配置できます。 一番下の位置は、Otter Pro ユーザーのみが利用できます。

デモ サイトの 1 つでブロックがどのように表示されるかは次のとおりです。

ステップ 4: オフセットを構成する ⚙️

粘着ブロックの位置を設定したら、プレビューしてみます。 ブロックが画面から遠すぎるか近すぎる場合は、 [オフセット]オプションを使用して、粘着ブロックと画面の間の距離を増減します。

ステップ 5: モバイルでスティッキー ブロックを有効にする 📱

デフォルトでは、スティッキー ブロックはデスクトップにのみ表示されます。 モバイルで有効にする場合は、 「モバイルで有効にする」オプションをオンにします。

ちなみに、モバイルオプションにアクセスできるのはOtter Proユーザーのみです。

オプションのステップ: フロート モードを試す 🏄

ユーザーがページをスクロールするときに、粘着ブロックが画面に沿って浮かぶように設定できます。 これはユーザーの注意を引き、粘着ブロックに注目させるための優れた方法です。

Otter Pro ユーザーのみが float モードを使用でき、このモードはトップレベルのブロック (この場合はグループ ブロック) にのみ適用できます。

フロート モードを切り替えるとすぐに、ブロックの幅、側面、および側面オフセットを定義するように求められます。

もちろん、幅はブロックの幅を指し、側面は画面上のブロックの位置(左または右) を定義するのに役立ちます。 オフセットは、スティッキー ブロックと選択した側の間の距離を指します。

フローティング モードを設定した後、ページをプレビューし、必要な調整を行うことをお勧めします。

オプションのステップ: ブロックの動作を指定します 👨🏽‍💼

Otter Block プラグインを使用すると、同じページ上に複数のスティッキー ブロックを作成できます。 場合によっては、これらのブロックが互いに衝突することがあります。 [動作]オプションを使用して、衝突時にスティッキー ブロックがどのように反応するかを指定できます。

動作を折りたたみ、フェード、またはスタックに設定できます。

折りたたみを選択すると、次のように、衝突時に粘着ブロックが同じ動きで互いに折りたたまれるように設定されます。

また、フェードを選択すると、ブロックがフェードするか、一方のブロックがもう一方のブロックに消えるように設定されます。

最後に、[スタック] を選択すると、以下の gif に示すように、衝突する他の粘着ブロックの上にブロックがスタックされます。

フェードとスタックはどちらも Otter Pro ユーザーのみが利用できます。

それでおしまい。 これで、Gutenberg にスティッキー ブロックが追加されました。 🤩

Gutenberg で最初のスティッキー ブロックを作成します 🧱

Gutenberg に固定ブロックまたは固定ブロックを追加することは、WordPress Web サイトの重要な部分に訪問者の注意を引くための優れた方法です。

Gutenberg はデフォルトのスティッキー ブロックを提供していないため、サードパーティのプラグインを使用してこの機能をサイトに追加する必要があります。

スティッキー ブロック プラグインはいくつかありますが、Otter Blocks は最も簡単でユーザーフレンドリーなブロック プラグインです。

無料版とプレミアム版があります。 無料バージョンを使用してスティッキーブロックを作成できますが、画面下部のブロックの固定やモバイルでのブロックの有効化などの高度な設定の一部は、プラグインのプレミアムバージョンを使用して実現できます。

👉 Otter Blocks プラグインを使用してページ上でスティッキー ブロックを起動して実行するには、以下の手順に従う必要があります。

Gutenberg でスティッキー ブロックを作成する方法についてご質問がある場合は、以下のコメント セクションでお知らせください。