KAIZEN REPORTブログ

2022.7.27 | LPデザイン制作の改善

【CVX活用講座Vol.20】デザイン編集画面でデザインパーツを中央揃えにする

【CVX活用講座Vol.20】デザイン編集画面でデザインパーツを中央揃えにする

ランディングページの制作・運用改善を専門とするコンバージョンラボが提供する、インハウスLP作成/LPO支援ツール「CVX(シー・ブイ・エックス)」。

デザインやコーディングの専門知識がなくても、簡単操作でLPの制作・分析・運用改善まで、ランディングページにまつわるすべての作業をスピーディーに一貫してインハウスで行えるサービスです。

過去記事では、デザイン編集画面でのHTMLやCSSを活用し、より高度なデザイン編集方法を紹介してきました。

【CVX活用講座Vol.4】CVXの機能を最大限に利用してランディングページを作成する ーHTML編集機能の活用方法についてー

【CVX活用講座Vol.15】CVXの機能を最大限に利用してランディングページを作成する 〜保存版!HTML・CSS編集講座〜

このようなデザイン編集の操作の中で、特にお客様からのご質問が多いのが「制作しているデザインパーツを中央揃えにしたい」というご要望です。

そこで今回は、HTMLやCSSを活用して、編集中のデザインパーツを中央揃えにする、より具体的な編集操作をご紹介できればと思います。

少しチャレンジングな内容もありますが、デザインやコーディングの専門知識がなくても、細かなチューニングを行い、より魅力的なランディングページとなるような編集方法をお伝えいたします。

【初級編】テキスト編集機能を活用した中央揃えの方法

それでは、テキストの中央揃えからはじめてみましょう。CVXにはテキストの水平方向の揃え方を設定する機能が標準搭載されています。

例えば、下図のようなレイアウトの青枠のテキストを中央揃えにしてみたいと思います。

インハウスLP作成・LPO支援ツールCVX操作画面

まず、該当するテキストを選択するとツールチップが表示されます。この中から下図の赤枠のボタンをクリックします。

インハウスLP作成・LPO支援ツールCVX操作画面

すると該当テキストが中央揃えになったのが、確認できるかと思います。

インハウスLP作成・LPO支援ツールCVX操作画面

たったこれだけの操作でテキストの中央揃えが実現できました。今回は中央揃えでしたが、CVXでは同じ要領でテキストの左寄せや右寄せもボタン一つで設定することが可能です。

【中級編】html編集機能を活用した段落ごと中央揃えにする方法

それではもう少し難易度をあげて、幅の決まっている段落を中央に揃える方法をご紹介いたします。

まず下図のような幅が決まっている左寄せの段落があると仮定します。

インハウスLP作成・LPO支援ツールCVX操作画面

こちらの段落全体を中央揃えにする場合は、CVXに搭載されているhtml編集機能を用いてCSSの操作を行います。

インハウスLP作成・LPO支援ツールCVX操作画面

上図のように各コンテンツの右上端にある「html」ボタンをクリックしていただくと該当のセクションのソースコードの操作を行うことができます。

インハウスLP作成・LPO支援ツールCVX操作画面

該当のソースコードを確認すると、txt_area と命名されている枠内に、lead,  txt01,  txt02…と、各テキストが記載されているのがわかります。

そこでまず段落全体の大枠となる txt_area に対して、style="margin: 0 auto" の記載を追記します。

インハウスLP作成・LPO支援ツールCVX操作画面

ここで追記した margin: 0 auto という記載は幅が決まっている要素のまとまり(厳密にはブロック要素)に対して、中央寄せをするCSSの記述になります。

実際に画面右下の「反映する」ボタンを押して見ると、テキスト全体が中央揃えになっているのが確認できると思います。

インハウスLP作成・LPO支援ツールCVX操作画面

ここから更に各テキストを中央寄せにしてみたいと思います。

初級編と同様にテキスト編集機能を用いて、各テキストを中央揃えにするだけで実現可能ですが、ここでは別の方法として、ソースコードから中央揃えを実現させてみましょう。

右上の「html」ボタンよりhtml編集機能を開きます。

