ざっくりLuxeritas(ルクセリタス)新機能吹き出し機能使い方解説

2018年5月21日

結局前回記事で吹き出しを使ってしまったので、一応初心者向けの使い方を書いてみます。

と言っても先述の通り、めちゃくちゃ使いやすいのでかなりざっくり書きます。

ショートコード・定型文機能を基本的に使いますので先にこちらの記事を読んでいただいたほうが理解しやすいです。

吹き出し機能使い方

ショートコード編

この機能はどちらかと言えば、ショートコードの方が簡単に設定できます。

有効化したいものにチェック入れて、画像選択からメディアファイルを指定。

あとはキャプション(画像下に表示する名前)をお好みに変えるだけ。

画像サイズは幅60px推奨となっていますので注意。

このぐらいがきれいな感じします。

この記事書いた当初は気付いてなかったんですが(後述)高さについても60pxに合わせる必要があります。サンプルがそうなっているので…。

もし60px以上の高さを設定したい、という場合はショートコード内の該当部分を編集する必要があります。

直接いじるのは怖い、という初心者の方はCSSに記述するという対処方法もあるので参考にしてください。

保存後記事内にショートコードタブから挿入すれば、

中下くん
中下くん
こうなるのだよ。

簡単ですね。

CSSは文字色・背景色・枠線・影が選択できます。

吹き出しの画像の高さが違和感ある場合

追記:なんかやっぱおかしい感じですねw

検証ツールで見てみるとwidthが60pxなのは元々書いてありましたが、heightまで60pxになってるっぽいですね。

←元画像

あんまりシュッとしていないのがかなり気になりますが、これは僕が画像の高さ設定をいじってなかったからです…。もうワンパターンは定型文で入れてるのでちゃんと合わせています。

先程述べたようにこれを何とかしたい、という場合には応急処置として、右側の画像の場合は

.balloon-img-right img{
height:100%!important;
}

これをスタイルシートに記述すればなんとかなります。(important付けないと効きませんので注意。)

こっちはショートコードで、あとに出てくるキャラは定型文で書いてます。

ショートコードで何も変えないとこうなります。(パチンコブログでも右だけ違和感w)

定型文編

定型文はちょっと手間が掛かります。(と言っても簡単)

有効化し内容を見るとこうなってます。

  • 赤丸部分に/wp-contentからのURL
  • 青丸部分に画像の高さ
  • 緑丸部分に表示したい名前

これをそれぞれ書きます。

どこ見りゃいいの?って場合はこの画像参照↓

以下を指定し保存すると、

Left Caption

リアナ

このように違う画像が登録できちゃいます!

こんな感じになりました。このキャラは、パチンコブログで使ってます。説明用に降臨。

もし画像が表示されないんだけど?ってなっちゃった場合はこちらの記事にそれっぽい事書いてます。

一応こちらでもざっくり説明すると、サブディレクトリでブログを運営されている場合は上記画像赤丸部分の先頭にサブディレクトリ名も付け加える必要がありますので注意です!

些細なアレンジw

お好みでこういったCSSを追記しておけば太字にも出来ます。

.balloon-left{
font-weight:bold;
}

まとめ

とりあえずショートコードでは2パターンの画像を。定型文でも2パターンの画像ということで4パターンは作製できます。

それ以上使いたい場合は内容をコピペして自作推奨です。

CSS(吹き出しの見た目)については、クラス指定の都合上左右での2種類しか設定出来ませんが、「こだわりたいんや」という場合は検証ツールなんかを使って記述してあるものをコピーしていじることで対応出来ます。追加分はクラス名を変えて…。

こちらで吹き出しアレンジカスタマイズについてのざっくりとした解説記事を書いてみました。

またヒマならやりますが、自分はこれで満足なのでとりあえずはこんだけで終わっておきます。