WordPressで文章の途中に小さな画像を挿入・表示させる方法＆検証

こんにちは、おつまみ（@otsumami082）です。

 

アプリの解説記事などを書いている時に

と思ったことはありませんか？

 

小さな画像を表示させた解説記事とはこんな感じ↓

　←今回は、こんな感じの小画像をワードプレス記事内に表示させるのが目的です。

 

本記事では、上記のような『文章の途中に小さな画像を挿入して表示させる方法』をコピペで実践できる構成にしました。なのでワードプレス初心者でも学びやすいと思います。

 

また、記事の後半にCSSの値やHTMLの属性値を変更したさまざまな検証も行っております。細かい理屈や検証が知りたい方は最後までお付き合いくださいませm(_ _)m

私のワードプレス環境

 

 

 

まずはコピペで実装してみよう

まずはこの記事で紹介する通りにコピペで実装してみましょう。

 

 

手順①：追加CSSにコードをコピペ

【ワードプレス管理画面左側のハケの形状をしたアイコンをクリック】　→　【カスタマイズをクリック】

 

 

追加CSSをクリック。

 

 

下記のコードをコピーします。

 

 

【空欄にコピーしたコードを貼り付け】　→　【公開をクリック】

 

これでCSSの追加は完了です。

 

手順②：新規投稿のテキストにコードをコピペ

お次はHTMLを新規投稿ページにコピペしていきます。

 

【ワードプレス管理画面左側のピンの形状をしたアイコンをクリック】　→　【新規追加をクリック】

 

 

下記コードをコピーしてください。

 

 

【テキストタブをクリック】　→　【コピーしたコードを新規投稿の記入欄にペースト】

 

 

ちなみにこの段階ではプレビュー画面に画像は表示されません。

 

 

手順③：画像と画像URLを取得

以下の画像をパソコンにダウンロードしてください。

 

 

ダウンロードした画像ファイル（『.png』拡張子）を新規投稿の記入欄にドロップするとアップロードできます。

 

 

 

【アップロードされた画像をクリック】　→　【URLをクリップボードにコピーをクリック】

 これで画像URLがコピーされました。

 

手順④：画像URLペースト＆表示の確認

【手順②：新規投稿のテキストにコードをコピペ】でペーストしたソースコードの#部分に、さきほどコピーした画像URLをペーストしてください。（#は上書きすること）

 

 

画像URLがペーストされました。

 

 

プレビューをクリックして確認してみましょう。

 

 

しっかり表示されていますね。

 

手順⑤：画像の左右に文字を入力する

今度は表示した画像の左右に文字を入力してみます。

 

【ソースコード<の左側にWPアイコンと入力】　→　【ソースコード>の右側にのテストと入力】

 プレビューして確認してみましょう。

 

 

ズレずに表示されていますね。

 

以上で『画像を文中に挿入する方法』の基本は終了です。

お疲れ様でしたm(_ _)m

 

もし、画像の位置が文字と揃わないなど表示がおかしくなってしまった場合は、このあと解説する『プロパティの値』や『画像サイズ変更』などをお試しください。

 

画像を切り抜いてアイコン化する方法

今回は私が前もって用意したこちらの画像→ を使って、小さな画像を実装しました。

 

 はスクリーンショット画像を『Figma』という無料デザインツールを使って私が切り抜いたものです。

 

もし、「切り抜き画像を自分で用意したい！」「無料デザインツール『Figma』が気になる！」と思ったのなら、こちらの記事↓も併せてお読みいただくことをお勧めいたします。

 

今回コピペしたCSS＆HTMLについて解説

 

ここから先はCSSとHTMLの基本が分かっていないと難しく感じるかもしれません。途中にある解説記事のリンク（他の方の記事）などを読みつつ理解していただけたら、と思います。

 

また、書籍でCSSとHTMLの基本をおさえとくのもいいかもしれません。

 

それでは解説を始めます。

 

【手順①：追加CSSにコードをコピペ】の項目で、以下のコードをコピペしました。

このコードの内容をこれから少し説明していきます。

 

上記CSSの各部名称と役割は以下の様になっています。

 

今回は画像の上下の位置を指定したかったので、プロパティには『vertical-align』を使いました。

プロパティである『vertical-align』に具体的な位置を指定するためには値が必要です。今回は値に『 text-top』を採用しました。

ちなみに『margin』『padding』は画像周辺の余白を指定するプロパティです。今回は値を『0px』にして余白をゼロにしています。

 

【まずはコピペで実装してみよう】では『値』『画像の大きさ』『文字の大きさ』のバランスが取れていたので、違和感のない表示がなされていました。

 

この先では検証のため、あえて【まずはコピペで実装してみよう】とは違う『値』『画像の大きさ』『文字の大きさ』を適用することでどのように表示が崩れるのかを見ていきましょう。

 

CSSの値を変更して表示（8パターン）

 

この項目で検証するプロパティ『vertical-align』の値は以下の8つです。

 

♢『検証に使う画像＆テキスト』のHTMLコードはこちら（画像URLは#に変更）♢

（【画像サイズ100px×100px】を【画像サイズ18px×18px】に表示する指定）

 

ブラウザはchromeを使用してプレビュー表示しました。

 

