Menu/Prof
翻訳
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

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

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

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

contents

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

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

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

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

なんでもできちゃうね

hAhBhChD
1
2
3
4
5
6
F1F2F3F4
table

information

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

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

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

カラム無

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

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

  1. リスト
  2. 111
    1. リスト
    2. リスト
  3. リスト

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

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

これは普通のPタグ

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

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

スクロールできます

商品A

商品B

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

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

大きなテキスト

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

大きなテキスト

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

大きなテキスト

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

大きなテキスト

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

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

\ ぼたんだよ /

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

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

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

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

リスト入りグループ

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

アコーディオン

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

ボックスメニュー

SWELLボタン

キャプションボックス

タイトル

デフォルト

タイトル

キャプション小

タイトル

枠上

タイトル

タイトル

タイトル

枠内

タイトル

浮き出し

内タイトル

内テキスト

リッチカラム

カラム1

カラム2

カラム3

カラム4

説明リスト

説明リスト

説明1

説明リスト

説明2

FAQ

クエスチョン1

アンサー1

クエスチョン2

アンサー2

フルワイド

フルワイドブロック

ステップ

STEP
step1

内容1

STEP
step2

内容2

TAB

誰だ!

広告タグ

吹き出し

得意げな助手

吹き出しのテストよ

管理人

吹き出しのテストだな

ブログパーツ

例としてSWELL広告を2カラムで括って表示させるものをブログパーツ登録したもの

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

投稿リスト

カード型

リスト型

リスト左右交互型

サムネイル型

テキスト型

関連記事

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

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

素晴らしい。 以上


シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!
contents