MENU

【DIVER →SWELL乗り換え】ワードプレスのテーマ変更でデザインが崩れる箇所「画像付き」まとめ

ワードプレス テーマを SWELL にしたいけど、まだ DIVER→SWELL の乗り換えサポートプラグインがないから、デザインの修正が大変そう…

と思って、ただ時間だけがすぎていませんか?

そういう私も DIVER→SWELL の乗り換えを決めるまでに1週間ほどモヤモヤしていた一人です。

でも、テーマ変更するかで1週間過ぎてしまったときに

  みぃま

あ〜、この時間がもったいない!

と時間がムダに過ぎていることに気づきました。そこで、何が必要か調べて DIVER→SWELLの乗り換えに踏み切りました。

デザイン崩れする場所は、SWELLをインストールして「外観」>「テーマ」>「ライブプレビュー」でひとつひとつ確認&修正をすればできますが、時間もかかるし大変!!

そこで、DIVER →SWELLでデザイン崩れする箇所をまとめました。

どれだけ時間がかかるかは、DIVERで使っている設定や装飾によって違いがあるので、ぜひ参考にしてみてください。

この記事でわかること

  1. DIVER →SWELLの乗り換えに必要なこと
  2. 効率のいいテーマ変更の手順
  3. DIVER →SWELLでデザインが崩れる箇所 つ5つと対処法
  4. DIVER →SWELLでデザインが変わらない箇所6つ
  5. DIVER →SWELLにかかる時間

ワードプレス テーマの乗り換え前に散々悩んだ私ですが、「DIVER→SWELL」に乗り換えたら

  みぃま

大変なこと以上に気分の上がることばかり♪

具体的には

  • 文章装飾が簡単で、記事を書くスピードが上がった!
  • デザインがきれいで感動(こどもの晴れ姿を見た気分♪)
  • あらためてブログ執筆へのモチベーションが上がった!
  • 純粋に楽しい!!

この記事で、DIVER→SWELLに変更したいけど、どうしよう…というモヤモヤが少しでも減ったら嬉しいです。

この記事では、大きなデザイン崩れの箇所(記事内容を読むのに支障になる程度)のデザイン崩れをまとめています。(2021年7月時点)

ここでまとめた4箇所以外にも、DIVERの設定の仕方によっては、デザイン崩れがあるかもしれません。

最終的にはテーマ変更の前に、ご自身で「外観」>「テーマ」>「ライブプレビュー」でちゃんと確認してくださいね!

目次

DIVER →SWELLの乗り換えに必要なこと

ワードプレス テーマの乗り換えをすると、旧テーマで使っていたデザインが大幅に崩れます。

  みぃま

SWELLの開発者 了さんも、テーマ変更によるデザイン崩れについて触れています

テーマを乗り換える時、旧テーマの独自機能で文章の装飾などを使っていると 過去記事のデザインが一気に崩れてしまいます。

つまりテーマを途中で乗り換える場合、

1. 過去記事を全てリライトして整えるか、
2. ショートコードやCSSデータなどを自分で新テーマに移行させる

という作業が必要になってきてしまいます。

引用:SWELL 他テーマからSWELLへの「乗り換えサポートプラグイン」一覧
  みぃま

CSSデーターの編集に自信のない私は、全記事リライトする方法を選びました

DIVER →SWELLの乗り換えに必要なのは

  1. あなたの時間
  2. 最後までやり抜く根気

この2つ。

DIVER →SWELLのテーマ変更前にわかったデザインが崩れる箇所は4つです。

効率のいいテーマ変更の手順

紹介する手順は、テーマ変更で「全記事非公開」にすることなく、1記事ずつリライトしていく場合を想定しています。

テーマ変更で今ある記事を一旦、全記事非公開にする方はステップ②を飛ばして、テーマ変更後にデザイン修正してくださいね。 

とくに、DIVER →SWELLにしたいブログの

  • 記事数が多い
  • アクセス数が多い

場合は、「外観」>「テーマ」>「ライブプレビューでデザイン崩れを確認する作業が重要です。

効率のいい手順

STEP
バックアップをとる【5〜10分ほど】

テーマ変更をするにあたり、参考にして助けられた「バズ部」さんの記事

バックアップのやり方がとてもわかりやすかったです。

STEP
デザインが崩れる箇所確認&修正【時間がかかる】

デザインが崩れる箇所(後述)は、SWELLをインストール後に

「外観」>「テーマ」>「ライブプレビュー」で確認できます。

確認しながらコツコツ修正しましょう。

STEP
ワードプレステーマをSWELLに乗り換える【1分もかからない】

DIVER→SWELLへの乗り換えは「有効化」ボタンを押すだけ。

一瞬で終わります。

STEP
細かなデザイン修正【時間がかかる】

 TOPページや、記事のレイアウトなど、細かな修正をしていく。

