Gutenbergで使えるBefore,After画像比較プラグイン「TwentyTwenty」

WordPerssはGutenbergとClassicEditorどちらを使って記事を作成していますか?

私は、ブログ毎に分けて両方使っています。

Gutenbergを使う際に、使える画像比較プラグインは「TwentyTwenty」です。

今回は「TwentyTwenty」の使い方解説です。

この記事を読むと
・Gutenbergで画像比較プラグインを利用できる

プラグイン「TwentyTwenty」

プラグインは「TwentyTwenty」でダウンロードできます。

プラグインの追加方法はこちらをご覧ください。

WordPressのプラグイン追加・有効化方法

TwentyTwentyのインストールが完了したら、実際に操作してみましょう。

ショートコードを使用

TwentyTwentyは、ショートコードで簡単に使用できます。

GutenbergのブロックはClassic Paragraphを利用しましょう。

画像の比較は、2枚の画像を

[twentytwenty] [/twentytwenty]

で囲えば完了です。

このように囲うことで、以下のように表示されます。

マウスオーバー
通常表示

これで簡単に画像比較が可能です。

ぜひ使ってみてください。

実際の使用感は、こちらの記事でご確認ください。

10万円からのホームページ制作
「NiGLAN」

常時SSL・レスポンシブデザイン・新着情報投稿機能(ブログ)など必要な機能が揃って10万円~ホームページを制作できます。

ホームページ制作「NiGLAN」
最新情報をチェックしよう!
>「アレコレ.jp」

「アレコレ.jp」

当サイトは、仕事と暮らしに役立つ情報を掲載します。普段の生活にプラスαでアレコレの情報を習得しましょう。簡単な勉強の一環として利用するも良し。毎日の楽しみとして利用するも良し。さまざまな情報をお楽しみください。