advertisement
| 項目 | 項目の説明 |
| 項目 | 項目の説明 |
| 項目 | 項目の説明 |
elementorのテキストエディターで表を作成します。
まずは、ダッシュボードの固定ページ→新規作成で新しいページを作ります。すると、画像のような画面が表示されます。このうちの赤枠で囲っている＋をクリックします。
クリックすると、構造を選択する画面が表示されます。どれを選択するかは表をどういった配置にしたいかによって変わってきます。今回は画面比1:1の2分割の構造を選択します。
編集エリアが追加されるので、左の「画像・テキストエディター」といったウィジェットからテキストエディターをクリック&ドラッグして編集エリアに追加します。
テキストエディターが表示されるので、赤枠のテーブルをクリックします。
※テーブルが無い場合は、「プラグイン→新規追加」から「Advanced Editor Tools (previously TinyMCE Advanced)」をインストールしてテキストエディターにテーブル項目を追加します。
テーブルをクリックするとマス目上の図が出現するので、表の形に合わせて範囲を選択します。会社概要などの表は2列がメジャーです。
行は追加する情報（ＵＲＬ，会社住所、設立など）の数に合わせて選択します。
画像では10行までしか選択できませんが、「行」項目から行を下に挿入するを選択することで何行でも追加することができます。
表を追加するとしたの画像のようなものが出現します。
まずは各セルに情報を記入します。
表の背景と枠線の色を変更いたします
左のエディター画面でセルの中をクリックし、下に引っ張ると複数のセルを同時に選択することができます。
この状態でテキストエディターの表アイコンをクリック→セル→セルのプロパティをクリックします。
セルのプロパティの一般画面が表示されます。
セルの中の文字の配置を中央に合わせたい場合は、「横配置」「縦配置」から変更します。
今回はセルの背景と枠線の色を変更したいため、プロパティタブの高度な設定をクリックします。
boder style→Solid
枠線の色→お好きな色
背景色→お好きな色
を選択し、ＯＫを押します。
※イメージ通りの色が無い場合は、イメージしている色が含まれている画像を探す、もしくはスクリーンショットを取って「ペイント」で開きます。赤枠のツールをクリックするとカラーピッカーが使えるので、画像の任意の場所をクリックするとその色のカラーカードが分かります。
そのコードを先ほどの高度な設定の背景色欄に入力します。
枠線と背景色が反映されました。先ほどはセルを複数ドラッグすることで同時に3つのセルを編集できましたが、１つずつ編集することももちろん可能です。
最後に、表の幅を編集します。
下の画像の黒矢印に注目してください。「項目」と「項目の説明」の境界にカーソルを合わせ、クリックして左右に移動させると表の幅を伸ばしたり縮めたりすることが可能です。
上下に関しても同様の手順で編集することが可能です。
納得のいくデザインが完成したら、下の「公開」をクリックすることでサイトに反映されます。既にサイトが公開されている場合は「更新」となります。
基本的な編集方法は以上です。
不明点・ご質問等ございましたら気軽にお問い合わせください。
advertisement
