ルクセリタス

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説)

スポンサーリンク

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 私困 232x300
困っている人
ルクセリタスの吹き出しってどうやって作るの?

 

上記のお悩みを解決します。

 

本記事の根拠

  • 兄弟ブログの『ぶろぐしる~』はルクセリタスで吹き出しを多用しまくっています

 

それでは、本題に入ります。

 

ルクセリタス 吹き出しの作り方

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 結果 1592450956 1024x410

結論です。

ルクセリタスでは、吹き出しを表示する方法が『ショートコード』と『定型文』の2つあります。

 

2パターンの吹き出し作成方法

定型文

ショートコード

 

私は、『定型文』の方で吹き出しを挿入しています。

このあたりは実際に使われてみて、自分が使いやすいと感じたほうで良いです。

 

 

吹き出しの完成イメージは下記の通りです。

完成イメージ

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 0 ルクセリタス吹き出し完成形

 

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) img 4776
ばらもん。
解説します

 

イラストACで吹き出しアイコンを無料ダウンロード

無料イラストなら【イラストAC】【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) g5iueh?a aid=5f6c0b53dcd52&a bid=e576d457でお好きなアイコンを探してダウンロードします。

 

ココがおすすめ

イラストACは無料でダウンロードできる!

 

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) img 4776
ばらもん。
イラストACに無料会員登録がまだの方は、登録しちゃいましょう!

 

\無料でイラスト無限大?!/

無料イラストなら【イラストAC】

登録しないのは損かも?

 

step
1
無料イラストなら【イラストAC】【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) g5iueh?a aid=5f6c0b53dcd52&a bid=e576d457】にアクセス

無料で会員登録できます。(1分ほどで登録完了)

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 1 イラストACトップ

 

 

step
2
登録が完了したら、イラストを選びます

兄弟ブログの『ぶろぐしる~』では、『麦さん』のイラストを使わせていただいています。
優しいタッチのイラストですので、お気に入りです。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 2 イラストAC麦さん

 

step
3
気に入ったイラストを選択して、『PNG』をクリック

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 3 イラストACダウンロード画面

 

step
4
ダウンロードをクリック

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 4 イラストACダウンロード

 

step
5
15秒カウントが始まるので、待機

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 5 イラストACダウンロード中

 

step
6
15秒後に、下記の画面が表示されるので、『PNG』をダウンロード

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 6 イラストACダウンロード開始

 

 

ダウンロード完了で、イラストACでの作業は終わりです。

 

ダウンロード後はPNG圧縮

PNGファイルのダウンロードが完了したら圧縮します。
小さいことの積み重ねが、のちのち大きな差となってきます。

 

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) img 4776
ばらもん。
塵も積もればなんとやらですね

 

step
1
『PNGイメージをオンラインで圧縮する』にアクセス

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 01 PNG画像圧縮サイト

 

step
2
該当画像をアップロードして圧縮

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 02 PNG画像圧縮手順

 

step
3
圧縮が完了したらダウンロードして完了

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 03 PNG圧縮手順

 

吹き出しアイコンに限らず、画像はすべて圧縮してからWordPressにアップロードすることをオススメします。

画像サイズを最適化することで、ページ表示速度のアップが期待できます。

 

ワードプレスにメディアファイルを取り込む

イラストACからダウンロードしたイラストをワードプレスのメディアにアップロードします。

 

ワードプレスにアップロードができたら、

チェックリスト

代替テキストを入力します

タイトルを入力します

リンクをコピーします

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 7 ワードプレスメディア

 

 

 

ココがポイント

代替テキスト挿入はSEO効果も期待できる

 

 

画像をアップロードするたびに、代替テキストを入力していたら大変です。

 

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) img 4776
ばらもん。
そこで、プラグインの出番です

 

代替テキストを自動セットするプラグインをご紹介!→『【代替テキスト】ワードプレスプラグインで時短!SEO効果も期待?!

↑の記事で、自動で代替テキストをセットするプラグインをご紹介しています。

もちろん、当ブログにも実装しております。

 

Luxeritas(ルクセリタス)ショートコードを登録する

ひとつめの吹き出し作成方法をご紹介します。

 

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) img 4776
ばらもん。
ショートコードを用いた方法です

 

 

step
1
Luxeritas→Luxeritasショートコード登録→サンプル登録

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 8 ルクセリタスショートコード登録

 

 

step
2
画像URLにコピーしたメディアURLを貼り付け

キャプションには、今回は例として『主婦』と入力します。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 9 ルクセリタスショートコード編集

 

step
3
色の設定

『変更を保存』をクリックします。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 10 ルクセリタスショートコード色

 

以上でショートコードの設定は完了しました。

実際に使ってみます。

 

ショートコードを使ってみる

登録したショートコードを使ってみましょう。

 

step
1
入力した文字を選択した状態で、『ショートコード』を選択

『吹き出し(左)』をクリックします。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 11 ルクセリタスショートコード使用

 

たったこれだけです。

 

左吹き出しの完成

プレビュー画面で出来上がりをチェックしてみます。

 

こんな感じで完成しました。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 12 ルクセリタス吹き出し完成形

 

以上が、ショートコードを用いた吹き出しの作成方法です。

続いては、定型文を用いた方法をご紹介します。

 

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) img 4776
ばらもん。
私が多用している方法になります

 

Luxeritas(ルクセリタス)定型文を登録する

Luxeritas(ルクセリタス)定型文登録の方法を説明します。

 

