Menu/Prof
I/O Most popular TAGS
Mac
Win
internet
SWELL
APP
WP
ガジェット
寝言
SEO
home5g
TopPage
Bitwarden
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。
プロフィール
＼ ポイント最大11倍！ ／
  1. Home
  2. Blog
  3. SWELLのブロックエディターだけでコテコテのページ作ってみるか。

SWELLのブロックエディターだけでコテコテのページ作ってみるか。

PR
Blog
SWELL

Some visuals are licensed via Canva Pro (includes commercial rights).
Usage complies with Canva’s license terms at the time of use.
License policy: canva.com/policies/content-license-agreement

X
     この記事はプロモーションを含みます
>>Amazonのお得な最新のタイムセール情報はここ
サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ
ドコモ home 5G「キャッシュバック15,000円」を進呈中！
contents

まずはカラムの中にいろいろ仕込んでみる

スマホの方は横画面も確認して見てください。PCの方は横幅縮小してみてレスポンシブで稼働してるのを
ご確認ください。

キャプションBOX（中に画像を貼り付け）
  1. カラムの中に
  2. さらに50:50の
  3. カラムを作ってみる

こちらには普通のテキストを
書いて見ます

なんでもできちゃうね

hAhBhChD
1
2
3
4
5
6
F1F2F3F4
table

information

「こんなん普通にコード書いても他テーマでもできるやん？」
はい確かにその通りです。

でもSWELLはこの作業やるのになにも考えずにペタペタと指定するだけで出来ちゃうのが
とても生産性が高い理由です。HTMLやCSSの知識なくても全く問題ありません。

もちろん追加のお手製cssやjavascriptを使用してもっと凝ったことも可能になってます。
実際、上のカラムページを作り上げるのに５分もかかってません。

カラム無

これはボーダー設定した普通の書き込み
２行めの書き込み
３行めの書き込み

リストは複数ブロックまたがって書いたものをマウスでさっと範囲指定してまとめてリスト化できますね

  1. リスト
  2. １１１
    1. リスト
    2. リスト
  3. リスト

グループ化することによって自在に背景など装飾可能

  • これはリスト
  • これはリスト
  • これはリスト

これは普通のPタグ

グループ化すると背景や囲みを簡単に共通化

こんな凝ったTABLEも一撃で作成（左側のメニューのパターンから簡単に挿入可能）

スクロールできます

商品A
商品B
商品C
機能A少し古い普通最新機能
機能B非対応制限付き使用可
性能A200[単位]500[単位]1000[単位]
性能B500[単位]1000[単位]800[単位]
デザイン普通良い微妙
価格5,000円10,000円15,000円
購入する購入する購入する
各製品の比較

画像配置パターンもあらかじめ用意（パターンから挿入可能）

大きなテキスト

ここは段落ブロックです。文章をここに入力してください。

大きなテキスト

ここは段落ブロックです。文章をここに入力してください。

大きなテキスト

ここは段落ブロックです。文章をここに入力してください。

大きなテキスト

ここは段落ブロックです。文章をここに入力してください。

実はパターンの中の汎用パターンからあらかじめグループ化されたアイテム呼び出せる

＼ ぼたんだよ ／

ボタン
  • リスト
  • リスト
  • リスト

ここは段落ブロックです。文章をここに入力してください。

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト

優秀なSWELL固有ブロック一覧サンプル

リスト入りグループ

  • リスト
  • リスト
  • リスト

アコーディオン

アコーディオン1
アコーディオン2

A/Bテスト(アクセスする度にランダムにA/B表示)リロードで確認

ボックスメニュー

test
test
test
test

SWELLボタン

test1
test2
test3
test4

キャプションボックス

タイトル

デフォルト

タイトル

キャプション小

タイトル

枠上

タイトル

タイトル

タイトル

枠内

タイトル

浮き出し

内タイトル

内テキスト

リンクリスト

リッチカラム

カラム1

カラム2

カラム3

カラム4

説明リスト

説明リスト

説明1

説明リスト

説明2

FAQ

クエスチョン1

アンサー1

クエスチョン2

アンサー2

フルワイド

フルワイドブロック

ステップ

STEP
step1

内容1

STEP
step2

内容2

TAB

誰だ！

広告タグ

吹き出し

得意げな助手

吹き出しのテストよ

管理人

吹き出しのテストだな

じぴ子ちゃん

吹き出しよ

じぴ子ちゃん

はいはいー！

じぴ子ちゃん

あい

ガキ

ぶはは

ブログパーツ

ボックスメニューをブログパーツ化したもの

Mac
Windows
internet
Swell
APP
WordPress
ガジェット
寝言
SEO
home5g
TopPage
BItwarden

投稿リスト

カード型

リスト型

リスト左右交互型

サムネイル型

テキスト型

関連記事

あわせて読みたい
cocoonからSWELLに移行してみよう！ SWELL: ブログ運営を劇的に改善するワードプレステーマ ブログのデザイン作成や記事作成、面倒くさいと考えていませんか？でも大丈夫！ SWELLはあなたのブログを一瞬で…
あわせて読みたい
strong と b タグは SEO的に Googleは どうみてるのか問題 そして SWELLで回避策を考えてみよう ブロックエディターの B 私はなんとなく気にはなっていたが私なりの結論。 ブロックエディタのB使うと ソース的には strong が 使われるのは有名な話。 これは多用する…

たいしてコテコテでは無いですね笑い

でも昔手打ちでコード書いてた事考えるとこれは天国。

素晴らしい。 以上

あわせて読みたい
SWELLのデザインとGoogle アドセンスの広告 SWELLでアドセンスの自動広告じゃない 広告の貼り方 最初によくわからんので 試しにGoogle AdSenseの 自動挿入をONにしてみたらあまりにもぐいぐい来るので ウィジェッ…
Blog
SWELL
シェアしてくれると喜びます
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

makotoのアバター makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在　ほぼ自由人。

この著者の記事一覧へ

関連記事

contents