スポンサーリンク

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

2019年3月3日

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

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

きらり
きらり
結耶は迷った?
結耶
結耶
はい…しっかり迷いました。

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

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

スポンサーリンク
スポンサーリンク

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を入力
3 キャラクターの名前(アイコン画像の代替テキスト)
3 アイコンの下に表示する名前

下 段

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

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

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

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

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

きらり
きらり
これで「吹き出しの作成」は終わりです。 忘れずに[保存>]してくださいね。
結耶
結耶
上記は「左の吹き出し」です。「右の吹き出し」も同じように変更してください。
スポンサーリンク

記事に挿入する

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

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

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

きらり
きらり
これでボクたちみたいな吹き出しができるんだね!
結耶
結耶
そうそう♪あとからでも『サンプル登録(定型文)』でCSSを変更して色を変えられるんだよ〜。

2019年5月26日 追記

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

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

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

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

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

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

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

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

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

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

最後に

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

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

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

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

スポンサーリンク
 
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。