はじめてHTMLを使ってWordPress書いてみた～文字の前に空白をつくる方法

2023年9月6日2023年9月27日

先日はじめてHTMLコードを試してみた。

なぜコードを使いたいと思ったかというと・・・・

みなさん、知ってました？

WordPressはなんと・・・キーボードのスペースキーでは文字の前に空白が入れられないのです！！

がーん・・・

ワードやエクセルでは当たり前だったことが、出来ない事実に愕然！まじか？！と思った初心者の方。

案外簡単にHTMLデビューできるので、一緒にやりましょ～！！！

手順

１．コードを探す　

２．ブロックエディター「カスタムHTML」を開く

３．コードを貼付ける

４．空白の長さを決める→数字を変更　

５．プレビューでチェック　

以上、５つの手順となる。

HTMLのコードを探す

Windows AIに「WordPressで文字の前に空白を作る方法を教えてください」と聞いてみた。

次の空白の入った文章をWordPressに入力したい。

/この文字の前に空白ができる

以下、Windows AIおすすめのコードを２つ。

上記２つとも同じように空白ができる。

数字「１６」というのがサイズなので、広く（長く）したい場合は、１００などへ変更する。

カスタムHTMLを開く

→広告を貼付ける時と同じ作業だ！！！

１．ブロックエディタを開き、「カスタムHTML」を開く　

２．HTMLのコードと「空白の後に入れたい文字」を窓枠へ入力
ここでは、<p style="padding-left:100px">この文字の前に空白ができる</p>

→プレビューを押す

このように、文字の前に空白ができる↓↓↓

/この文字の前に空白ができる

※コピペでうまくいかなったら、直接入力で入力してみてください　

まとめ

HTML・・・

WordPress初心者と中級者の境目は、まさにこの「HTML」などのコードが理解できる、というところになるのだと思う。

どうやって、こういったコードをWordPressに入れるのか？と思っていたら、なんのことはない、HTMLなら「広告挿入」と同じ要領でやればできた！！！

文字の空白は、HTMLのコードを探して、「カスタムHTML」を使えば簡単に入れることができましたよ～！！

CSSはまだハードルが高いかなぁ・・・（汗）

ハッチ編集
HTML
CSS
PHP
JAVASPRICT
の意味がわかるようになったとき。

初心者から中級者となっていくのでしょうねぇ・・・まだまだ道は遠いか（笑）。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格:2,486円 (2023/9/6 19:33時点) 感想(37件)

おまけ～スペーサーの使い方

調べている中で、文章と文章の間に空白を入れる方法もあったので、メモしときます。

見出しの前にスペースを作りたいときに便利です！（ブログが読みやすいかな、と思います。今まで詰まっていて、直せないのが気になっていた！）。

１．WordPressのブロックエディターの中にある、スペーサー
→クリック

２．灰色の四角のスペースが出てくる
→大きさはドラックで調整できる。

※実際にはこのように見える。