MENU

【何ができる?】SWELLでブロックエディターを使い倒せ→5つの便利な機能紹介(どのテーマでも役に立つ)

読者のアイコン画像読者

SWELLでブロックエディターを使いこなせてないかも

読者のアイコン画像読者

SWELLにしたいけど具体的にどんな機能が良いの?

読者のアイコン画像読者

ブロックエディター使いこなせないわ

この記事では上記のような疑問を解決します

この記事の想定読者
  • SWELLを使いこなしたい人
  • SWELLの機能について知りたい人
  • ブロックエディターを使いこなしたい人

私は多少のプログラミング知識があったことから、スムーズにブロックエディターに慣れていきました。

ゴリランのアイコン画像ゴリラン

(まあ、ブロックエディターになってブログを始めたから必然。笑)

本記事でブロックエディターを活用できれば、SWELLが今まで以上に生かされてくるでしょう。

*他のテーマでも活用できるブロックエディターの使いたい機能を紹介します。

なお、有料のテーマに悩んでる方は下記の記事も参考になるかと

目次

SWELLの設定マニュアルを読み込む

SWELL利用者でない方はこのタイトルは飛ばしてOKです。

●設定マニュアル

SWELLには制作者の了さん(@ddryo_loos)が設定マニュアルを作ってくれています。

公式サイトのメニュー>設定マニュアル>エディター機能の使い方
(今回はこの項目をチェックしておいてください。)

SWELL利用者であれば、設定マニュアルは読み込んでください。

各々のブロックの使い方は詳細な説明があります。

とにかく分かりやすいです。

ですので、この部分の説明は私は必要ないので割愛。(制作者はとにかくユーザーファースト)

●SWELLを使い倒す

SWELLにはせっかく個々の素晴らしいパーツが整っています。

それらを生かすも殺すもブロガー、サイト運営者です。

SWELLの機能を無駄なく使うための知識をこの記事で獲得してもらえれば幸いです。

ブロックエディターを知る

●ブロックエディターとは

ブロックエディターとは、HTMLなどの記述なしで、ブロック単位でパーツを追加、編集、配置等ができるエディターのことです。

ざっくり言うと

●従来のクラシックエディターがWordっぽくて記事が書きやすい。

●今回のブロックエディターはNo Codeでプログラミングっぽく配置を自在に変えたりできる

最近、プログラミング知識がなくても、直感的に操作ができるサービスなどが増えてきています。

ブロックの考え方はまさにプログラミングっぽいと思います。

ブロックエディターには、これらのブロックを直感的に操作し、デザインを自在に作成できるというメリットがあると筆者は考えます。

ブロックエディターは奥が深いので、別の記事にて執筆しようと考えています。

●ブロックエディターを生かすSWELL

SWELLには専用のブロックというものが存在します。

ブロックエディターを生かすために開発された側面もあると思います。

ゴリランのアイコン画像ゴリラン

私の主観です。笑

それはさておき、ブロックエディターは従来のクラシックエディタよりもUI(見た目のこと)を改善しやすい作りになっているのは確かです。

プログラミングの知識がなくても配置を自在に変えることができるので、読者のために見やすい記事を作成ができます。

SWELLではブロック毎の開発を積極的に行ってくれており、ゴリゴリアップデートしてくれています。

とにかくブロックエディターを生かしてくれるのがSWELLです。

SWELLでブロックエディターを使い倒せ

5つの使いたい機能
  • ボックスデザインを変更(SWELL限定)
  • ブロックの入れ子(グループ化)
  • ブロックの移動
  • ブロックの余白を変更
  • 再利用ブロックを活用

上記を使うメリットは記事執筆の際、「こうしたいな、ああしたいな」を直感的な操作で実行できること

●ボックスデザインを変更(SWELL限定)

SWELLでは記事執筆中にサイドバーでブロックのデザインを選べます。

各々、上記のサイドバーを変更することができます。

エディター設定をすることで記事執筆中のサイドバーをカスタマイズできる。

この設定は自分のサイトの雰囲気に合わせて変更しましょう。

●ブロックの入れ子(グループ化)

グループの入れ子(グループ化)は下記のような配置にすることです。

やり方は簡単です。

STEP
グループを選択
グループにしたい部分を選択(青枠で指定されたということ)

次に赤枠をクリックします。

赤枠の「グループ化」をクリックすれば完成です。
STEP
全体のグループにもデザインを指定
左はグループ化したブロック。右はそのブロックのデザインを変更できる。

●ブロックの移動

赤枠でブロックを移動できる
上下移動OK

中の赤枠で掴むことができます。

今回は上に空白のブロックを作り

その中に2つの要素を移動します。

●ブロックの余白を変更(SWELL限定)

ブロックに対して余白をコードをいじることなくできます。

これはおまけに知っておいても損はないかと思います。

●再利用ブロックを活用

同じような文章構造になったり、全く同じブロックをまた使いたい時に保存しておいて再利用できる機能です。

追加をクリック
名前を決め、保存する。
新しいブロックを追加する際、「再利用可能」に作成した再利用ブロックがあるのでクリック

一瞬でリード文の型が出てきました。

もし全く同じ内容のブロックを使いまわしたいときは、SWELLならブログパーツで作成できます。(プラグインなし)

SWELL公式ページでチェック

おそらくこの記事の読者はSWELLを使用してる方が大半だと思います。

ただ、一応SWELL検討中の方もいるかも。。。

ゴリランのアイコン画像ゴリラン

ちょっと宣伝させて。笑

テーマならSWELL(デザインもSEOも)

WordPressテーマで悩んでいるなら、SWELLをオススメします。

SWELLを使用することで作業効率も上がり、デザインが綺麗な仕上がりに

私はブログ開始2ヶ月目で無料テーマからこのテーマに移行しました。

このテーマについて知るだけでも価値がありますよ。

SWELLの公式ページで詳細を確認する(お試し版あり)

ゴリランのアイコン画像ゴリラン

最後まで読んでいただき、ありがとうございました。
読者が今後、ブロックエディターが使いやすいと感じてもらえれば幸いです。

この記事が気に入ったら
フォローしてね!

この記事を書いた人

●就活、転職、自営業経験者として働き方について発信中。暮らしについても。「一人一人が生き方をデザインできるように」を第一にサイト運営しています。
【経歴】証券会社▶自営業▶︎保育士

目次
閉じる