Luxeritas(ルクセリタス)3.0.0で「ふきだし」を作ってみた。

2018年5月22日日々雑感, 日進月歩Luxeritas(ルクセリタス), Word Press(ワードプレス), そうだったのか!, 鋭意制作中。

読了時間: 約343

Luxeritas(ルクセリタス)3.0.0より、
ふきだし機能がつきました。
自分なりにカスタマイズしてみた記録を残してみます。

これまでの「ふきだし」を出す方法

シュウマイさん、moriawaseさんのブログ記事を参考に、
スタイルシートでふきだしを作っていました。

しかし、5月21日に、Luxeritas(ルクセリタス)3.0.0にアップデートする際、
style.cssというタブの中身をバックアップを取っていなかったので、
これまでに作った吹き出しがうまくだせなくなってしまいました。

ふきだしを使って書いていた記事も、まださほどなかったので、
Luxeritas(ルクセリタス)の「ふきだし」の設定・カスタマイズを行い、記事を修正していくことにしました。

Luxeritas(ルクセリタス)で「ふきだし」を設定する。

以下は、私なりの設定方法やカスタマイズ法です。
もっといい方法があるかもしれませんが、ひとまず御参考までに。

考えておいた方がいいこと。

ふきだしは、「右向き」と「左向き」が作れます。

そこで、「自分」の発話をどちらにするかを決めておくとよいかもしれません。

私の場合は、アイコンの顔が左から右に向かうように描かれているので、「左向き」を自分専用の向きとしました。

Left Caption

Lukia

(LINEだと逆ですけどね。)

サンプル登録(定型文)タブで、おおまかな設定をする。

Luxeritas(ルクセリタス) > 定型文登録 > サンプル登録(定型文)
と進み、「定型文(Luxeritas 専用)」という枠内でおおまかな設定を行います。

チェックを入れます。

吹き出し(左・右)と、吹き出し用のCSS設定のチェックボックスにチェックを入れます。

Left Caption

Lukia

3ヶ所ありますよね。

吹き出しの色を設定する。

色や、枠線の太さ、影の有無などは、左向き、右向きと別々に設定できます。特に枠線は最初「0」の設定になっていますので、1以上の数字を入れて、好みの太さに変えるようにします。

画面左下にある、青い保存ボタンを押せば、設定完了です。

クローン化する。

Luxeritas(ルクセリタス) > 定型文登録 > 定型文

を見ると、現在左右の吹き出しが表示されています。

これを使って、新たな吹き出しを作っていきます。

今回、私の場合は、右向きが自分以外の吹き出しとなるので、

「吹き出し(右)」の右にある、「編集」をクリックして、コードをコピーし、パソコンのメモ帳に貼り付けて、細かい編集をしました。以下の青い文字が、タグになります。

<!–なまえ–>
<div class="balloon">
<div class="balloon-img-right">
<figure><img src="画像のURL" width="150″ height="150″ alt="Right Caption" /></figure>
<span class="balloon-img-caption">なまえ</span>
</div><div class="balloon-right">
<!–この上にテキストを書く–></div></div><!–なまえここまで–>

 <!---->は、私が「ないしょタグ」と呼んでいるものです。
このタグに囲まれた文字は、ほかの人からは見えません。
タグのまとまりをわかりやすくするための目印のようなものなので、不要ならば削除してもかまいません。

Left Caption

Lukia

(2018年5月24日:追記)
囲み型にしない場合は特に、
上記赤文字のタグの間には、空白の行をいれないようにしてください。変な空白行が追加されてしまいます。

パソコンのメモ帳に貼り付けておくと、「なまえ」のところを置換できるので、大変便利です。

アイコンとしたい画像のURLを「画像のURL」部分に貼り付ければ、きちんと表示されます。

また、アイコン画像の大きさは、width=”150”(幅)

height=”150”(高さ)の値を変更すればいいようです。

ただし、るなさんは、60ピクセルを推奨しているので、
あんまり大きくしない方がいいかも。

囲み型か、一括型か。

ここらへんは、好みだと思います。

囲み型がいい場合は、「囲み型」のチェックボックスにチェックを入れ、

<!--この上にテキストを書く-->
</div></div><!--なまえここまで-->


コードの終わり部分を示すこのタグを下の枠に収めればよいと思います。

Left Caption

Lukia

囲み型の場合は、テキストを書き込めるウィンドウが立ち上がります。
なお、囲み型の場合も、タグには空白行をいれないようにしてください。(2018年5月24日:追記)

「ふきだし」に関するTips

以前使っていた吹き出しでもそうですが、
記事を書く時、ビジュアルモードで書いていると、
吹き出しのタグ内に誤って書き込んでしまうことがあります。

慣れない頃に書いた記事で、入れ子構造のふきだしを見た時は、のけぞりました。

ゆえに、ふきだしを入れたいときは、原則、テキストモードに切り替えることをオススメします。
ふきだしと、ふきだしの次の文字(数文字でいい)を書いてから、ビジュアルモードに戻るようにする習慣をつけておくと、タグ内に、余計な文字を書き込むミスが減らせます。

Left Caption

Lukia


昔は、HTMLタグとか、
ゴリゴリ書いてたのにねぇ。
ホント、楽に記事が書ける時代になりました。

カテゴリー