メニュー

吹き出しの使い方(レスポンシブ対応)

アンプレートは吹き出し機能が付いています。吹き出しというのは以下のようなものです。

太郎
こんにちは。太郎です。ここに文字を書きます。ここに文字を書きます。ここに文字を書きます。ここに文字を書きます。ここに文字を書きます。ここに文字を書きます。
花子
こんにちは。花子です。ここに文字を書きます。ここに文字を書きます。ここに文字を書きます。ここに文字を書きます。ここに文字を書きます。

吹き出しの使い方

まず、吹き出しに使う画像を用意します。

吹き出しの画像は縦60px × 横60pxで表示されます。そのため、60px × 60pxで作っていただくと良いかと思います。(これより大きい画像でも正常に表示されますが、ページの表示速度を下げないためには画像の容量を少しでも減らすことが重要です)

画像を作ったら、投稿画面の「メディアを追加」から画像をアップロードしてください。

画像をアップロードすると、画像の「リンクをコピー」から画像のURLをコピーできます。吹き出しに使う画像のURLをそれぞれコピーします。このとき、いったんメモ帳などに貼り付けておくと便利です。

 

次に、functions.phpを開きます。外観→テーマエディターから「テーマのための関数(functions.php)」をクリックします。

作業をする前に、必ずfunctions.phpのバックアップをとってから編集してください

下にスクロールしていくと「クイックタグ追加」という箇所があります。吹き出しと書いてある部分の()の中の文字はショートコードボタンに表示される文字になります。吹き出しに使う名前に変更してください。

 

次に、nameの””の中に書かれた文字は実際にページに表示される文字になります。吹き出しに使う名前を入力します。

 

例えば、ショートコードボタンに表示する名前とページに表示する名前が「信長」「お市」だとします。この場合、以下のようになります。

 

最後に、先ほどコピーした画像のURLを入力します。img=””の””の中に画像のURLをペーストしてください。できましたら「ファイルを更新」をクリックします。

 

これで吹き出しの設定は完了です。今後ショートコードを使うと、自動で今入力した内容が表示されるようになります。(その都度、画像や名前などを設定する必要がなくなります)

“”や,などを消してしまうとエラーが出ますので、必ずバックアップをとっておいてください。もし、エラーが出てしまった場合は、バックアップした内容に戻してやり直してみてください。

テキストエディタでショートコードを使う

記事の投稿画面でテキストエディタに切り替えます。上のメニュー欄に吹き出しというボタンがあります。ボタンをクリックします。

 

吹き出しのショートコードが表示されました。

 

text=””の中の本文と書かれた部分に内容を書きます。(””は消さないでください)

 

「公開する」をクリックします。ページに吹き出しが表示されました。

デザインはすでにCSSで設定されているので、ショートコードを入れるだけで吹き出しが使えます。吹き出しは何回でも使えます。レスポンシブ対応です。