【Luxeritas】吹き出しを作る方法

2019年3月3日2021年7月17日Luxeritas

WordPressテーマ『Luxeritasではプラグインを使わずに吹き出しを作ることができます。

作り方は簡単なのですが、はじめて作るときはどこで作ればいいかちょっとわからないかもしれません。

なので今回は「Luxeritasで吹き出しを作る方法」について書きます。

※Luxeritasについてはこちらを参考にしてください。

Luxeritasで吹き出しを作る

表示された画面を少し下にスクロールすると『吹き出し』という項目が出てきます。

「吹き出し(左)」「吹き出し(右)」にチェックを入れてください。(片方だけ作りたい場合は、お好きな方にチェックを入れてください。)

吹き出し用のCSS設定

次に吹き出し用のCSS設定をします。

『吹き出し用の CSS を読み込む』にチェックを入れてください。

吹き出し(左)・吹き出し(右)の文字色、背景色、枠線の色・太さ、影の設定をしてください。

※下の「最大幅」は「0」は100%なので必要に応じて変更してください。

設定したら、変更を保存を押してください。

記事に挿入するコードを編集

次にアイコン画像などの編集をします。［定型文］タブをクリックしてください。

「吹き出し(右)」と「吹き出し(左)」が追加されていますので、編集する吹き出しをクリック［編集］をクリックしてください。

上のような画面が表示されます。

まずは上段のコードの以下の部分を変更してください。(上段、下段に別れていない場合は左下にある「囲み型」)にチェックを入れてください。

1. 吹き出しに表示するアイコン画像のURLを入力
2. キャラクターの名前(アイコン画像の代替テキスト)
3. アイコンの下に表示する名前

下段はコメント部分になります。黄色い部分に会話文が入ります。(会話文は記事に挿入したときに入力します。)

<!--左の吹き出し-->
<div class="balloon">
<div class="balloon-img-left">
<figure><img src="アイコン画像のURL" width="60" height="60" alt="代替テキスト" /></figure>
<span class="balloon-img-caption">アイコンの下に表示する名前</span></div>
<div class="balloon-left">
ここに会話文を入れる</div>
</div>
<!--左の吹き出し 終わり-->

こんな感じにするといいと思います。

上記部分を変更したらボックスの下にある『囲み型』に チェックを入れてください。

記事に挿入する

記事内に吹き出しを挿入するには、投稿画面上部に［定型文］というボタンがあるのでクリックしてください。

このようなボックスが表示されますので、記事に入れたいものをクリックすれば記事に挿入されます。

_記事にコードを挿入したら会話文を入力します。

吹き出しのカスタマイズ

2019年5月26日 追記

吹き出しの横幅を文字数に合わせる

上で吹き出しを作る方法を紹介しました。
記事に挿入して見てみると…吹き出しが短い文章でも画面いっぱいになっています。

吹き出しは文字数(文章の長さ)に合わせたいですよね。
それにアイコンと吹き出しの間の余白や吹き出しの中の余白も調節したい！

CSSを追加してこのようにしてみたいと思います。

/* ------------------------------
 * 吹き出し 横幅t調整
 * ------------------------------*/
.balloon-right {
    margin-right:18px;  /*アイコンと吹き出しの間の余白*/
    padding:10px;    /*吹き出し内の余白*/
    float:right;
	max-width: calc(100% - 160px);
}

.balloon-left {
    margin-left:18px;    /*アイコンと吹き出しの間の余白*/
    padding:10px;    /*吹き出し内の余白*/
    float:left;
	max-width: calc(100% - 160px);
}

/* スマホの横幅を調整*/
@media(max-width:540px) {
.balloon-left,.balloon-right {
	max-width: calc(100% - 80px);
}
}

スマホで見たときの横幅が狭かったのでスマホ用の横幅の調整をしてみました。

※5行目・12行目はアイコンと吹き出しの間の余白です。

※6行目・13行目は吹き出しの中の余白です。

※7行目・14行目は吹き出しの表示位置です。(変更しないでください。

※8行目・15行目・21行目は吹き出しの最大幅です。(calc () で最大幅を制御)

これで吹き出しの横幅を文字数に合わせることができます。
余白はみなさんの好みで調整してみてください。

2020年8月9日 追記

画像サイズを変える

吹き出しの画像サイズは60pxが推奨となっていますが、画像サイズを変更したい場合は以下をCSSに追加してください。

/*------------------------------
Luxeritas吹き出し 画像サイズ
------------------------------*/
.balloon figure{
    width:90px;    /*画像サイズ(横幅)*/
}

.balloon figure > img{
    width:100%;
}

/*スマホの画像サイズ*/
@media(max-width:540px) {
  .balloon figure{
      width:60px;    /*画像サイズ(横幅)*/
  }
}

PCなどの大きい画面とスマホなどの小さい画面での画像サイズを分けています。サイズを分けない場合は10行目までをコピーして追加してください。

最後に

今回は「Luxeritasで吹き出しを作る方法」について書いてみました。

もっと吹き出しを登録したいとき

ちなみに「もっとキャラクターを増やしたい」「吹き出しを増やしたい」ときは、吹き出し(左)・吹き出し(右)の上段、下段のコードをコピーして、［定型文］タブ［新規作成］ボタンをクリックして貼り付けてアイコン画像のURL・代替テキスト・表示する名前を変更して、ラベルを入力、囲み型に チェックを入れて保存すれば追加できます。

記事に吹き出しを入れるとみる人も楽しくなります。
吹き出しを使って楽しく記事を書いてみてください。