SWELLの『ボックス』~初心者におすすめ機能 第1弾~

SWELLのボックスは初心者こそおすすめ

こんにちは!ぴよぴよぴよこです!

ブログを始めて1ヶ月・・・

初期設定から記事の書き方まで、全部YouTubeを見ながら設定するデジタル音痴です。

無料テーマ「cocoon」を使っていましたが、うまく装飾ができずイライラ・・・

「無料テーマならcocoon一択」と言うほど、神的な無料サイトです。

でも、私にはうまく使いこなせない。

ブログ時間の半分以上を記事の装飾に使っていました。

「ここをちょっと、こうしたい」が、なかなか思うようにいかないのです。

ボックスの中にリストを入れようとすると文章の頭の位置が崩れてやり直し…

タブ付きのボックスのタブを変えようと検索して挫折…

(CSSで簡単にできるって書いてあるけど、CSSの時点で難しくて諦めます)

そんな「ブログの装飾難民」になっていた時です。

Twitter仲間のツイートで有料テーマなら簡単にできると見かけます。

そこから必死で調べて(主にYouTube)楽しいブログ生活を送るためSWELLを購入しました。

一気に快適になったブログ生活!

SWELL歴2週間弱の超初心者ですが、同じような「ブログの装飾難民」の役に立てたらと思います。

この記事に書いてあること

SWELLのボックス装飾について

  • とても簡単だということ
  • 45個以上のボックス的な装飾
  • 実際のボックスを表示して紹介
目次

SWELLのボックスは初心者でも簡単

デジタルが苦手でも簡単!

結論から言うとSWELLのボックスはすごく簡単に作成できます!

他の有料テーマも簡単かもしれませんが使ったことないので、記事内で比較するとしたらcocoonとSWELLとなります。

まず、重要なポイントとしてSWELLではデフォルトでボックスが簡単に作成できます。

Cocoonでも色んなボックスができるようですが、おしゃれで見やすくしたければCSSをいじるとか高度な話。

私の力量では、たちうちできませんでした。

それが、SWELLではデフォルト(やりたいボタンを押すだけ)でおしゃれで見やすいボックスが作れるのです!

SWELLの公式サイトは動画付き

SWELLの公式サイトでは説明記事の補助的に動画がついているものが多いのもポイントです。

私もSWELLを購入する前は本当に簡単かどうか半信半疑だったので、動画を食い入るように見ていました。

(動画はスクロールして真ん中あたりにあります!)

だって、YouTubeや色んなブログでSWELLは簡単と説明しているけど「デジタルが得意な人の簡単」と「デジタルが苦手な私の簡単」は基準がそもそも違うのです。

初心者ブロガーの私のレベルで簡単にできるかどうかは、自分で判断するしかありません。

SWELLは購入者特典として、SWELLのアフェリエイトができるようになります。

そのためSWELLを売りたいだけなのかもって疑ってしまっていました。(性格悪くてすみません)

ボックスの種類が45個以上(ボックス的なものも含む)

一般的にいうボックスではないものも含まれます。

私のcocoon時代は、装飾に苦労していたため白抜きボックスとアンダーマーカーだけの装飾でした。

そのため私の「ボックス」の定義が、他の方より広くなってしまっています。

強調したいものは、とりあえずアンダーマーカーかボックスの2択だったので・・・

今回紹介すること

SWELLのデフォルトでできたボックスを紹介したいと思います。

  • デジタル系がすごく苦手なぴよぴよぴよこが初見でできたボックスのみ紹介
  • SWELLのスキル(執筆) SWELLへの移行のためのリライト(記載内容の変更なし)6記事(10日間)
  • SWELLのスキル(外観変更) サイト型にしたいが挫折。サイトのテーマカラーを変更し満足。
  • SWELLのスキル SWELL1記事執筆。この記事が2記事目。
ぴよぴよぴよこのデジタルスキル

Googleアドセンス連敗中(3回挑戦済)

  • cocoon時代の執筆 1ヶ月で8記事(12月29日ブログ開設:年末年始の休みも執筆)
  • cocoon時代の装飾 ボックスとアンダーマーカー
  • ブログの初期設定はYouTube先生に頼る(「感覚でできる」の意味がわからない)
笑ってもいいよ♪

