SWELL

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ?

スポンサーリンク

本記事の内容

  • 1年以上使ってきたルクセリタス→『SWELL』へテーマ変更しました

 

こんな方におすすめ

  • テーマ変更を検討している方
  • ルクセリタスを使っている方
  • SWELLが気になっている方

 

 

それでは本題に入ります。

 

swell レビュー

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 結果 1592450956 1024x410

結論です。
SWELLのイチバン売りは、大きく2つあると実感しました。

 

ポイント

オシャレなトップページデザインを簡単に作ることが可能

ブロックエディタが、かなり使いやすい

 

1年以上もルクセリタスを使ってきた私が、SWELLにテーマ変更をして感じたことです。
無料テーマを使ってきたからこそ分かること目白押しです。

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? img 4776
ばらもん。
簡単ではありますが、解説します

 

オシャレなトップページデザイン

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? SWELLフルワイドトップ画面  1024x405

ぶろぐしる~』を見てもらったほうが早いです。

私は、以前からトップページにフルワイドで画像をドーン!と表示したい願望がありました。
しかし、CSSやHTMLをいくらカスタマイズしても『画像ドーン!』の夢は叶いませんでした。

 

 

しかし!

 

SWELLなら、クリックポチポチだけで『画像ドーン!』が可能です。
私がいままで悩んでいた時間は、かなり無駄なことに気付いた瞬間です。

ポイント

『動画ドーン!』もできるよ!

 

swell ピックアップバナー

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? SWELLピックアップバナー  1024x217

ヘッダー下のピックアップバナーの設置も簡単です。

 

もちろん、スマホは『2段2列』で表示をしてくれます。

AFFINGER6でも、同じような機能=ヘッダーカードはありますよね。
しかし、ルクセリタスでは実現することはできませんでした・・・。

ルクセリタスで試行錯誤した経緯をご紹介しています→『【Luxeritasルクセリタス】スマホ表示でアフィンガー風ヘッダーカード

 

swell プロフィール

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? SWELLプロフィール画面  1024x470

プロフィール欄もご覧の通り、フルワイドでオシャレに仕上がります。

トップページは、1カラムフルワイドで仕上げたい願望があったのでSWELLにして大満足です。

 

ブロックエディタ 使い方(デザイン崩れ対応方法)

 

SWELLのブロックエディタは、かなり使いやすいと感じています。

 

ルクセリタスからSWELLにテーマ変更をしたために、デザイン崩れが発生しました。

 

1年以上かけて、執筆してきた記事は約130記事です。

SWELLでは、乗り換えサポート用プラグインと言われるものがあります。

メモ

2021年6月時点では、下記の6つのテーマの乗り換えサポートがあります。

Cocoon

AFFINGER5

JIN

SANGO

STORK

THE THOR

残念ながら、ルクセリタスの乗り換えサポートはまだありません。

1つ1つの記事のデザイン崩れを修正していくのは、正直言って大変です。
しかし、SWELLのブロックエディタのおかげで修正が早く済んだことは事実です。

慣れた頃には、1記事のデザイン崩れを修正するのにかかる時間は『約10分』です。

特に、吹き出しを多用している方はデザイン崩れの修正は大変かな?という印象を感じました。

 

ルクセリタスのデザイン崩れ

ルクセリタス→SWELLにテーマ変更をしたことで発生したデザイン崩れをご紹介します。

ルクセリタス

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 2021 06 06 20h14 13

SWELLにテーマ変更後↓

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 2021 06 06 20h14 59

 

やはり、デザイン崩れが一番気になったのは『吹き出し』です。

吹き出しアイコンの下に、会話内容が表示されるようになりました。

 

SWELLに追加CSSを記述することで、囲み枠等は反映させることができます。

致命的なデザイン崩れは発生しません。

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? SWELL追加CSSである程度はデザイン崩れを防ぐことができる 1024x443

 

デザイン崩れの修正方法

デザイン崩れの修正方法を簡単にご紹介します。

SWELLは、クラシックエディタは使うことはありません。

step
1
ブロックへ変換

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 1 SWELLデザイン修正手順 1024x429

 

step
2
ブロックに変換完了

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 2 SWELLデザイン修正手順 1024x508

 

step
3
『ふきだしブロック』を選択

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 3 SWELLデザイン修正手順 1024x538

 

step
4
『ふきだしブロック』が挿入される

※ふきだしは、あらかじめ設定しておく必要があります。

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 4 SWELLデザイン修正手順 1024x344

 

step
5
元の吹き出し内容をコピペ

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 5 SWELLデザイン修正手順 1024x285

 

step
7
吹き出しのデザイン崩れ修正完了

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 6 SWELLデザイン修正手順 1024x483

 

step
8
不要ブロックを削除

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 7 SWELLデザイン修正手順 1024x573

 

step
9
『キャプション付きブロック』を選択

冒頭テンプレートの『本記事の内容』ブロックを作っていきます。

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 8 SWELLデザイン修正手順

 

step
10
『キャプション付きブロック』が挿入される

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 9 SWELLデザイン修正手順 1024x226

 

step
11
『キャプション付きブロック』の色とアイコンを設定

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 10 SWELLデザイン修正手順

 

step
12
『キャプション付きブロック』完成

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 11 SWELLデザイン修正手順 1024x440

 

step
13
ブロックの複製も簡単

※慣れてきたら、ショートカットキー『Ctrl+Shift+D』で即完了です。

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 12 SWELLデザイン修正手順

 

step
14
こんな感じに複製もできる

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 13 SWELLデザイン修正手順

 

step
15
修正完成

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? 14 SWELLデザイン修正手順

 

動画にまとめてみました。

 

まとめ

【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ? img 4776
ばらもん。
いかがでしたか?

1年以上かけて執筆してきた記事を修正していくのは、正直に言うと『大変』です。
テーマ変更を決断するのは、早いほうが断然に良いです。

 

私自身も130記事ほど、デザイン崩れ修正をしていますがSWELLのブロックエディタだからこそできたと言っても過言ではありません。

テーマ変更を考えていらっしゃるなら、”今”ですよ。以上です。

SWELLをみてみる!

兄弟ブログの『ぶろぐしる~』ですが、『ルクセリタス』→『SWELL』へテーマ変更しました。(2021年6月にテーマ変更)

 

1年以上かけて書いた記事は130記事以上・・・。
デザイン崩れを修正するのに1ヶ月かかりました。

注意ポイント

正直に言って、デザイン崩れを修正するのは大変な作業でした。

テーマ変更を決断するなら、早いほうが断然良いです。
私自身、テーマ変更に悩んでいた時間は無駄だったと感じました。

 

記事にまとめたので、『SWELL』が気になる方は要チェック!
→『【ルクセリタス→SWELL】レビュー!デザイン崩れ対処はどんな感じ?

\え?まだ、クラシックエディタ使いよん?もったいなw/

SWELL

SWELLのブロックエディタを体験しないのは損!

-SWELL