SWELLのブロックエディターだけでコテコテのページ作ってみるか。
contents
まずはカラムの中にいろいろ仕込んでみる
キャプションBOX（中に画像を貼り付け）
- カラムの中に
- さらに50:50の
- カラムを作ってみる
こちらには普通のテキストを
書いて見ます
なんでもできちゃうね
| hA | hB | hC | hD |
|---|---|---|---|
| 1 | |||
| 2 | |||
| 3 | |||
| 4 | |||
| 5 | |||
| 6 | |||
| F1 | F2 | F3 | F4 |
「こんなん普通にコード書いても他テーマでもできるやん？」
はい確かにその通りです。
でもSWELLはこの作業やるのになにも考えずにペタペタと指定するだけで出来ちゃうのが
とても生産性が高い理由です。HTMLやCSSの知識なくても全く問題ありません。
もちろん追加のお手製cssやjavascriptを使用してもっと凝ったことも可能になってます。
実際、上のカラムページを作り上げるのに５分もかかってません。
カラム無
これはボーダー設定した普通の書き込み
２行めの書き込み
３行めの書き込み
リストは複数ブロックまたがって書いたものをマウスでさっと範囲指定してまとめてリスト化できますね
- リスト
- １１１
- リスト
- リスト
- リスト
グループ化することによって自在に背景など装飾可能
- これはリスト
- これはリスト
- これはリスト
これは普通のPタグ
グループ化すると背景や囲みを簡単に共通化
こんな凝ったTABLEも一撃で作成（左側のメニューのパターンから簡単に挿入可能）
スクロールできます
 商品A | 商品B | 商品C | |
|---|---|---|---|
| 機能A | 少し古い | 普通 | 最新機能 |
| 機能B | 非対応 | 制限付き | 使用可 |
| 性能A | 200[単位] | 500[単位] | 1000[単位] |
| 性能B | 500[単位] | 1000[単位] | 800[単位] |
| デザイン | 普通 | 良い | 微妙 |
| 価格 | 5,000円 | 10,000円 | 15,000円 |
| 購入する | 購入する | 購入する |
画像配置パターンもあらかじめ用意（パターンから挿入可能）
大きなテキスト
ここは段落ブロックです。文章をここに入力してください。
大きなテキスト
ここは段落ブロックです。文章をここに入力してください。
大きなテキスト
ここは段落ブロックです。文章をここに入力してください。
大きなテキスト
ここは段落ブロックです。文章をここに入力してください。
実はパターンの中の汎用パターンからあらかじめグループ化されたアイテム呼び出せる
＼ ぼたんだよ ／
- リスト
- リスト
- リスト
ここは段落ブロックです。文章をここに入力してください。
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
優秀なSWELL固有ブロック一覧サンプル
リスト入りグループ
- リスト
- リスト
- リスト
アコーディオン
アコーディオン1
アコーディオン2
A/Bテスト(アクセスする度にランダムにA/B表示)リロードで確認
ボックスメニュー
SWELLボタン
キャプションボックス
タイトル
デフォルト
タイトル
キャプション小
タイトル
枠上
タイトル
タイトル
タイトル
枠内
タイトル
浮き出し
内タイトル
内テキスト
リンクリスト
リッチカラム
カラム1
カラム2
カラム3
カラム4
説明リスト
- 説明リスト
説明1
- 説明リスト
説明2
FAQ
フルワイド
フルワイドブロック
ステップ
STEP
step1
内容1
STEP
step2
内容2
TAB
広告タグ
吹き出し
得意げな助手吹き出しのテストよ
管理人吹き出しのテストだな
じぴ子ちゃん吹き出しよ
じぴ子ちゃんはいはいー！
じぴ子ちゃんあい
ガキぶはは
ブログパーツ
ボックスメニューをブログパーツ化したもの
投稿リスト
カード型
リスト型
リスト左右交互型
サムネイル型
テキスト型
関連記事
あわせて読みたい
cocoonからSWELLに移行してみよう！
SWELL: ブログ運営を劇的に改善するワードプレステーマ ブログのデザイン作成や記事作成、面倒くさいと考えていませんか？でも大丈夫！ SWELLはあなたのブログを一瞬で…
あわせて読みたい
strong と b タグは SEO的に Googleは どうみてるのか問題 そして SWELLで回避策を考えてみよう
ブロックエディターの B 私はなんとなく気にはなっていたが私なりの結論。 ブロックエディタのB使うと ソース的には strong が 使われるのは有名な話。 これは多用する…
たいしてコテコテでは無いですね笑い
でも昔手打ちでコード書いてた事考えるとこれは天国。
素晴らしい。 以上
あわせて読みたい
SWELLのデザインとGoogle アドセンスの広告
SWELLでアドセンスの自動広告じゃない 広告の貼り方 最初によくわからんので 試しにGoogle AdSenseの 自動挿入をONにしてみたらあまりにもぐいぐい来るので ウィジェッ…
SWELL - シンプルなのに、高機能 – もっと気軽に、楽しく記事を書こう。 それを可能にするWordPressテーマです。
SWELLはGPL100%テーマです。
ライセンス制限はなく、複数サイトでご自由にご利用頂けます。
このBLOGももちろんSWELL使ってますよ！
ロリポップレンタルサーバー
筆者もこのBLOGでお世話になっているレンタルサーバー。 ハイスピードプランはLiteSpeed採用でガチで速いっすよ。
筆者もこのBLOGでお世話になっているレンタルサーバー。
ベーシックプランはガチで速いっすよ。コストパフォーマンス満足度
使い続けたいレンタルサーバー
アフィリエイト、ブログで使いたいレンタルサーバー
サポート対応満足度
すべて1位
この記事を書いた人
関連記事
-
Bing向けSEOの完全ガイド：検索結果で目立つための戦略 -
PREP法だけじゃない！読者を引き込む新しいブログ記事のライティング術 -
FileZillaの使い方ガイド｜FTPクライアントの設定と活用法 -
strong と b タグは SEO的に Googleは どうみてるのか問題 そして SWELLで回避策を考えてみよう -
BLOG流入と被リンク。seo的に考える被リンク獲得効果について考察
-
swell カスタマイズ : cssとjavascriptだけで文中に動くアンダーラインを引く方法
-
信頼性と経営安定性：レンタルサーバー選びで重要なポイント
-
swellでreCAPTCHAを必要なページだけ稼働させたい。（Blog高速化 最終章）
