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

2021年12月19日WordPress

インライン画像

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

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

インライン画像のスクリーンショット

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

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

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

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

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

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

使い方

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

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

インライン画像の挿入

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

トップツールバーじゃなくても作業は一緒

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

メディアの選択またはアップロード

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

文章中に画像が挿入される

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

クリックで幅を調整できる

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

30pxにしたインライン画像

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

1行に複数配置することも可能

CSSでカスタマイズ

インライン画像は、CSSで追加装飾できます。

専用のセレクタはなかったのですが、記事本文「pタグ」のimgに装飾することでできます。

CSSを使う場合は、Luxeritas→子テーマの編集→スタイルシート(style.css)に書き込みましょう。

Luxeritas 子テーマの編集

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

37行目以降に記述する

角丸化

角丸適用前と適用後の比較画像
/*インライン画像装飾*/
.clearfix p img {
  border-radius: 4px;
}

「4px」の数字を変更することで、角丸具合を調整できます。

影を付けるCSS

影を付けることもできます。

/*インライン画像装飾*/
.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を使わなくてもできる点が、初心者にはありがたいです。

2021年12月19日WordPress