DIVER →SWELLで、デザインが崩れる箇所5つと「対処法」

DIVER →SWELLで、大幅にデザインが崩れる箇所は5つ。デザイン崩れが気になる順にまとめました。

①吹き出しアイコン

DIVER →SWELLにすると、

デザインの崩れ方

  1. 「吹き出しアイコン」のサイズが超巨大化
  2. 吹き出し枠が消える
  3. 吹き出し内の文章→本文扱いになります。
  みぃま

ライブプレビューで見たとき、アイコンのあまりのデカさに思わず笑ってしまいました

DIVER 吹き出しアイコン
【画像】変更前→変更後

DIVER→SWELL 変更前「吹き出し」
DIVER→SWELL 変更後「吹き出し」

【対策】吹き出しアイコン

アイコン画像削除しておくと、吹き出し内の文章だけになります

②Diver入力補助「囲い枠」

DIVER →SWELLにすると、

デザインの崩れ方

  1. Diver入力補助「囲い枠」のタイトル内のアイコンが文字化けします。
  2. 「囲い枠」自体が消える
  3. タイトル・タイトル内の文章→本文扱いになります。

DIVER 入力補助「囲い枠」
【画像】変更前→変更後

DIVER→SWELL 変更前「囲い枠」
DIVER→SWELL 変更後「囲い枠」

【対策】DIVER 入力補助「囲い枠」

タイトル内のアイコンなくすと、文章としては読めるようになる。

③カテゴリーの色

DIVER →SWELLにすると、

デザインの崩れ方

カテゴリーの色デフォルトに戻る

【対策】カテゴリーの色

DIVERで設定していたお気に入りの「色の情報」はメモして保管しておく

  みぃま

色の情報を保存しておいたおかげで、DIVER→SWELLに変更後すぐにSWELLのカラー設定で変更できました♪

④動くラインマーカー・マーカー

DIVER →SWELLにすると、

デザインの崩れ方

  • 「動くラインマーカー」→マーカーの色が消え太文字じゃなくなる
  • 「マーカー」→マーカーの色が消える

動くラインマーカー・マーカー
【画像】変更前→変更後

DIVER→SWELL 変更前
「動くラインマーカー・マーカー」
DIVER→SWELL 変更後
「動くラインマーカー・マーカー」

【対策】動くラインマーカー・マーカー

  • 動くラインマーカー・マーカーをやめ、「赤文字・太文字」にしておく

「赤文字・太文字」にしておくと、リライトの時に目立たせたい部分がわかりやすくなります。

⑤ Font Awesome アイコン

DIVER →SWELLにすると、「Font Awesome アイコン」はすべて文字化けしました。

Font Awesome 「レ点」
【画像】変更前→変更後

DIVER→SWELL 変更前
Font Awesome「レ点」
DIVER→SWELL 変更後
Font Awesome「レ点」

【対策】Font Awesome アイコン

  • Font Awesome アイコンを使うのをやめ、「・」「●」にしておく

DIVER →SWELLで、デザインが変わらないところ6つ

  1. 引用ボックス→そのまま
  2. 赤文字→そのまま
  3. 太文字→そのまま
  4. →そのまま。表で設定した色もそのまま
  5. 写真中央揃えなどの設定はそのまま
  6. サイドバー・ウェジット→そのまま

DIVER →SWELL の乗り換えにかかる時間

「バックアップ&ワードプレステーマ変更」は10分もあれば完了します。

DIVER →SWELLにテーマ変更で、何が大変って

  1. テーマ変更前の、ライブプレビューを見ながらデザイン崩れの確認修正
  2. テーマ変更後、SWELL操作に慣れない中での細かなデザイン修正

です。

あなたの記事に

DIVER→SWELLで
デザインが崩れる箇所

  1. 吹き出しアイコン
  2. DIVER 入力補助「囲い枠」
  3. オリジナルの色(カテゴリーの色など)
  4. 動くラインマーカー・マーカー
  5. Font Awesome アイコン

を多用していればしているほど、デザインの修正に時間がかかります。

ワードプレスのテーマ変更はリライト作業が大変すぎた!けど、SWELLに変えて大正解!!

この記事で、DIVER →SWELLどうデザインが崩れるか、イメージできたんじゃないでしょうか?

あなたのサイトの場合、

これくらいの時間は必要になりそう

とイメージできたんじゃないでしょうか。

冒頭にも書きましたが、

  みぃま

思い切ってDIVERからSWELLに乗り換えて、大正解でした♪

SWELLの方が、文章の装飾がしやすいので記事が早く書けますし、カンタンにキレイなデザインに仕上がるからです。

それに、パソコンに向かう時間が楽しくなりました。

この記事が参考になりましたら嬉しいです。

よかったらシェアしてね!
目次
閉じる