私は『ぶろぐしる~』で記事を書くときには、定型文で吹き出しを使っています。

 

完成イメージ

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 24 ルクセリタス定型文完成

 

 

step
1
Luxeritas→Luxeritas定型文登録

吹き出し(右)にチェックします。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 13 ルクセリタス定型文登録

 

step
2
色の設定

『変更を保存』をクリックしてください。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 14 ルクセリタス定型文登録色

 

step
3
『定型文』タブを開くと、『定型文一覧』が表示されます。

一覧に、作成した『吹き出し(右)』があります。

『編集』を開きます。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 15 ルクセリタス定型文登録画面

 

step
4
白枠で囲ってある2つのコードをメモ帳にでもコピペしておきます。

 

ポイント

この2つのコードは頻繁に使うので、Windows機能の『辞書登録』に登録をしておくと便利です。

吹き出しをたくさん設定しておく場合には、作業効率が大幅アップします。

 

コピペできたら、『定型文編集』画面をキャンセルで閉じます。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 16 ルクセリタス定型文辞書登録

 

step
5
『新規追加』で定型文を登録

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 18 ルクセリタス定型文新規追加編集画面

 

step
6
定型文を使うときに分かりやすいラベル名を付与

 

今回は例として、『右主婦疑問?』と付けました。

左下の『囲み型』にチェックをします。

定型文とその下のボックスには、メモ帳にコピペしておいたコードを貼り付けします。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 19 ルクセリタス定型文編集画面 辞書から変換

 

step
7
画像で選択している部分を、吹き出しに表示させたいメディアURLに置き換え

img src="ココダヨ!!!"の部分です。

height="60"→"80"に変えておきましょう。(高さ調整)

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 20 ルクセリタス定型文編集画面 メディアURL

 

step
8
『Right Caption』のところを、任意の文字列に打ち替え

『Right Caption』のところを、『主婦』と入力します。

すると、吹き出しのアイコンの下に『主婦』と表示されます。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 21 ルクセリタス定型文編集画面 アイコン下

 

以上で定型文の吹き出しの設定は完了しました。

実際に使ってみます。

 

定型文を使ってみる

登録した定型文を使ってみましょう。

 

 

step
1
入力した文字を選択した状態で、『定型文』を選択

 【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 22 ルクセリタス定型文使用

 

step
2
登録した定型文を選択

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 23 ルクセリタス定型文使用

 

吹き出しが挿入されました。

 

右吹き出しの完成

プレビュー画面で吹き出しをチェックしてみます。

こんな感じで完成しました。

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 24 ルクセリタス定型文完成

 

まとめ

 

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) img 4776
ばらもん。
いかがでしたか?

 

吹き出しを上手に配置することで、読者が感情移入しやすくなるメリットがあります。
上手に感情移入させてあげることで、購買意欲を高めることも可能です。

 

例えば、こんな感じです。

 

 

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) 私困 232x300
困っている人
吹き出しって効果あるの?
もちろん!
【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) img 4776
ばらもん。

 

ただし、吹き出しを多用すると見づらくなるので注意です。

 

吹き出しを上手に使って、収益アップに繋げていきましょう!以上です。

 

無料で登録しておく→無料イラストなら【イラストAC】

【Luxeritasルクセリタス】吹き出しの作り方・設定方法(画像多めに解説) g5iueh?a aid=5f6c0b53dcd52&a bid=e576d457

そろそろ、有料テーマを使ってみたいと考えていませんか?

 

結論です。
あなたの貴重な時間を無駄にしないためにも『AFFINGER5』を買ってください。

LuxeritasとAFFINGER5の2つのブログ運営をしている私が理由を解説します。

 

AFFINGER5は¥14,800(税込)です。

サラリーマンの時給平均って『1,486円』らしいです。

サラリーマンの給料、時給換算するとなんと平均「1486円」
出典元:マイナビ学生の窓口フレッシャーズ(https://gakumado.mynavi.jp/freshers/articles/14142

 

10時間、働けばAFFINGER5を購入できるって計算です。

私は、別ブログでLuxeritasを使い始めて1年以上経っています。
自分なりに、CSSやHTMLをカスタマイズしましたがAFFINGER5の『A』にも及んでいませんw。

正直に言って、CSSやHTMLをカスタムするために費やした時間は10時間は超えています。

 

注意ポイント

ググった時間

デザインを考慮する時間

CSSやHTMLを記述する時間

etc・・・

10時間以上の貴重な時間をカスタムに費やしても、思い通りのデザインにできていないのが現実です。
私は職業柄(得意言語はCOBOL笑)、プログラミングには詳しいと自負していましたが勘違いも良いところでした。

 

繰り返します。
あなたの貴重な時間を無駄にしないためにも、AFFINGER5を買ってください。

あなたがどんなに優れたSEであったとしても、たったの10時間でAFFINGER5並のカスタマイズをすることは不可能です。
¥14,800(税込)で【優れたデザイン✕装飾✕操作性のテーマ】を手に入れることができるなら安いとすら感じます。

 

注意ポイント

失った時間は取り戻すことはできません。
CSSやHTMLに時間を費やすくらいなら、記事を書いていたほうが有意義です。

 

Luxeritasで別ブログを運営している私が断言します。
『AFFINGER5』を買うということ=貴重な時間を買うこと。

\ブログ汁限定特典付き/

AFFINGER5(特典付き)を手に入れる

 

ドメインパワー=6.4でも1位を取れた検索クエリを教えます

-ルクセリタス
-,