上記のお悩みを解決します。
本記事の根拠
- 兄弟ブログの『ぶろぐしる～』はルクセリタスで吹き出しを多用しまくっています
それでは、本題に入ります。
ルクセリタス 吹き出しの作り方
結論です。
ルクセリタスでは、吹き出しを表示する方法が『ショートコード』と『定型文』の２つあります。
２パターンの吹き出し作成方法
定型文
ショートコード
私は、『定型文』の方で吹き出しを挿入しています。
このあたりは実際に使われてみて、自分が使いやすいと感じたほうで良いです。
吹き出しの完成イメージは下記の通りです。
完成イメージ
イラストACで吹き出しアイコンを無料ダウンロード
無料イラストなら【イラストAC】
でお好きなアイコンを探してダウンロードします。
ココがおすすめ
イラストACは無料でダウンロードできる！
step
1【無料イラストなら【イラストAC】】にアクセス
無料で会員登録できます。（１分ほどで登録完了）
step
2登録が完了したら、イラストを選びます
兄弟ブログの『ぶろぐしる～』では、『麦さん』のイラストを使わせていただいています。
優しいタッチのイラストですので、お気に入りです。
step
3気に入ったイラストを選択して、『PNG』をクリック
step
4ダウンロードをクリック
step
5１５秒カウントが始まるので、待機
step
6１５秒後に、下記の画面が表示されるので、『PNG』をダウンロード
ダウンロード完了で、イラストACでの作業は終わりです。
ダウンロード後はPNG圧縮
PNGファイルのダウンロードが完了したら圧縮します。
小さいことの積み重ねが、のちのち大きな差となってきます。
step
1『PNGイメージをオンラインで圧縮する』にアクセス
step
2該当画像をアップロードして圧縮
step
3圧縮が完了したらダウンロードして完了
吹き出しアイコンに限らず、画像はすべて圧縮してからWordPressにアップロードすることをオススメします。
画像サイズを最適化することで、ページ表示速度のアップが期待できます。
ワードプレスにメディアファイルを取り込む
イラストACからダウンロードしたイラストをワードプレスのメディアにアップロードします。
ワードプレスにアップロードができたら、
チェックリスト
代替テキストを入力します
タイトルを入力します
リンクをコピーします
ココがポイント
代替テキスト挿入はSEO効果も期待できる
画像をアップロードするたびに、代替テキストを入力していたら大変です。
代替テキストを自動セットするプラグインをご紹介！→『【代替テキスト】ワードプレスプラグインで時短！SEO効果も期待？！』
↑の記事で、自動で代替テキストをセットするプラグインをご紹介しています。
もちろん、当ブログにも実装しております。
Luxeritas（ルクセリタス）ショートコードを登録する
ひとつめの吹き出し作成方法をご紹介します。
step
1Luxeritas→Luxeritasショートコード登録→サンプル登録
step
2画像URLにコピーしたメディアURLを貼り付け
キャプションには、今回は例として『主婦』と入力します。
step
3色の設定
『変更を保存』をクリックします。
以上でショートコードの設定は完了しました。
実際に使ってみます。
ショートコードを使ってみる
登録したショートコードを使ってみましょう。
step
1入力した文字を選択した状態で、『ショートコード』を選択
『吹き出し（左）』をクリックします。
たったこれだけです。
左吹き出しの完成
プレビュー画面で出来上がりをチェックしてみます。
こんな感じで完成しました。
以上が、ショートコードを用いた吹き出しの作成方法です。
続いては、定型文を用いた方法をご紹介します。
Luxeritas（ルクセリタス）定型文を登録する
Luxeritas（ルクセリタス）定型文登録の方法を説明します。
私は『ぶろぐしる～』で記事を書くときには、定型文で吹き出しを使っています。
完成イメージ
step
1Luxeritas→Luxeritas定型文登録
吹き出し（右）にチェックします。
step
2色の設定
『変更を保存』をクリックしてください。
step
3『定型文』タブを開くと、『定型文一覧』が表示されます。
一覧に、作成した『吹き出し（右）』があります。
『編集』を開きます。
step
4白枠で囲ってある２つのコードをメモ帳にでもコピペしておきます。
ポイント
この２つのコードは頻繁に使うので、Windows機能の『辞書登録』に登録をしておくと便利です。
吹き出しをたくさん設定しておく場合には、作業効率が大幅アップします。
コピペできたら、『定型文編集』画面をキャンセルで閉じます。
step
5『新規追加』で定型文を登録
step
6定型文を使うときに分かりやすいラベル名を付与
今回は例として、『右主婦疑問？』と付けました。
左下の『囲み型』にチェックをします。
定型文とその下のボックスには、メモ帳にコピペしておいたコードを貼り付けします。
step
7画像で選択している部分を、吹き出しに表示させたいメディアURLに置き換え
img src="ココダヨ！！！"の部分です。
height="60"→"80"に変えておきましょう。（高さ調整）
step
8『Right Caption』のところを、任意の文字列に打ち替え
『Right Caption』のところを、『主婦』と入力します。
すると、吹き出しのアイコンの下に『主婦』と表示されます。
以上で定型文の吹き出しの設定は完了しました。
実際に使ってみます。
定型文を使ってみる
登録した定型文を使ってみましょう。
step
1入力した文字を選択した状態で、『定型文』を選択
step
2登録した定型文を選択
吹き出しが挿入されました。
右吹き出しの完成
プレビュー画面で吹き出しをチェックしてみます。
こんな感じで完成しました。
1年以上かけて書いた記事は130記事以上・・・。
デザイン崩れを修正するのに1ヶ月かかりました。
注意ポイント
正直に言って、デザイン崩れを修正するのは大変な作業でした。
テーマ変更を決断するなら、早いほうが断然良いです。
私自身、テーマ変更に悩んでいた時間は無駄だったと感じました。
記事にまとめたので、『SWELL』が気になる方は要チェック！
→『【ルクセリタス→SWELL】レビュー！デザイン崩れ対処はどんな感じ？』
＼え？まだ、クラシックエディタ使いよん？もったいなｗ／
SWELLのブロックエディタを体験しないのは損！
まとめ
吹き出しを上手に配置することで、読者が感情移入しやすくなるメリットがあります。
上手に感情移入させてあげることで、購買意欲を高めることも可能です。
例えば、こんな感じです。
ただし、吹き出しを多用すると見づらくなるので注意です。
吹き出しを上手に使って、収益アップに繋げていきましょう！以上です。
無料で登録しておく→無料イラストなら【イラストAC】
|