インハウスLP作成・LPO支援ツールCVX操作画面

そして、今回は lead, txt01, txt02…と、各テキスト要素に対して、 style="text-align: center" を記載して「反映する」をクリックしてみます。

インハウスLP作成・LPO支援ツールCVX操作画面

すると上図のように各テキストが中央寄せになっているのが確認できるかと思います。

ここで指定した text-align: center という記述は、テキスト要素など(厳密にはインライン要素)に対して、中央寄せを行うCSSの記述です。

今回は全てのテキスト要素に対して、text-align: center を指定しましたが、中央寄せしたいテキストのみに限定して指定したり、text-align: left や text-align: right などを指定し、左寄せや右寄せといった指定をすることも可能です。

ここでポイントとなるのが、幅が決まっている段落等の要素(ブロック要素)にはmargin: 0 auto という記述を、個々のテキスト要素(インライン要素)などには、text-align: center という記述を行うことです。

最初は少し難しく感じるかもしれませんが、現在編集しているデザインパーツがどのような要素なのかをよく観察しながら、それぞれの記述を使い分け、中央揃えを実現していただければと思います。

【上級編】画像やボタンを中央揃えにする方法

それでは最後に画像やボタンの中央揃えをご紹介させていただきます。下図のCTAエリアの青枠を削除し、赤枠を中央揃えにしてみましょう。

インハウスLP作成・LPO支援ツールCVX操作画面

まずは下図のように該当するデザインパーツの上で右クリックを行い、要素の削除を行ってください。

インハウスLP作成・LPO支援ツールCVX操作画面
インハウスLP作成・LPO支援ツールCVX操作画面

次に、先ほどと同様に右上の「html」ボタンからhtml編集機能を開き、空になった赤枠の cta-body__left を削除してください。

インハウスLP作成・LPO支援ツールCVX操作画面

すると下図のように要素が左に寄っているのが確認できると思います。

インハウスLP作成・LPO支援ツールCVX操作画面

ここまで来たら一度、ブラウザの検証ツールを開いてみましょう。

※ブラウザはGoogle Chromeを使用しているものとします。

Windowsをお使いの場合は Ctrl + Shift + I で、Macをお使いの場合は Command + Option + I で検証画面を開いてみてください。

インハウスLP作成・LPO支援ツールCVX操作画面

すると、開発者用の検証画面がブラウザに表示されます。

少し難しく見えるかもしれませんが、上図のボタンを含む要素全体を選択してみると、赤枠箇所に display: flex と指定されているのがわかるかと思います。

この display: flex という記述は元々2つ以上の要素の横並びを指定する際に使用するCSSの記述ですが、今回は横並びをなくし中央揃えにするため、ここの記述を変更していきます。

先ほどと同様にhtml編集機能を開き、cta-body に style="display: block" を、cta-body__right に style="margin: 0 auto" を追記して、画面右下の「反映する」をクリックしてみましょう。

インハウスLP作成・LPO支援ツールCVX操作画面
インハウスLP作成・LPO支援ツールCVX操作画面

すると該当箇所が中央揃えになったのが確認できるかと思います。

今回は横並びを指定する display: flex を、display: block とすることで横並びを解除し(ブロック要素に変更し)、その直下の幅が決まっている要素のまとまり(ブロック要素)に対して、中級編でご紹介した margin: 0 auto を指定することで、中央揃えを実現しました。

今回の方法の他にも中央揃えにする方法はありますので、ぜひ色々な方法で中央揃えにチャレンジしてみてください。

最後に

いかがでしたでしょうか。今回はより具体的な編集操作として「デザインパーツを中央揃えにする方法」をご紹介させていただきました。

CVXはデザインやコーディングの知識がなくても、直感的にランディングページの制作・分析・運用改善までを行うことができますが、細かなチューニングをすることで、さらに魅力的なランディングページを目指せるのではないかと思います。

また、CVXは無料トライアルでも、簡単操作でランディングページを作成することができるのかをお試しいただくことが可能です。

インハウスでランディングページを制作してみたい!という方は、ぜひ一度お試しください。