それでは検証を始めましょう！

 

①　vertical-align: top;

 

トップバッターはプロパティ『vertical-align: top;』です。

topというだけあって飛び出ちゃいました！

 

②　vertical-align: middle;

 

topより飛び出していますね。middle（中間）とは一体…（；^ω^）

 

③　vertical-align: bottom;

 

暫定一位の高度を記録！！

bottom（底）という単語の意味を全否定するナイスな結果となりました。

 

④　vertical-align: text-top;

 

綺麗に収まっています。これが個人的最適解ですね。( ^ω^ )

 

⑤　vertical-align: text-bottom;

 

またしてもbottom（底）という単語の意味を全否定する結果となりました。(´･ω･`)

 

⑥　vertical-align: baseline;

 

恐ろしく飛び出ていますw

どうやら私には見えないbaseline（基線）が存在しているようですね。（；^ω^）

 

⑦　vertical-align: super;

 

本記事の最高高度を記録しました！

superの名に違わぬパフォーマンスに脱帽です。

 

⑧　vertical-align: sub;

 

sub（『下位・副・半』などを表す接頭時）の名に違いまくりの結果となりました。

 

検証後の結果について

CSSプロパティ『vertical-align』についての解説記事はたくさんありますが、今回の検証ではそれらの解説とはかなり異なる表示がなされることが確認できました。

 

今回検証したプロパティ『 vertical-align』中では4番目の『 text-top』が最もふさわしい値ということはお分かりいただけたかと思います。

 

 

HTMLコードを変更して検証

この項目では投稿編集画面のテキストタブ内のHTMLコードを触りつつ検証していきます。

 

CSSは【まずはコピペで実装してみよう】の項目と同じ記述となります。

 

♢追加CSSのコード♢

 

表示画像サイズを変更して検証

【CSSの値を変更して表示（8パターン）】の検証で『 vertical-align: text-top;』が一番しっくりくるプロパティと値ということが分かりました。

 

この項目では表示画像サイズを変更して検証してみることとします。

 

表示画像サイズの変更は、投稿編集画面のテキストタブ内の【width="18" height="18"】の数字を変えて行います。

 

 

画像表示サイズ【18px×18px】の場合

♢HTMLコードはこちら（画像URLは#に変更）♢

 

これは【CSSの値を変更して表示（8パターン）】での画像表示サイズですね。バランスよく表示されているかと思います。

 

画像表示サイズ【100px×100px】の場合

今度は表示サイズを【100px×100px】にしてみました。

♢HTMLコードはこちら（画像URLは#に変更）♢

 

アイコンが下に大きくはみ出て表示されています。

 

この検証で、CSSの値を『 vertical-align: text-top;』にしても、表示画像サイズが適切でないと表示が崩れてしまうことが分かりましたね。

 

フォントサイズを変えて検証

今度はフォントサイズを【12pt　→　24pt】に変えて検証してみましょう。

 

 

画像表示サイズ【18px×18px】とフォントサイズ24ptの組み合わせ

 

今度は文字だけが大きくなり過ぎていますね。

バランスが悪いです。（；^ω^）

 

画像表示サイズ【32px×32px】とフォントサイズ24ptの組み合わせ

バランスを取るため、画像表示サイズを【32px×32px】にしてみました。

これならしっくりきますね。(*^^*)

 

この検証により、画像サイズとフォントサイズを適切に合わせなくてはならないことが分かりました。

 

width（横幅）とheight（高さ）の指定について検証

この項目では、HTMLの属性値である【width（横幅）とheight（高さ）】のどちらかのみを指定するとどのように表示されるかを検証してみます。

 

height（高さ）指定のみ（widthの指定は無し）

♢HTMLコードはこちら（画像URLは#に変更）♢

 

height（高さ）指定のみだと、元画像サイズ（100px×100px）で表示されてしまうようです。

 

width（横幅）指定のみ（heightの指定は無し）

♢HTMLコードはこちら（画像URLは#に変更）♢

 

width（横幅）指定のみでも【18px×18px】で指定したのと同じ表示がなされることが分かりました。

 

横長画像の場合（1000px ×83px）の表示を検証

ここまでは正方形の画像で検証を行ってきました。

では横長の画像で表示した場合、どうなるのでしょうか？

 

 

 

元画像サイズは【1000px ×83px】となります。

 

画像表示サイズ【100px×指定なし】

♢HTMLコードはこちら（画像URLは#に変更）♢

 

画像が上に張り付いているように表示されてしまいました。

 

画像表示サイズ【200px×指定なし】

♢HTMLコードはこちら（画像URLは#に変更）♢

 

今回使った横長画像の場合、【widthの指定が200px】だと並びが綺麗になりました。

 

 

 

さいごに

今回は、【前半をコピペで実装する演習】→【後半でさまざまなプロパティや値を検証する】という情報量の多い記事となってしまいました。

 

後半部分がイマイチ理解できなかったという方は書籍でCSSとHTMLの基本をおさえとくといいかもしれません。

 

また、「文中に挿入する画像を自分で用意したい」と思った方には、こちらの記事↓が役に立つかもしれません。

 

それでは良きコード＆ブログライフを〜(*^^*)