ワードプレスの投稿機能で独自デザインを実装する

「ワードプレスを使えば好きなように投稿できます」と言われて投稿機能を使ってみたけど思ったような（制作会社に作ってもらったような）デザインはできなかった…。
こういったお話を聞く機会があったのでワードプレスの投稿についてメモ。

多目的に使えるが、デザイン特化の機能が用意されているわけでない

ワードプレスの投稿機能は自由に投稿できますが、利用者や利用時によって使われ方が変わるため、全てに対応して必要なパーツ（以降ブロック）が用意されているわけではありません。
使用しているテーマによって違いはあるものの、業種に特化したテーマでない限りは「見出し、段落、画像、表、リスト」など必要最低限のデザインとブロックが用意されているのみとなるため、思い通りのデザインに仕上げるのはなかなか難しい。
初心者の方であればマイクロソフトの「ワード」で作成したようなページになるのではないでしょうか。

思い通りのデザインに近づけるための方法

ワードプレスの投稿画面で希望のデザインにするには様々なテクニックが必要。
弊社の考える方法をご紹介します。

デザインカテゴリーの「カラム（横並び）、区切り、スペーサー」を使用する。

デザインカテゴリーにはページの配置に関するブロックが用意されています。
これらを利用することで希望する配置に近づけることが可能です。

ブロック要素	機能	備考
カラム（横並び）	画像や文章等を横並びの配置にします。	各ブロックをカラム内のカラムボックスに追加していく
区切り	文章の下に罫線を追加します	線とドットがあり、色変更が可能
スペーサー	文章の下に余白を追加します。	余白の単位は改行の回数分になるよう「rem」を推奨

「高度な設定」を利用する

各ブロックには「高度な設定」の項目が用意されており、「追加CSSクラス」に記入することで自由にデザインを付与できます。
CSSクラスは「テーマに用意されていものから利用する」方法と、「新たに作成する」方法の2通りがあります。

用意されているCSSクラスを利用する

ホームページ内の使いたいデザインのCSSを流用します。
制作者の方に該当するCSSのリストを用意してもらい、リストの内容に倣って記載します。

新たにCSSクラスを作成する

新しくデザイン用のCSSクラスを作成します。
テーマ本体のCSSを編集すると他のページにも影響が出てくるためウィジェットカテゴリーの「カスタムHTML」ブロックを使用してページ専用のCSSクラスをインライン形式で作成し記載。
ホームページで使用されていないデザインを実装できますが、CSSクラスの作成には専門知識が必要となります。

全てHTMLで記載する

既存のブロックを使用せず、「カスタムHTML」ブロックを使用して全てHTMLタグを直書きします。
完全に自由なデザインを実装可能ですが、ホームページ制作者と同じ手法になりますのでCSSの知識に加えてHTMLの専門知識が必要となります。

専用のブロックを追加で依頼して作成してもらう

ワードプレスの投稿ブロックは追加が可能です。
必要となる項目（構成）が決まっているのであれば、あらかじめ専用のブロックを用意しておくことも可能です。ブロックを制作するための費用は必要となりますが、他のブロックと同様に専門知識がなくても手軽に行えるようになります。