わからなかったボックスは調べてリベンジしますが、簡単さをお伝えしたい記事なので、調べなければわからなかったものは「難しくてわからなかった」と目次の3つ目「補足1」にまとめて記載します。

SWELLの1記事目は、有料テーマを比較した記事になります。(購入した興奮もあり2日で書いています)

有料テーマの比較記事となりますので興味があればこちらをご覧ください♪

ボックスの見本

デフォルトから変更した箇所 2か所
  • テーマカラーの変更(濃い青からオレンジへの変更)
  • アンダーマーカーの設定(ただの線から、細いストライプ柄に変更)

※令和4年2月24日現在のものになります。全体の設定は一括変更となってしまうため、今後サイトの修正を加えるとで、デフォルトでない箇所が増えることがあります。ご了承ください。

テキストの中にあるボックス

ボックスの見本。テキストの中にあるボックス

段落

ボーダー設定01

ボーダー設定02

ボーダー設定03

ボーダー設定04

ストライブ

方眼

角に折り目

スティッチ

かぎ括弧

かぎ括弧(大)

窪み

浮き出し

左に縦線

付箋

吹き出し(文字サイズにあわせて長さの調整あり)

吹き出し2(文字サイズにあわせて長さの調整あり)

グッド

バッド

インフォ

アナウンス

ペン

ポイント

チェック

バツ印

はてな

アラート

メモ

引用

これはCocoonでも1回お世話になりました。

難易度はcocoonと同じで簡単にできます。

メディアの中にあるボックス

ボックスの見本。メディアの中にあるボックス

メディアとテキスト

大好きなはりねずみ。とげとげしてる感じが好き

ボックスかな?

ボックスとは言えないかもしれないですが、写真の紹介・強調のためにボックスを使いたいと思っているなら、これもお役にたてるかと思い紹介してみました。

操作方法は、「メディアとテキスト」のボタンを選ぶだけです。イラストと文字を横に並べて書くのもボタンひとつでできます。

なんか素敵なブログに感じませんか?

(大好きなはりねずみさんを参考写真で挿入しました)

デザインのアイコンの中にあるボックス

ボックスの見本。デザインの中にあるボックス

カラム

カラム1

カラムを使えば、ブログを2つにわけたり3つに分けるのが簡単にできます。

カラム2

今回は3等分にしてみました。

右はカラムの種類を掲載しています。

デフォルトでは6種類あります。

カラム3

カラムの種類

SWELLブロックの中にあるボックス

ボックスの見本。SWELL blockの中にあるボックス

アコーディオン

ABテスト

こちらはAブロックです

2つのブロックをランダムに表示します。(デフォルトではAブロック・Bブロックの名前変更はできないみたいです)

似ている機能でタブという機能がありました。

  • ABテスト・・・AかBの記事がランダムで入る。読者の意志で記事の切り替えがができません。
  • タブ・・・どちらも表示されます。読者の意志で記事の切り替えができます

キャプションボックス

デフォルト

デフォルトのキャプションボックスです。タイトルは選んで上書きできるので簡単に変更できます

小のキャプションボックスです。タイトルは選んで上書きできるので簡単に変更できます

枠上

枠上のキャプションボックスです。タイトルは選んで上書きできるので簡単に変更できます

枠上2

枠上2のキャプションボックスです。タイトルは選んで上書きできるので簡単に変更できます

  • これが一番やりたかったボックスです
  • 枠の中でリストの作成もストレスなく簡単にできます
  • 今までの苦労が嘘みたいです
枠内

枠内のキャプションボックスです。タイトルは選んで上書きできるので簡単に変更できます

浮き出し

浮き出しのキャプションボックスです。タイトルは選んで上書きできるので簡単に変更できます

内テキスト

内テキストのキャプションボックスです。タイトルは選んで上書きできるので簡単に変更できます

リッチカラム

リッチカラム

普通のカラムとリッチカラムの違い・・・・

正直よくわからないけど

ブロックが増やせてるから・・・

それ???(詳細:要調査)

息子のアイコン
ぴよぴよぴよこのプロフィール画像

違いがちょっとわからない。

使い方も思いつかない・・・

とりあえずスペースに家族のアイコンを入れて余白を埋めました。

3人家族

  • ぴよぴよぴよこ(私) →自作
  • ウルフ君(息子) →興味ないためフリー素材
  • くらげちゃん(娘) →自作
