ど~も
タケです!
今回はWordPressのGutenbergを利用中に吹き出しを表示する方法についての解説です!新エディターのGutenbergを使用している方は多いと思いますが、従来の吹き出しの出し方がGutenbergでは出来なくなりました、このサイトではその表示方法を解説します!
下のような感じです!
![](https://1.bp.blogspot.com/-tV80lgeNM9I/XpKjQWMPvcI/AAAAAAABYVg/RaRYvkh-wLcoQwuDoE6c3Iegs_jmR0FyQCNcBGAsYHQ/s400/computer_greenback_man.png)
やっと出来た!
従来のクラシックエディター
![](https://takehack-blog.com/wp-content/uploads/2020/08/image-1024x437.png)
新しくなったブロックエディター
![](https://takehack-blog.com/wp-content/uploads/2020/08/image-1-1024x195.png)
この新しいブロックエディターだと吹き出しがこの様になります
![](https://takehack-blog.com/wp-content/uploads/2020/08/image-2-1024x287.png)
![<img alt=](https://takehack-blog.com/wp-content/themes/cocoon/images/man.png)
![](https://1.bp.blogspot.com/-tV80lgeNM9I/XpKjQWMPvcI/AAAAAAABYVg/RaRYvkh-wLcoQwuDoE6c3Iegs_jmR0FyQCNcBGAsYHQ/s400/computer_greenback_man.png)
吹き出し
画像の上に記述が出てしまいます!
まずは吹き出しの新規登録方法から、Cocoon設定の吹き出しをクリックします!
![](https://takehack-blog.com/wp-content/uploads/2020/08/image-5.png)
新規追加をクリックして必要な項目ごとに入力します
![](https://takehack-blog.com/wp-content/uploads/2020/08/image-6-1024x514.png)
登録が完了すると下の画像のようになります
![](https://takehack-blog.com/wp-content/uploads/2020/08/image-7-1024x236.png)
次は従来のクラシックエディターを下の項目から選択して
![](https://takehack-blog.com/wp-content/uploads/2020/08/image-3.png)
クラシックエディターに切り替えます
![画像に alt 属性が指定されていません。ファイル名: image-1024x437.png](https://takehack-blog.com/wp-content/uploads/2020/08/image-1024x437.png)
クラシックエディターの吹き出しの項目を選択すると下の画像のような選択肢が表示され登録した選択肢を選択します!
![](https://takehack-blog.com/wp-content/uploads/2020/08/image-4-1024x347.png)
すると作成した吹き出しが画像と一緒に表示されます!
![](https://1.bp.blogspot.com/-tV80lgeNM9I/XpKjQWMPvcI/AAAAAAABYVg/RaRYvkh-wLcoQwuDoE6c3Iegs_jmR0FyQCNcBGAsYHQ/s400/computer_greenback_man.png)
内容を入力してください。
以上です、簡単でしょ?
わからなければ質問ください
終わり
コメント