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

2021年12月19日2022年11月6日WordPress

この記事では、WordPressのLuxeritas テーマで文章中に画像を挿入する方法について書きます。

インライン画像、僕みたいなブロガーに便利です。

Luxeritasでは、文章中に画像を挿入できるインライン画像という機能（ブロック）があります。

例えば、「このボタンをクリックしたら、こうなりますよ～」と、ボタンを文章中に表示できます。僕みたいなフリーソフトやWebサービスを紹介する方に便利です。

「」←こんな感じで挿入できます。「」途中に挿入することも、「」サイズを調整することもできます。難しい知識は、一切必要ありません。簡単にできます。

動画を貼っておきます。標準で実装されているので、何か設定するといった作業は必要ありません。

挿入した画像は、CSSでカスタマイズできます。例えば、角丸にする、影を付ける、アニメーションを付けるなどです。

本記事は、WordPressでLuxeritas テーマを利用していて、なおかつブロックエディターを使っている前提です。といってもLuxeritasじゃなくても、WordPressのブロックエディターを使っている場合は、多分使えます。

1. 使い方
2. CSSでカスタマイズ
3. 感想

使い方

文章を入力します。画像を挿入したい箇所をマウスでクリックします。

ツールバーにあるボタンをクリック→インライン画像をクリックします。

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

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

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

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

試しに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%);」の行を丸ごと削除してください。