今回は投稿ページ（シングルページ）のレイアウトを整えて行きたいと思います。
ただ、毎回言っているかと思いますが、私が利用しているElementorはPROではございません。無料版です。。。
ですので、出来る範囲が決まっておりますが、出来る限り希望に沿う形になるようにテーマのカスタマイズやプラグインなどを駆使してレイアウトを整えて行きたいと思います。
レイアウトの確認
まずは修正する前に、レイアウトを確認したいと思います。
適当な記事をクリックするなりで、投稿ページを表示させます。
現状のレイアウト
色々あって一部すでに修正されてますが、現在はこの様に表示されてます。
（記事を書く前に、一度エラーが出てしまって、修正している際にレイアウトを少しいじった状態にしてました…。ですのでデフォルトの画面ではありません。すみません。）
デザインカンプ
こちらがデザインカンプとなります。
ページタイトルが上部に来てアイキャッチ画像、スマホの画像、サイトURLなどが表示されるエリアとなっています。
ちなみに現在はカテゴリーやタグを設定していないので、ページ下部に表示されていないくとも問題ないということにしましょう。
現状では背景色が白になっているので、この辺も修正しつつレイアウト調整をしていきたいと思います！
レイアウトの修正
背景色の修正
まずは背景色が白いので、そちらから修正してしていきたいと思います。
Elementor無料版ではシングルページの編集が出来ないので、テーマから編集する必要があります。
外観 > カスタマイズ をクリックします。
ここで一度、公開している記事をクリックし、投稿ページを表示させます。
投稿記事エリアの背景が白いですね。
「全般」をクリックし次に表示されたメニューの「色」をクリックします。
ページ下部にあるSurface Colorのコンテンツの背景に表示させたい色を設定します。
最後に「公開」をクリックすれば背景色の設定は完了となります！
ブログページの修正
同じく外観のカスタマイズから修正していきます。
ブログをクリックし、次に表示されたメニューの個別投稿をクリックします。
すると、個別投稿が編集できる様になります。
アイキャッチの非表示
今回は投稿記事ページではアイキャッチ画像は必要ありませんので、アイキャッチ画像を非表示に設定します。
サイドメニュー中部にある「構造」のアイキャッチ画像横の目のアイコンをクリックすると非表示にすることが出来ます。
その他の、表示/非表示の設定
その他に今回表示する（または非表示）にする項目を設定していきましょう。
アイキャッチ同様に構造のメタ情報から表示（非表示）を設定して「公開」をクリック
私は今回全て非表示に設定しています。
デザインのカンプ制作段階では、親カテゴリーを「Type」や「Color」として作り、下記画像の様に振り分ける予定でした。
が、ここは色々試して見たんですが残念ながらElementorでは再現することは出来ませんでした。
もしかしたらプラグインなどで出来るのかもしれませんが、今回は諦めて今後に対応していきたいと思います。
もちろんsingle.phpを編集すれば対応可能ではあるのですが「Elementorシリーズ」では出来る限りファイル編集なしで対応していきたいと思っていますのでsingle.phpはいじりません。
というわけで、今回はブロックパターンをうまく使ってデザインカンプに近づけて行きたいと思います。
投稿画面でのパターンを制作
ブログページでは、カテゴリーやタグのレイアウトが思い通りに出来なかったので、以前紹介したブロックパターンを利用ることでこの問題を回避することにしました。
ブロックパターンを作成する
簡単なブロックパターンを作成します。
ブロックパターン > 新規追加 をクリックします。
新規追加から、ブロックを挿入していきます。
PC画像、SP画像、そしてURLやカテゴリー、タグを表示するエリアを挿入しブロックパターンを作成します。
あとは、記事を投稿する際にパターンを挿入し、公開するだけです！
挿入後に写真などを設定。
カテゴリーとタグは、投稿部分で設定した物が自動的に表示されます。
これで、デザインカンプに大分近づけることが出来ましたね！
コンテンツ下の罫線や、次の投稿部分のデザインがまだですが、そちらは追々修正していきたいと思いますので、今回かなり満足しているのでここまでとさせていただきます！
まとめ
今回は投稿（シングル）ページの編集作業をご報告させていただきました。
タイトルにElementorと記載しておきながらElementorの機能をほとんど使っていないのはご愛嬌と言うことで…お願いいたします。
お使いのテーマやインストールしているプラグインによって編集方法は異なりますが、カスタマイズでもある程度は編集することが出来ますので、興味があるかたは一度カスタマイズで試して見ては如何でしょうか？
