ワードプレスでワード（Word）みたいな文章レイアウトを表現したい
ワード（Word）で制作するようなビジネス文章レイアウト（先頭の１文字下げ、１．２．・・などリスト表示のときの文字の位置）を行いたい！ということが多々あるのですが、正直なところ結構手間がかかる作業です。
今回は簡単に実践している方法をご紹介いたします。
ビジュアルエディタのメリット
ビジュアルエディタを利用している場合は、必要なものをパーツとしてはめ込むだけでレイアウトの調整、複製、行の変更、カラム割が簡単にできます。
以下に操作している画像を挙げてみました。
操作イメージ
操作した結果イメージ
左に画像、右に文章、文章の途中でここはスペースを空けたい！文章のブロックをこことここを入れ替えてといった要望に応えるのも従来のHTMLを修正するよりも非常に簡単で作業速度が向上します！
タイトルの後は、１文字分下げた中に文章を掲載したい場合は文章ブロックのスタイルで左マージンを指定してあげるだけで対応できてしまいます。いちいちクラスを書いて、スタイルシートを編集してといった作業がないのでホームページ（HTML）の知識がなくても操作を覚えてしまえばできます。
ポイント
文章毎のブロックをある程度分割して構成するのがポイントです。
１つのブロックで全部入れてしまうのもよいですが、私自身は小分けで構成しています。
SPANのタグを利用する
SPANタグを利用すると、ワードプレスの「Advanced Editor Tools」エディタでもスペースを空けられます
このようなに記述することによりスペースを空けられます。
具体的には以下のようなコードを記述します。ワードプレスでは必ずPタグを付与されますのでその中でもSPANは改行せずに文中に記述が可能なのでこれに対して左のマージンを設定します。
よくあるのがPタグで文章を改行すると下のマージンが広く空いてしまうケースがあり、BRタグで改行している文章にもこの方法だと対応可能です。
<p><span style="padding-left: 1em;"></span>このようなに記述することによりスペースを空けられます。</p>
ULとLIの組み合わせ時に字下げを利用する
これは何を行いたいかというと以下のようなワード文章のレイアウトを構成するときに利用します。
このレイアウトですが、ワードにもリスト付きの番号があるので対応できるように思えるのですが、これが「※」や「1)」といった表現はないんです。
ワードって自由でよいなぁ・・・って思いますけど、これをHTMLでも表現したいということなので一工夫が必要です。
そんな細かいこと気にしなくてもいいじゃん！って思うかもしれませんがWEB上の文章レイアウトも同じように見せたいということもあるのです。
実際にレイアウトを構成しようとするとちょっと大変です。
ただただ、ワードの文章をコピペしたら以下のようになりました。いやーなかなか・・・
- 参加資格
- 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
- 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
- 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
- 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
これを希望のレイアウトをホームページで構成するためにスタイルを調整していきます。
数字はワードプレスの番号付きリストのデフォルトを使います。
- 参加資格
- 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
- 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
- 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
- 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
まず、ULに対してスタイルを「list-style-type: none;」何も表示されないようにします。
その後、LIの中に番号付きのまま文章を記述し、LIに対して「padding-left: 1em; text-indent: -1em;」のスタイルをかけて文字の繰り下げを調整します。「（あ）」は、1emだと不足するので2emなどプレビューをみながら調整します。
- 参加資格
- 1) 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
- ① 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
- ② 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
- 1) 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
このようにレイアウト作成時にちょっとしたことを行うと「※」でも「１）」でも対応可能です。
ちょっとした手間がかかりますがワードのレイアウトと同じように構成ができるようになりました。
ホームページ制作するですが、ワードでは簡単に表現できることが実は非常に手間がかかる作業だったりします。そのため、費用も変わってきますのでその点はご理解ご了承ください。
※この記事に関してのご質問などはお受けできませんのでご了承ください。
お問合せ