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

2021年12月19日ブログ

インライン画像

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

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

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

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

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

ナポリタン寿司 のアイコン」←こんな感じで挿入できます。「ナポリタン寿司のPC日記 のアイコン」途中に挿入することも、「ナポリタン寿司 のアイコン」サイズを調整することもできます。

難しい知識は、一切必要ありません。簡単にできます。

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

挿入した画像は、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を使わなくてもできる点が、初心者にはありがたいです。

Posted by ナポリタン寿司