SANGOで吹き出しを使う方法!アイコンが表示できない場合の対処法も解説

WordPressテーマ「SANGO」では、吹き出しを簡単に使うことができます

事前にアイコンの画像や名前を登録しておけば、毎回アイコン画像を選択する手間も省けます。

この記事では、簡単に吹き出しを使うための設定方法や使い方、アイコン画像を設定しているのに表示されない場合の対処法についても説明します。

こんな吹き出しが

簡単に表示できるようになります。

この記事で分かること
  • SANGOでの吹き出しの使い方
  • アイコン画像を設定しているのに表示されない場合の対処法
  • 再利用ブロックを活用して吹き出しを便利に使う方法



吹き出しの使い方

GutenbergエディタでSANGOを使っている場合、吹き出しはブロックとして準備されています。

設定でアイコン画像や名前を登録しておくと、ブロックを呼び出すだけでアイコン画像や名前を表示することが可能です。

ただし、事前にアイコン画像や名前を登録しているはずなのに表示できない場合もあります

これらの対処法についても解説します。

アイコン画像と名前を登録しておく

WordPressの管理画面からアイコン画像と名前を設定しておきます。

アイコン下に表示される名前は、必要なければ空白にしておくと表示されません。

アイコン画像と名前の登録場所

「WordPress管理画面」→「外観」→「カスタマイズ」→「詳細設定」→「吹き出しショートコードのデフォルト設定」

(アイコンが表示されない)吹き出しの使い方

吹き出しブロックを使う方法は2通りあります。

ショートカットを使う

「/」+「吹き出し」で吹き出しが出てきます。

一番上の「吹き出し」を選択します。

下2つは私が「再利用ブロック」として登録したものです。

内容については後で説明します。

ブロック挿入ツールを使う

右上の「+」ボタンを押して、「吹き出し」を選択します。

一番左の「吹き出し」を選択します。

右2つは私が登録した「再利用ブロック」です。

登録したアイコン画像が表示されない

上記の方法で呼び出したブロックは以下のように表示されます。

下記がページプレビューで見た場合です。

登録した画像が表示されていません。

アイコン部分をクリックすると、アップロードした画像からアイコン画像を選択することができます。

「名前」をクリックすると、名前も追加することができます。

しかし、事前に画像を登録したはずなのに画像が表示されなく不便です

(アイコンが表示される)吹き出しの使い方

事前に登録したアイコン画像を表示するためには「ショートコード」を使います。

「ショートコード」を使うと、吹き出しを右側に設置することもできます

ショートコードを使うためには、「/」を押して「ショートコード」を選択するか、右上の「+」ボタンを押して「ショートコード」を選択してください。

下記のように追加してみてください。

ショートコード
    

ここにコメントを書きます。

プレビューを見ると、事前に登録したアイコンが表示されています。

ここにコメントを書きます。

吹き出しを右側に表示する

吹き出しを右側に表示するためには、下記のようなショートコードを記入します。

ショートコード
    
右側に吹き出しが表示されます

右側に吹き出しが表示されます

登録したアイコン以外の画像を使用する

登録したアイコン以外の画像を使用する場合は、事前に準備されている吹き出しブロックを使用するか、ショートコードを使うことで使用できます。

ショートコードを使えば、登録したアイコン以外を使用しつつ、右側に吹き出しを表示することができます。

また、登録したアイコン画像とは別のアイコン画像を吹き出しに登録しておくこともできます。

こちらについては、後で説明します。

登録したアイコン以外の画像を使用する方法

まずは、使用したいアイコン画像のURLを調べます。

画像のURLの調べ方

「WordPress管理画面」→「メディア」で表示したい画像をクリックします。

「URLをクリップボードにコピー」をクリックすると、画像のURLがコピーできます。

続いて、以下のようにショートコードを書きます。

ショートコード
    

サブアイコンの名前

ここにコメント

「画像のURL」の場所に上記で調べた画像のURLを貼り付けてください。

「name」はアイコン画像の名前を表示できますが、必要無ければ name="サブアイコンの名前" は削除してください。

実際にショートコードを記入すると、下記のように表示されます。

サブアイコンの名前

ここに文章

右側にアイコンを表示したい場合は、下記のようにfrom="right"を追加してください。

HTML
    
ここに文章

サブアイコンの名前

ここに文章

サブアイコンの名前

再利用ブロックで吹き出しブロックを自作する

ショートコードを使えば簡単に吹き出しを表示することができますが、毎回ショートコードを書くのは面倒です。

「再利用ブロック」を利用すればショートコードを登録しておくことができるので、クリックのみで吹き出しを呼び出すことができます

吹き出しブロックの自作方法

まずは登録しておきたいショートコードを記入します。

今回は、アイコン画像を指定し、右側に吹き出しを表示するような長めのショートコードを使用します。

吹き出し内に書くコメントは毎回違うので登録はしません。

登録するショートコード
    

登録するショートコードを選択して、「再利用ブロックに追加」を選択します。

名前を付けます。名前は自分がわかりやすい名前にしておいてください。

登録した吹き出しを使用する

右上の「+」ボタンを押して、「再利用可能」をクリックします。先ほど作成した再利用ブロックを選択します。

先ほど表示したショートコードが表示されます。

これで表示がされていますが、注意点があります。以下の手順を必ず行ってください

追加したショートコードをクリックして、「再利用ブロックを選択」をクリックします。

「通常ブロックへの変換」をクリックします。

これで吹き出しが利用できます。

吹き出し内のコメントを自由に記入してください。

吹き出しの登録ができました。簡単に使用できます。

「通常ブロックへの変換」を行う理由

 通常ブロックへの変換を行わないまま、つまり、再利用ブロックをそのまま使用する場合、登録した再利用ブロックをそのまま書き換えることになります。

例えば、吹き出し内のコメントを書き換えて公開した場合、他の記事で再利用ブロックを使用しているとその記事にも今回変更した内容が反映されます。

通常ブロックに変換することで、再利用ブロックからは切り離されることになるので、上記のような心配はありません。

 再利用ブロックの便利な使い方については、別の記事に書いていますので参考にしてください。

再利用ブロックでWordPress記事を書く効率を上げよう!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


検索

アーカイブ

プロフィール

プロフィール背景画像
プロフィール画像

チャベス

1989生まれ、機械機器メーカーで研究開発をしている機械系エンジニアです。 業務効率化や日々の生活を効率化できるプログラミングネタを発信しています。PythonとNotionとSANGO(WordPress)が特に好きです。 詳細プロフィールはこちらnoteにNotionの記事も書いています。

WP-Searchにサイト事例として掲載されています。