アイキャッチ画像などは、ブロックで簡単に挿入することができますよね。
今回は文章の途中に大きさの調節をして、文字サイズの画像(アイコンとか)を挿入することができる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についての簡単な説明から便利なデベロッパーツールの使い方など・・
初心者向けに書いたのでよかったら参考にしてみて下さい⬇️
簡単なのでぜひやってみてください〜
最後まで読んでいただきありがとうございました！