【Luxeritas】インライン画像の挿入方法。文章中に画像を挿入してみよう!

この記事では、WordPressのLuxeritas テーマで文章中に画像を挿入する方法について書きます。
インライン画像、僕みたいなブロガーに便利です。
Luxeritasでは、文章中に画像を挿入できるインライン画像という機能(ブロック)があります。
例えば、「このボタンをクリックしたら、こうなりますよ~」と、ボタンを文章中に表示できます。僕みたいなフリーソフトやWebサービスを紹介する方に便利です。
「」←こんな感じで挿入できます。「
」途中に挿入することも、「
」サイズを調整することもできます。難しい知識は、一切必要ありません。簡単にできます。
動画を貼っておきます。標準で実装されているので、何か設定するといった作業は必要ありません。
挿入した画像は、CSSでカスタマイズできます。例えば、角丸にする、影を付ける、アニメーションを付けるなどです。
本記事は、WordPressでLuxeritas テーマを利用していて、なおかつブロックエディターを使っている前提です。といってもLuxeritasじゃなくても、WordPressのブロックエディターを使っている場合は、多分使えます。
使い方
文章を入力します。画像を挿入したい箇所をマウスでクリックします。
ツールバーにあるボタンをクリック→インライン画像をクリックします。

トップツールバーじゃなくても、方法は同じです。→インライン画像です。

メディアの選択画面が表示されるので、挿入したい画像を選択します。メディアライブラリから選ぶか、その場でファイルをアップロードして追加できます。

文章中に画像が表示されます。

クリックで画像サイズを変更できます。

試しに30にしてみました。いい感じです。

同じ作業を繰り返すことで、1行に複数の画像挿入もできます。

CSSでカスタマイズ
インライン画像は、CSSで追加装飾できます。
専用のセレクタはなかったのですが、記事本文「pタグ」のimgに装飾することでできます。
CSSを使う場合は、Luxeritas→子テーマの編集→スタイルシート(style.css)に書き込みましょう。

注意点ですが、必ず37行目以降に書くようにしましょう。それ以前に書いてしまうと、不具合が発生する可能性があります。

角丸化

/*インライン画像装飾*/
.clearfix p img {
border-radius: 4px;
}
「4px」の数字を変更することで、角丸具合を調整できます。
影

影を付けることもできます。
/*インライン画像装飾*/
.clearfix p img {
box-shadow: 4px 6px 2px #c8c8c8;
margin-right: 6px; /*右の余白*/
}
影+角丸化
上記2つのCSSをガッチンコしたCSSは以下になります。
/*インライン画像装飾*/
.clearfix p img {
box-shadow: 4px 6px 2px #c8c8c8;
border-radius: 4px;
margin-right: 6px; /*右の余白*/
}
ホバー時に押し込むアニメーション

ホバー時に押し込んだようなアニメーションにするCSSです。といっても、リンクを設定していないので、クリックしたところで、何も変化はありません。
/*インライン画像装飾*/
.clearfix p img {
box-shadow: 4px 6px 2px #c8c8c8;
border-radius: 4px;
margin-right: 6px; /*右の余白*/
transition: .4s;
}
/*インライン画像装飾:ホバー時*/
.clearfix p img:hover {
box-shadow: 3px 6px 4px #c8c8c8;
transform: translateY(3px);
/*画像を暗くする*/
filter: brightness(80%);
}
画像を暗くする装飾がいらない場合は、「filter: brightness(80%);」の行を丸ごと削除してください。
感想
以上、Luxeritas(WordPress)でインライン画像を挿入する方法についてでした。
プラグインやカスタムHTMLを使わなくてもできる点が、初心者にはありがたいです。