【HTML/CSS】コピペでOK!文章内にアイコン画像を挿入する方法

HTML/CSS

アイキャッチ画像などは、ブロックで簡単に挿入することができますよね。

今回は文章の途中に大きさの調節をして、文字サイズの画像(アイコンとか)を挿入することができるHTMLとCSSを紹介します!

DEMO

僕はとりとんです!

WordPressで記述する場合は、ビジュアル編集ではなく「カスタムHTML」のブロックを使用してHTMLで記述してください!

とりとん
とりとん

早速コードを確認してみよう!

スポンサーリンク

コードと簡単な解説

HTML
<p>僕はとりとん
<img class="text_img" src="https://【画像のURL】.png">
です!</p>
CSS
.text_img{
	width: 5%;
	vertical-align: middle;
}

widthで横幅を5%に縮小しています。文字サイズによって大きさを調節する必要があるので、数値はお好みで!



vertical-alignは、画像の縦位置を指定できるプロパティです。

初期値は「baseline」でテキストのベースラインに揃うようになっているので、「middle」にして中央揃えにしています。

WordPressでの実装方法

WordPressのカスタマイズ方法として、既存のHTMLにCSSを追加・修正する手順を書いてみました!

CSSやclassについての簡単な説明から便利なデベロッパーツールの使い方など・・

初心者向けに書いたのでよかったら参考にしてみて下さい⬇️

簡単なのでぜひやってみてください〜

最後まで読んでいただきありがとうございました!

タイトルとURLをコピーしました