ルクセリタスの吹き出し定型文の出し方とカスタマイズ

左右にキャラアイコンが出て、吹き出しの中でおしゃべりしているようなデザイン、よく見ますよね。

ルクセリタスにもその機能がありますので、使い方とカスタマイズ方法をご紹介します。

 

2019/7/28 追記

Luxeritas Ver.3.6.7以降、ブロックエディタに更に高機能な吹き出し機能が追加されました。

ブロックエディタ「Gutenberg」をお使いで、Ver.3.6.7以降のルクセリタスの方は、以下の「吹き出し」の項をご覧ください。

ルクセリタス・ブロックエディタ独自機能の使い方-Luxeritas Blocks
ルクセリタスには、WordPressバージョン5.0以降、新しいエディタGutenberg(グーテンベルク)に対応した独自の装飾機能やブロック機能があります。 ※Luxeritas Ver.3.6.0~ 今回は、標準のエディタにはないルクセ...

 

2019/9 追記

Ver3.6.2以降、定型文登録とショートコード登録が分離され、吹き出しの初期色なども変更があった為、現時点での画面で記事を修正しました。記事作成時のバージョン 3.7.0.1

 

 


 

吹き出しの出し方

ブロックエディタを利用しない場合の吹き出し機能は、定型文を使う方法と、ショートコードを使う方法の2種類あります。

初期設定では白猫と黒猫の画像が使われています。

画像も独自のものを使いたい場合は、ショートコードのサンプルから登録する方法が便利です。

 

ショートコードで使う

「Luxeritas」→「パターン登録

ショートコード」タブから「サンプル登録」ボタン


「吹き出し」のサンプル用チェック項目があります。

 

「吹き出し(左)または(右)」または両方にチェックを入れます。

※ 左右 両方一度に作成可能。ここにチェックを入れると「吹き出し用CSSを読み込む」に自動的にチェックが入ります。

 

それぞれの画像を選択します。

※画像の幅 60px 推奨

 

キャプションを入れます。

キャプションとは、画像下に出る文字です。たとえばデフォルトの猫ちゃんであれば

「タマ」とか「白猫」とか、好きな名前を入力します。

 

カラー設定

好きな色に設定し、「変更を保存」を押します。

 

 

ショートコード内容を修正・削除・エクスポートする

「Luxeritas」→「ショートコード登録」を開きます。

ここからそれぞれの修正・削除・エクスポートが可能です。

 

サンプルからの登録は1度しか出来ません。

 

修正したい場合は、編集する事も可能ですが、一度「削除」し、もう一度サンプル登録から作り直す方が簡単でミスがないです。

 

エディタに挿入

エディタ画面を開き、「ショートコード」を押すと「吹き出し」が追加されています。

吹き出しの中に入れたい文字列を選択状態にしてから「ショートコード」を押します。

左、または右のどちらかを選択。

 

色、デザイン、画像を初期値のまま作った吹き出しの表示例

 

 

定型文を使う

「Luxeritas」→「パターン登録」

 

定型文」タブから「サンプル登録」ボタン

 

 

 

「吹き出し」のサンプル用チェック項目があります。

「吹き出し(左)または(右)」または両方にチェックを入れます。

※ 左右 両方一度に作成可能。ここにチェックを入れると「吹き出し用CSSを読み込む」に自動的にチェックが入ります。

 

 

カラー設定

好きな色に設定し、「変更を保存」を押します。

 

 

定型文のカスタマイズ

好きな画像、よく使う名前で定型文登録しておけば、更に便利です。

「定型文」タブ→「吹き出し」→「編集」でコードを開きます。

 

 

以下を直接編集する事で、ラベル、画像、キャプションの変更が可能です。

 

更にコピーして他の画像や名前の吹き出しを作成する事も可能です。

 

新規追加で行う場合は、「囲み枠」にチェックを入れ、下に「</div></div>」のコード追加もお忘れなく!

エディタに挿入

エディタ画面を開き、「定型文」を押すと「吹き出し」が追加されています。

 

 

「定型文」ボタンがない場合

「Luxeritas」→「管理機能」→「エディタ設定」タブで、「定型文」を追加します。

 

 

初期設定のまま利用する

このままテキストエディタから編集することも可能です。

 

カスタマイズ

位置やサイズの変更

吹き出しのサイズや、テキストを中央寄せにしたいなどは、CSS追記で対応可能です。

親テーマの「balloon.css」に記述があります。

編集例で使用した対象のクラス(セレクタ)

  • balloon(全体)
  • balloon-left(左側の吹き出し内テキスト)
  • balloon-right(右側の吹き出し内テキスト)

直接、親テーマのファイルを変更しないようにご注意下さい!

子テーマのスタイルシートに以下のような追記をすれば変更可能です。

/*吹き出し*/.balloon {
max-width: 600px;
}
.balloon-left {
text-align:center;
}
.balloon-right {
text-align:center;
}

初期コード

 

デフォルトの猫ちゃんもかわいいので置いておきたかったーって方の為に、初期コード置いておきます!

 

カスタマイズを元に戻したい時などに、コピペでお使い下さい。

【右】
<div class="balloon">
<div class="balloon-img-right">
<figure><img src="/wp-content/themes/luxeritas/images/black-cat.png" width="60" height="60" alt="Right Caption" /></figure>
<span class="balloon-img-caption">Right Caption</span>
</div>
<div class="balloon-right">
</div>
</div>

 

 

【左】

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

 

ルクセリタスのカスタマイズは以下もご覧ください。

ルクセリタスLuxeritasの約40ヵ所をカスタマイズ!高速・高機能無料テーマ
高機能でスピード抜群の無料テーマ「ルクセリタス」を、いろいろカスタマイズしていますので、少しまとめてみます。 カスタマイズ済みの当サイトオリジナルデザインファイルは以下をご覧ください。 ルクセリタスについて 今のところテーマはこの一択と決め...
綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています