コンテンツへスキップ
RiARiSE – WEB制作 Wordpress、Elementor
  • サービス内容
  • プロフィール
  • 制作実績
  • ブログ・ナレッジ
    • ブログ
    • ナレッジ
  • お問い合せ
  • FEATURES
    • HTML5を使ったクロスプラットフォームなアプリ開発
    • Unity3Dを利用したAR(拡張現実)アプリ制作
    • Unityを利用したゲーム開発・スマホアプリ開発
    • WAI-ARIAに基づいたホームページ制作
  • HOME
  • HOME
  • test
  • WORKS
  • お問い合せ
  • ブログ
  • プロフィール
RiARiSE – WEB制作 Wordpress、Elementor
  • FEATURES
    • HTML5を使ったクロスプラットフォームなアプリ開発
    • Unity3Dを利用したAR(拡張現実)アプリ制作
    • Unityを利用したゲーム開発・スマホアプリ開発
    • WAI-ARIAに基づいたホームページ制作
  • HOME
  • HOME
  • test
  • WORKS
  • お問い合せ
  • ブログ
  • プロフィール

入門編

  • Elementorのインストール方法
  • Elementorでページを作成、編集する
  • ElementorのUI画面操作説明
  • Elementor セクション役割・できること
  • ページの下書き保存と公開
  • Elementorでカラムを作成、編集、スタイル設定する方法
  • トップ
  • ナレッジベース
  • 入門編
  • Elementorでカラムを作成、編集、スタイル設定する方法

Elementorでカラムを作成、編集、スタイル設定する方法

目次
  • 右クリックで表示されるコンテキストメニュー
  • セクションに設定できる項目
    • レイアウト
      • コンテンツの幅
      • 垂直方向に配置
      • 水平方向に整列
      • ウィジェットのスペース
      • HTMLタグ
    • スタイル
      • 背景(通常時、ホバー時)
      • 背景オーバーレイ(通常時、ホバー時)
      • 枠線
        •  
      • タイポグラフィ
  • 高度な設定
    • モーション効果
    • レスポンシブデザイン
    • Attributes(プロ版のみ)
    • Custom CSS (プロ版のみ)

カラムはセクション内を列で分ける役割になります。

  • カラムにマウスオーバーして左上に表示されるカラムアイコンをクリックする
  • 右クリックして表示されるコンテキストメニューから選択する
  • ナビゲーターから該当のカラムを選ぶ

上記の操作をすると左側のパネルにカラム設定が表示されます。 

右クリックで表示されるコンテキストメニュー #

新しいカラムを追加したり、カラムを複製したい場合は、カラムのハンドルを右クリックして、コンテキストメニューから「新しい列の追加」または「複製」のいずれかを選択します。
また、「コピー&ペースト」オプションを使用して、列を別のセクションにコピー&ペーストしたりできます。
削除したい場合は「削除」をクリックで削除できます。

セクションに設定できる項目 #

セクションの編集をクリックすると、左のパネルに設定画面が表示され「レイアウト」「スタイル」「高度な設定」が可能になります。

レイアウト #

コンテンツの幅 #

列の幅 (%): パーセンテージを入力しカラムの幅を設定します。


HTMLタグ 列のHTMLタグを設定します。HTMLタグについて詳しくはこちら

垂直方向に配置 #

垂直方向の配置を設定します。セクションのすべてのカラムのコンテンツを下寄せにしたり、上寄せにしたり、中央寄せにしたり、高さが不揃いのカラムの高さを揃えたりすることができるようになります。上、真ん中、下、間隔、周囲、均等から選択可能です。

水平方向に整列 #

同じ行に配置されたインライン・ウィジェットを水平に揃えることができます。開始、中央、終了、スペースの間隔、スペースの周り、均等配置から選択できます。

ウィジェットのスペース #

カラム内のウィジェットのスペースを設定できます。

HTMLタグ #

カラムに割り当てるHTMLタグを設定します。

スタイル #

背景(通常時、ホバー時) #

クラシック(背景色や画像を設定可能)、グラデーション(カラーグラデーションの背景を設定可能)、ビデオ背景、画像スライドショー背景から背景の種類を選択できます。

背景オーバーレイ(通常時、ホバー時) #

クラシックまたはグラデーションのいずれかを選択できます。
ブレンドモードの設定も可能です。

枠線 #

ボーダータイプ:ボーダーの種類を設定できます。
枠線の丸み:セクションの角丸を設定できます。
ボックスシャドウ:ボックスシャドウを追加できます。

  #

タイポグラフィ #

セクションのタイポグラフィーカラーを設定します。
※「デフォルトカラー」が有効になっている場合、「タイポグラフィの設定」の色は機能しません。

高度な設定 #

マージン:セクションの余白を設定します。
パディング :セクションのパディングを設定します。
Z-index:重なり順を設定します。
CSS ID:セクションのCSS IDを設定します。
CSSクラス:セクションにCSSクラスを設定します。

モーション効果 #

Scrolling Effects: スクロール効果をオンに設定すると、ユーザーがページをスクロールする際に発生する様々なアニメーションやインタラクションを選択することができます。
Sticky:セクションをStickyに設定し、TopまたはBottomのいずれかを選択します。
開始アニメーション:フェードインやスライドインなどアニメーションを選択できます。

レスポンシブデザイン #

カラムを逆にする(タブレット、モバイル):設定すると各デバイスにおいて列の並びが反転します。
表示錠チア:デスクトップ、タブレット、モバイルで、セクションの表示/非表示を切り替えられます。

Attributes(プロ版のみ) #

セクションのラッパーにカスタム属性を追加することができます。これにより、data-*属性、ARIA属性(アクセシビリティ)とその値、header、footer、sidebar、rel=*、およびその他の属性を追加することができます。

Custom CSS (プロ版のみ) #

独自のカスタムCSSを追加できます。

Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on 2022年7月16日
ページの下書き保存と公開
目次
  • 右クリックで表示されるコンテキストメニュー
  • セクションに設定できる項目
    • レイアウト
      • コンテンツの幅
      • 垂直方向に配置
      • 水平方向に整列
      • ウィジェットのスペース
      • HTMLタグ
    • スタイル
      • 背景(通常時、ホバー時)
      • 背景オーバーレイ(通常時、ホバー時)
      • 枠線
        •  
      • タイポグラフィ
  • 高度な設定
    • モーション効果
    • レスポンシブデザイン
    • Attributes(プロ版のみ)
    • Custom CSS (プロ版のみ)

Copyright © 2023 RiARiSE - WEB制作 Wordpress、Elementor