娘(娘の自作アイコン)

説明リスト

説明のリスト1

説明リストも簡単に使用できます。

説明のリスト2

これも記載できる場所が示されるので、上書きするような感覚で記事を作成していきます

説明のリスト3

デフォルトが「説明のリスト2」までですが、「説明のリスト3」まで感覚で追加できました!

FAQ

いろんな企業サイトでみるようなQ&A

個人のサイトでデフォルトで入ってるってすごいです

問題を書いて・・・

答えを書く。簡単だけど便利!

ステップ

STEP
YouTubeで下調べ

ぴよぴよぴよこのブログの初期設定などのステップ説明

STEP
Wウインドウにして一緒にやる

PC・タブレットが追加でほしいです。Wウィンドウは見づらい(。-`ω-)

STEP
できあがり(できあがらず挫折することも・・・)

デフォルトは、ステップ2まで。

簡単に追加ボタンでSTEP3を追加作成できました。

タブ

ABブロックでは、タイトルの変更はできませんでしたが、こちらは変更可能です。

使用目的がプレビューをみたところ違うようです。

TAb2にてどう違うか説明しますね♪

USEFUL BLOCKSの中にあるボックス

ボックスの見本。USEFUL BLOCKSの中にあるボックス

比較ボックス

2色がデフォルト。色の変更・・・見みつからない。比較を3つにする方法・・・みつからない。

でも、調べたらできるかもしれない雰囲気。

SWELL
Cocoon
  • 開発者 了さん
  • 有料
  • 簡単装飾
  • 開発者 わいひらさん
  • 無料
  • 簡単装飾は簡単ではない

アイコンボックス

プロフィール的な使い方?

ちょっと使い方がわからないけど、

記事内プロフィールで使用中

こんにちは

補足1:難しくてわからなかったもの(ボックスかどうかも不明)

テキストのボタンから選択するもの

  • クラシック
  • コード
  • 整形済テキスト
  • プルクオート

デザインのボタンから選択するもの

  1. グループ

SWELLブロックのボタンから選択するもの

  • 広告タグ
  • ブログパーツ

補足2:ボックス以外の装飾など

テキストのボタンから選択するもの

  • 見出し
  • リスト
  • テーブル

メディアのボタンから選択するもの

  1. 画像
  2. ギャラリー
  3. 音声
  4. カバー
  5. ファイル
  6. 動画

デザインのボタンから選択するもの

  1. ボタン
  2. 続き
  3. ページ区切り
  4. 区切り
  5. スペーサー
  6. ポチップ(これはもしかしたら推奨プラグインかもです)

SWELLボックスのボタンから選択するもの

  • バナーリンク
  • SWELLボタン
  • フルワイド
  • ふきだし
  • 投稿リスト
  • 関連記事
  • 制限エリア
  • RSS

USEFUL BLOCKSのボタンから選択するもの

  • CVボックス
  • 棒グラフ
  • 評価グラフ

まとめ

いかがだったでしょうか?

2か月目の初心者ブロガーぴよぴよぴよこが、SWELL2記事目で調べずにできるボックス装飾の紹介をしました。

SWELLに移行してまだ2記事目ですが、記事を書くスピードが格段にアップしました。

cocoon時代は、1記事書くのに1週間かかっていました。

それがSWELLでは、3日で終わりました。

cocoonが悪いわけではないです。

ただ、私がデジタルが苦手すぎて、cocoonにはたちうちできなかっただけです。

紹介した内容
  • SWELLのボックス装飾はデジタル音痴の初心者にも簡単!
  • SWELLの公式サイトは動画付きのものも多い
  • デフォルト(ボタンを押しただけ)でできる
  • 45個以上のボックス的に使える装飾
  • どこのボタンにどんなボックス装飾があるか
  • 実際のボックスを表示して紹介

最後までお読みいただいてありがとうございました。

ぴよぴよぴよこでした♪

ポチっとしていただけたら嬉しいです

にほんブログ村 ブログブログ ブログ初心者へ
にほんブログ村
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

30代の豆腐メンタルのぴよぴよぴよこです。
シングルマザーで子供二人と楽しく暮らしています。
メンタル強化の実践していることや調べたことを記事にしたいと思っています。
詳しいプロフィール

コメント

コメントする

目次