スポンサーリンク

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

2019年3月3日Luxeritas

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

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

きらり

きらり

結耶は迷った?
結耶

結耶

はい…しっかり迷いました。

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

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

2020年8月1日

こちらの記事は「定型文登録機能を使った吹き出しの作成方法」を紹介しています。

ブロックエディタでの吹き出しの作成方法は以下の記事をご覧下さい。

スポンサーリンク

Luxeritasで吹き出しを作る

 場所  [Luxeritas][定型文登録][サンプル登録(定型文)]タブ

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

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

吹き出し用のCSS設定

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

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

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

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

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

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

 場所  [Luxeritas][定型文登録][定型文]タブ

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

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

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

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

上 段

<div class="balloon">
  <div class="balloon-img-left">
    <figure><img src=" 1 /wp-content/themes/luxeritas/images/white-cat.png" width="60″ height="60″ alt="2 Left Caption" /></figure>
   <span class="balloon-img-caption">3 Left Caption</span></div>
<div class="balloon-left">

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

ここに会話文が入ります</div>
</div>

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

<!--左の吹き出し-->
<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>
<!--左の吹き出し 終わり-->

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

注意
<!–〇〇–>部分はコメントアウトで、記事にコードを書いたときに目印などの目的で使用されるものです。
記事に挿入してもページに表示されません。

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

きらり

きらり

これで「吹き出しの作成」は終わりです。
忘れずに[保存>]してくださいね。

結耶

結耶

上記は「左の吹き出し」です。「右の吹き出し」も同じように変更してください。

記事に挿入する

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

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

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

きらり

きらり

これでボクたちみたいな吹き出しができるんだね!
結耶

結耶

そうそう♪あとからでも『サンプル登録(定型文)』でCSSを変更して色を変えられるんだよ〜。

吹き出しのカスタマイズ

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・代替テキスト・表示する名前を変更して、ラベルを入力、囲み型に チェックを入れて保存すれば追加できます。

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

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM