MENU
  • homeicon-home
  • サロン専門ホームページ制作
  • 初心者向けワードプレスレッスン
  • ワードプレスオンラインレッスン
  • ホームページ制作実績
  • 写真撮影
  • blog
  • 写真のホームページへ
  • お問い合わせicon-mail
個人サロン向けのホームページ制作やワードプレスレッスンを受講できます。年金以外に自分の力で稼ぎたいアラフィフ女性を応援します。50代からのプチ起業をお考えの方はぜひお気軽にご相談ください。
【大阪箕面市】ホームページ制作・ワードプレスレッスンならecru(エクリュ)
  • ホームhome
  • ホームページ制作web site
    • ワードプレス1ページプラン
    • ワードプレススタンダードプラン
    • htmlプラン
  • ブログレッスンWordPress lesson
    • ワードプレスマンツーマンレッスン【5回レッスン】
    • WordPressオンラインレッスン【おしゃれなサイトが作れます】
  • 写真撮影photo
    • 写真のホームページへ
  • ブログblog
    • 50代起業
    • ホームページ制作実績
    • ワードプレスのこと
    • お客様のご感想
    • 起業コラム
  • プロフィールabout me
  • お問い合わせcontact
【大阪箕面市】ホームページ制作・ワードプレスレッスンならecru(エクリュ)
  • ホームhome
  • ホームページ制作web site
    • ワードプレス1ページプラン
    • ワードプレススタンダードプラン
    • htmlプラン
  • ブログレッスンWordPress lesson
    • ワードプレスマンツーマンレッスン【5回レッスン】
    • WordPressオンラインレッスン【おしゃれなサイトが作れます】
  • 写真撮影photo
    • 写真のホームページへ
  • ブログblog
    • 50代起業
    • ホームページ制作実績
    • ワードプレスのこと
    • お客様のご感想
    • 起業コラム
  • プロフィールabout me
  • お問い合わせcontact
「あなたも50代から好きなことを仕事にできる」完全マニュアル詳細はこちら
  1. ホーム
  2. ワードプレスのこと
  3. SWELL
  4. 【SWELL】フルワイドセクション〜3カラムと境界線を波線にする方法

【SWELL】フルワイドセクション〜3カラムと境界線を波線にする方法

2022 3/18
SWELL

こんにちは。
このサイトはSWELLというテーマを使っています。

SWELLの詳細を見る

今回はSWELLで境界線を波線にする方法と3カラムにする方法を解説します。

目次

境界線を波線にして3カラムにしよう

トップページをおしゃれにしたいな

SWELLではセクション区切りを波線や斜め線にすることができます。
また画像を横に並べると可視性もよくデザインも垢抜けます。

こんなイメージです

フルワイドセクション・3カラム

STEP
フルワイドセクションを入れる

①フルワイドセクションを入れたい場所のすぐ上のセクションを選択します

②画面上の「+」ボタンをクリックする

STEP
フルワイドセクションを入れる

左側メニューから「フルワイド」を選択します。

STEP
3カラムにする

フルワイドが入った場合はうすいグレーの背景となります。
①タイトルを入力します(ここでは簡単バナーというタイトルを入れました)
②「+」ボタンをクリックしてショートカットメニューを表示し「カラム」を選択します。
(ショートカットメニューにない場合は「すべて表示」を押して左側メニューから探してください)

STEP
3カラムを表示する

「+」が3つ並んで3カラムの枠ができました。

STEP
バナーリンクを入れる

カラムの中に「バナーリンク」を設置し画像とテキストを配置します。

STEP
3カラムにそれぞれ画像とテキストを配置

それぞれ画像とテキストを配置してみました。

3つの画像の大きさを揃えることがきれいに配置させるポイントです。

セクション区切りを波線にする

STEP
上部の境界線を波線(曲線)にする

波線にしたいセクションを選択し右側メニューから「上部の境界線の形状」から「波」を選び高さレベルを好みの数値に設定します

STEP
下部の境界線を波線(曲線)にする

波線にしたいセクションを選択し右側メニューから「下部の境界線の形状」から「波」を選び高さレベルを好みの数値に設定します

出来上がりイメージはこちら

実際に実装したイメージはこちらからご覧いただけます

https://xs116105.xsrv.jp/swell/#nami

\この記事が良かったと思ったらポチッとクリックしてね/
にほんブログ村 ライフスタイルブログ フリーランス生活へ
にほんブログ村

メルマガ登録してね
47歳で離婚後、どうやってフリーランスとして収入を得ることができているか?
その秘密を覗いてみませんか?

まずは下のバナーをクリックしてください。

メルマガ登録

メルマガ

関連

SWELL
SWELL WordPressの操作方法 ワードプレスオンラインレッスン
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • ブログ一覧ページにタブをつける方法
  • おしゃれなWordPressテーマSWELL(スウェル)とは?

関連記事

  • おしゃれなWordPressテーマSWELL(スウェル)とは?
    2022年3月25日
  • ブログ一覧ページにタブをつける方法
    ブログ一覧ページにタブをつける方法
    2022年3月17日
  • 【特別編】SWELLをカスタマイズ時に便利な記事を集めました
    2022年2月5日
  • 【LESSON8】ワードプレス初心者に入れておいた方がよいプラグイン
    2021年12月21日
  • 説明リスト(DL)の入れ方
    2021年12月8日
  • サイトに動きをつける方法(Blocks Animation)
    【SWELL】サイトにふわふわ動きをつける方法(Blocks Animation)
    2021年11月29日
  • 【SWELL】画像とテキストを重ねて表示する方法(ブロークングリッド)
    【SWELL】画像とテキストを重ねて表示する方法(ブロークングリッド)
    2021年11月27日
  • 固定ページの編集方法(ブロックエディタ編)
    【SWELL】固定ページの編集方法(ブロックエディタ編)
    2021年11月8日
エクリュ
エックスサーバーの設定方法
エックスサーバーの契約からワードプレスインストールまで
WordPressマンツーマンレッスン
アラフィフ主婦でも稼げる狙い目副業7選。リスクなし在宅のお仕事紹介
女性向けサイトにぴったりなワードプレステーマの選び方
人気記事
  • 50代からの起業して成功!人生経験を生かして稼ぐ職種7選
    50代からの起業は遅くない!おすすめお仕事7選メリットとデメリット
  • macbookpro
    macbook proが熱すぎる!原因と対策は?
  • サイトに動きをつける方法(Blocks Animation)
    【SWELL】サイトにふわふわ動きをつける方法(Blocks Animation)
  • 【LESSON1】SWELLでヘッダーとメインビジュアルを設定する
  • メインビジュアルに画像を重ねておしゃれ感を出す方法
    【SWELL】メインビジュアルに画像を重ねておしゃれ感を出す方法
カテゴリー
  • 50代起業 (14)
  • canva (2)
  • SWELL (18)
  • webデザイナー (4)
  • アフィリエイトの始め方 (1)
  • アメブロ集客 (2)
  • お客様のご感想 (7)
  • パソコン (1)
  • フリーランス (1)
  • ブログを始める (4)
  • ホームページ制作実績 (54)
  • マンガ (9)
  • レッスンのこと (1)
  • ワードプレスのこと (5)
  • ワードプレスの機能 (14)
  • ワードプレスマンツーマン5回習得コース (26)
  • わたしのこと (2)
  • 主婦の副業 (3)
  • 引越し用 (1)
  • 未分類 (2)
  • 起業コラム (69)
  • 起業プロデュースプラン (5)
タグ
adobeCANVASEOSNS苦手SWELLTCDwebスクールWordPressWordPressの操作方法おすすめお金のことアフィリエイトアメブロアメブロカスタマイズカウンセラーキャッチコピーグーグル検索ストアカセラピストネット販売ブログお役立ち記事ブログカスタマイズホームページ作成マンガライトニングロゴワードプレスワードプレスオンラインレッスン制作実績副業年金以外に収入を得る引き寄せの法則画像の入れ方自宅サロン自宅教室製作実績起業起業コンサル起業塾集客高額コンサル

お問い合わせ・お申込み

 090-1656-1032

ホームページのこと・起業相談はお気軽にお問い合わせください。

お問い合わせ

メールマガジン
メールマガジン
最近の投稿
  • 40代ではもう遅い?未経験からwebデザイナーになる方法
  • 50歳でフリーランスになった経験を語ってみます
  • 婚活サロンミリーマリアージュ様のご紹介
  • おしゃれなWordPressテーマSWELL(スウェル)とは?
  • 【SWELL】フルワイドセクション〜3カラムと境界線を波線にする方法
  • ブログ一覧ページにタブをつける方法
  • ものごとがスムーズに運ぶ時はGOサインです
目次
  • ホーム
  • サロン専門ホームページ制作
  • ワードプレス1ページプラン
  • ワードプレススタンダードプラン
  • WordPressオンラインレッスン【おしゃれなサイトが作れます】
  • htmlプラン
  • 初心者向けワードプレスレッスン
  • 写真撮影
  • プロフィール
  • お申し込み・お問い合わせ
ランキングに参加しています

にほんブログ村 ライフスタイルブログへ
にほんブログ村

SWELLを使ってホームページを作ろう
人気テーマSWELLを使ってホームページを作ろう
SNS
SWELLご購入はこちら

© 【大阪箕面市】ホームページ制作・ワードプレスレッスンならecru(エクリュ).

目次
閉じる
 

コメントを読み込み中…
 

コメントを投稿するにはログインしてください。