今回は、ワードプレスの投稿ページや固定ページで文の頭に
空白をあける方法を4つシェアします。
記事を書いていると
文の頭に空白を入れたいと思うこと、
あると思います。
ただ、投稿ページや固定ページで空白を入れても、
ワードプレスの仕様で空白が消えて左詰めされます。
cssのpadding-leftで空白を作る
投稿ページや固定ページのテキストモードでこのように入力してください。
<p style="padding-left:16px">左に空白ができます。</p>
左に空白ができます。
このように左に16pxの隙間ができます。
16pxというこの値をあげれば空白は大きくなります。
cssのmargin-leftで空白を作る
投稿ページや固定ページのテキストモードでこのように入力してください。
<p style="margin-left:16px">左に空白ができます。</p>
左に空白ができます。
marginでも同じように空白を作れます。
しかし、padding-leftでもmargin-leftでも
長い文章の場合全て左に空白ができます。
全て左に空白ができる例
フリーターだったが、30代でWebサイト制作を学び、IT系の会社に転職。「30代でもエンジニアになれる！」を皆さんに伝えるため、ブログ「プログラマー奮闘記」を始める。 YouTubeなどの副業でも収入を開拓中。ラーメンが好き。
cssのtext-indentで空白を作る
1文字目だけ空白を作るならcssのtext-indentで作れます。
投稿ページや固定ページのテキストモードでこのように入力します。
<p style="text-indent: 16px;">フリーターだったが、30代でWebサイト制作を学び、IT系の会社に転職。「30代でもエンジニアになれる！」を皆さんに伝えるため、ブログ「プログラマー奮闘記」を始める。 YouTubeなどの副業でも収入を開拓中。ラーメンが好き。</p>
するとこのように1文字目だけ字下げされます。
フリーターだったが、30代でWebサイト制作を学び、IT系の会社に転職。「30代でもエンジニアになれる！」を皆さんに伝えるため、ブログ「プログラマー奮闘記」を始める。 YouTubeなどの副業でも収入を開拓中。ラーメンが好き。
を使った方法はあまりオススメでない
で空白を作る方法もあります。
しかし、あまりオススメではないです。というのも
投稿ページや固定ページの入力モードである
テキストモードとビジュアルモードを何度か変更すると が消えます。
そういう仕様みたいです。
いかがでしたか？
左に余白を持たせるためにいくつか方法をシェアさせていただきました。
ぜひ活用してみてください。
