この記事ではブログテーマのJINからSWELLへ移行した際の困ったポイントをお伝えしていきます。
ブログ執筆と言えば以下の２種類で書いてきた方も多いのではないでしょうか。
- ビジュアルエディタ
- テキストエディタ
筆者はブログ開設当初からGutenberg（ブロックエディター）で記事を執筆しています。
テーマは無料テーマのCocoon→有料テーマのJINを使用していました。
とっても可愛らしい装飾もできて気に入っていましたがブロックエディターだけでは装飾が使えないのが弱点。
そうすると以下の問題で苦戦していました。
- 逆にビジュアルエディターで書くのが難しい
- テーマが完全対応していなく使いづらい
- ビジュアルとブロックの行き来をして表示崩れが起きる
ティ―書くことに集中したいのにトラブルが起きて進まない！！！
私と同じような思いをしているあなたに読んでほしい。
これからのブログ執筆はブロックエディターが確実に主流になっていきますよね。
今ビジュアルエディターで書いているあなたもSWELLならブロック完全対応なので練習もしやすいと思いますよ。
- ブロックエディターJIN→SWELL移行時の表示の崩れ具合の直し方
- 感動！SWELLに変えて良かった魅力とは？
この記事を書いた人
- 7歳と2歳の双子を育てるママ
- ブログ歴1年と4カ月
- 使用テーマ：Cocoon→JIN→SWELL
待って、SWELLってどんなテーマだっけ？というあなた！
＼ 簡単にカスタムできる ／
以下で丁寧に解説していきますね。
JINからSWELLに変更した決め手の理由とは？
私がJINからSWELLにテーマ変更した決め手は以下の３つです。
- Gutenberg（ブロックエディター）への完全対応テーマ
- サイトスピードの改善が見込める
- カスタマイズコードを使わなくても充実したカスタムブロック
順番に説明します。
Gutenberg（ブロックエディター）への完全対応テーマ
JINはまだ2021年8月現在、全部の機能はブロックエディターで使うことが出来ません。
ですが魅力的な装飾もあるのでどうにかして使いたい…
行き着いたのはクラシックエディタープラグインを使う事。
頑張って使っていましたがビジュアルエディターに切り替えないと上手くできないこともあり苦戦していました。
SWELLはブロックエディターの使用を推していて完全対応しているのがウリです。
ブロックエディターで完結できることがとても魅力的に思いました。
サイトスピードの改善をしたかった
JINを利用しているユーザーは薄々気が付いていると思いますが、どうもサイトスピードが重くなる傾向があります。
その対策をする為にキャッシュ系のプラグインを導入するのですが効果もイマイチ…
私のブログの抱えている問題点でもありました。
SWELLはテーマに基本的にSWELLの標準機能で対応しているのでプラグインを余分に導入する必要はありません。
余分なプラグインがいらないという事はサイトも重くなる要素が少なくて済むという事でもあります。
カスタマイズコードを使わなくても充実したカスタムブロック
JINも充実した装飾が出来ます。
ですが表のスクロールにCSSを当ててあげないといけなかったり、ステップ表示したい場合も機能がないので
ショートコードで呼び出せるように仕込む必要があったりと事前準備が必要な状態でした。
SWELLであれば初めからスクロールもステップも搭載されていて直感で使えるのが魅力的です。
移行時にこれが困った！デザインの表示崩れの修正方法は？
実際に移行をしてみてあれ？これってどう修正するの？となった以下の個所をお伝えしていきます。
- 訪問側の画面で崩れていたところ
- 投稿画面で表示崩れをしているところ
- 【事前準備】移行する時は乗り換えサポートプラグインを利用する
- メタディスクリプションは書き直しが必要
訪問側の画面で崩れていたところはココ
あなたが記事を読む画面側で表示崩れが起こっていたのは主に以下の３つです。
- 吹き出しの名前表示
- ボックスの縮尺
- アンダーライン（マーカー）の色
順番に説明しますね。
吹き出しの名前表示
記事の途中でふきだしをよく使うんですが画像の下の名前の部分があっちこっちにとんでいる状態でした。
下の画像だとアイコンの下側に名前が隠れてしまっている状態です。
ボックスの縮尺
リストを囲ったりキャプション付きで文章を書いた場合、表示が変わっていました。
もっと余白もあるボックスなのにギュッと圧縮されてるような見え方をしています。
アンダーライン（マーカー）
アンダーマーカ―は指定したところには引いてあるように見えましたが、JINの色が引き継がれているので全部見直しをする必要がありました。
投稿画面で表示崩れをしているところはココ
先ほどは訪問者側から見える表示崩れでしたが今度は私が編集する側から見て崩れている箇所の話になります。
表示が崩れているところは基本的に以下の文言が書いてあります。
○○ブロックはサイトでサポートされていません。そのまま残すか、カスタムHTMLブロックへ変換、または完全に削除してください。
このメッセージが出ているところは基本的に直していきます。
文言は以下の部分の装飾崩れと共に表示されています。
- 吹き出しの名前表示
- 装飾ボックスの縮尺
- ボタンリンク
- 関連記事
その他、修正する対象にしたものは
- アンダーライン（マーカー）の色
- 太字（strongタグからspanタグへ）
以下でもう少し詳しく見ていきますね。
吹き出しの名前表示が全然違うところにある
編集側では以下の表示になっているのでここを直していきます。
私の場合はいったん文字をコピペできるようにHTMLに変換します。
HTMLに変換するとHTML表示かプレビュー表示か変更できます。
ここではプレビュー表示で直していきます。
※画像はイメージです
アイコンの下側に書いてある文字をコピーしておきます。
事前にふきだしの設定でアイコンと吹き出しの色などを設定しておいたものを呼び出します。
【＋】ボタンで【ふきだし】を選択。
ティ―ここにテキストを入力
テキストを入力部分にコピーした文字をペーストしていきます。
ボックスの縮尺が変わってしまっている
ボックスの部分も以下のようになっているので同じように直していきます。
ここでも同じようにHTML変換していきます。
HTMLに変換するとHTML表示かプレビュー表示か変更できます。
ここではプレビュー表示で直していきます。
リスト表示であってもそのまま文字をコピーしていきます。
【＋】ボタンで【キャプション付きブロック】を選択
右側にあるスタイル設定画面でキャプション位置をいろんなパターンに変更できます。
- 楽天ふるさと納税のやり方解説
- 楽天ふるさと納税のメリットデメリット
- 自己負担を軽減させるお得な寄付の仕方
リストのスタイルも右側の設定画面で変更できます。
ティ―実は私キャプション以外のボックスに最初つまづいたんだよね…
てぃーそっか…では解説するよ
SWELLのボックスの出し方
例えば以下のようなテキストを書いてみますね。
【こんにちは♡ティーです。】
【こんにちは♡ティーです。】のテキスト部を選択してグループ化します。
ティ―すると右側にボーダー設定やらボックスのスタイル設定がたくさんでてくるよ。
アンダーライン（マーカー）の色がJIN色のまま
文章のアンダーラインはJINの仕様が引き継がれています。
表示崩れを最小限にする為にSWELLから提供しているプラグインを使って移行をしていきますが、移行して修正後はプラグインを停止が推奨です。
その時にアンダーラインがうまく引き継がれない可能性が高いのでこのタイミングでSWELL仕様に直しておく必要と考えました。
ティ―これもどこでJINのアンダーラインを消すのか分からなくて困ってた！
以下で修正方法を説明しますね。
マーカー線も事前に色やボーダーなどの種類を設定しておくことが出来ます。
太字はstrongタグからspanタグへ
今まで記事の中で太字をあまり意識して使っては来ませんでした。
ですがテーマ移行を機に確認してみるとテーマについてる【B】ボタンはstrongタグといって、実は単純に文字を太く強調するだけの機能ではありません。
以下の意味だと認識しています。
- 文字を太字で強調させる
- Googleに重要だよと知らせる
このstrongタグを記事内に使いすぎるとGoogleからペナルティーが来るそうです。
実際にペナルティーを受けた！！！って方は聞いたことありませんがSEOに悪影響は出てしまう可能性があります。
今回この機会に見直しをかけていくことにしました。
私はNOJIBLOGさんの記事を参考にCSSを追加して太字を使っています。
一括置き換えの方法も記載してあるのでとっても助かりました。
【事前準備】移行する時は乗り換えサポートプラグインを利用する
ここまでJINからSWELLへの移行時にの対処法をお伝えしていましたが、SWELLでは乗り換えサポートプラグインが用意されています。
そのサポートブラグインでは旧テーマのショートコードやCSSを一部引き継ぐことができるそうです。
ティ―これがなかったらもっと表示崩れしてると思う！
乗り換え用プラグインがあるテーマ
SWELLでは以下のテーマに対して乗り換えサポートプラグインの用意がありました。
- Cocoon
- AFFINGER5
- JIN
- SANGO
- STORK
- THE THOR
このプラグインがあることで一時的に表示崩れを防いで全記事のリライトも自分のペースでゆっくりと進めることができます。
メタディスクリプションは書き直しが必要
テーマを移行するとメタディスクリプションは全記事書き直しが必要となります。
SWELLの場合はテーマと切り離してプラグインをインストールして設定していくことになります。
大切なメタタグをテーマの乗り換えによって影響を防ぐ目的があるそうです。
ティ―事前にどんなの書いてるのか確認しておいた方が良いかも…
JINの乗り換えサポートプラグインを利用している場合は、ディスクリプションも引き継がれていますがプラグインを停止すると表示されなくなります。
ちなみに、私はなかじさんの動画を参考にして入力する様に変更しました。
このテンプレが基本的な型としてめちゃくちゃ使いやすいです。
SWELLのメリット｜このテーマに変えて良かった魅力とは？
SWELLに変更したら快適さに魅了されている私。
実際にどこに惹かれたのか以下で紹介させてください。
私が感じたメリットは以下の５つです。
- 専用カスタムブロックが簡単操作でオシャレサイトに
- 余分なプラグインがなくなってサイトスピードが向上
- 乗せ換えのプラグインがあるから移行がラク
- テーマのアフェリエイトが出来る
- SWELLユーザーが多くて分からない時も心強い
メリット１．専用カスタムブロックが簡単操作でオシャレサイトに
SWELLに変更して充実した専用のカスタムブロックが本当に魅力的。
ショートコードなどを仕込まないと使えないようなものも標準で用意がしてあるのです。
今まではクラシックエディターにして、タグを呼び出して…えーっと？という感じでしたが、マウスでポチポチして使えるお手軽さに魅了されています。
ティ―これ以外にもたくさんカスタムブロックがあるよ♡
以下の3つを今回はピックアップしました。
- 吹き出しが事前登録できるから呼び出しで簡単挿入
- 投稿リストがとても便利！
- 関連記事がワード検索できる
順番に説明しますね。
吹き出しが事前登録できるから呼び出しで簡単挿入
吹き出しの設定画面でアイコンや吹き出しの種類を事前に設定することが出来ます。
設定が出来たら、ふきだしの画面で右側を見ると以下のような表示なります。
ティ―毎回のよびだしがとても簡単で便利です
投稿リストがとても便利！
以下のように記事を表示させることが出来て、新着記事や人気記事、任意の記事もピックアップすることが出来ます。
ティ―新着記事や更新、人気順などが選択できる他、表示方式も選ぶことが出来ます。
関連記事がワード検索できる
内部/外部リンクを入れる一環で関連記事も貼り付けると思いますが、これが細部までこだわっている印象です。
内部リンクではURLではなくてタイトルの一部だけでも当てはまれば関連する記事が出てきます。
以下の表示設定も画像なし、テキスト表示、抜粋文なしを選択出来て柔軟に表現ができます。
メリット２．余分なプラグインがなくなってサイトスピードが向上
SWELLでは高化にする為の機能をテーマに内蔵しています。
だから余分なプラグインが必要ないのでその分、サイトが重たくならないという嬉しい仕様になっています。
以下公式サイトでも記載がありました。
ファーストビューにおける高速化機能として、
■動的なCSSや複雑なパーツのキャッシュ機能
■ページ下部にあるコンテンツの遅延読み込み
■画像・動画・iframeへ自動でLazyload付与
■メインスタイルのインライン読み込み
が利用可能になっています。
SWELL公式サイト
どう頑張ってもモバイルでのサイトスピードが赤色の20以下だったのが、たったテーマ一つ変えるだけで黄色の50以上へ改善されたのです。
ティ―それだけでストレスがちょっと減りました
メリット３．乗せ換えのプラグインがあるから移行がラク
繰り返しになりますが、SWELLでは乗り換え用にプラグインの用意があります。
そのプラグインを利用することによってサポートブラグインでは旧テーマのショートコードやCSSを一部引き継ぐことができるそうです。
対応している現在のテーマ乗せ換え用プラグインは以下です。
- Cocoon
- AFFINGER5
- JIN
- SANGO
- STORK
- THE THOR
ティ―このテーマを決める安心感はここにあったのかも♡
メリット４．テーマのアフェリエイトが出来る
SWELLのテーマではアフェリエイトをすることが可能です。
つまり私のサイトからテーマを購入いただけると私にも報酬がいただける仕組みになっています。
紹介する時は会員サイトから確認したアフェリリンクを貼り付けるだけでOK。
2021年11月SWELL独自のアフェリエイトが終了しASPと提携してアフェリエイトが継続されています。
ブロガーさんたちのサイトをちょこちょこ読ませてもらうのですが、今ではSWELL利用者も多くなってきている印象があります。
ティ―それだけ使いやすいし口コミもいいってことだよね♡
メリット5．SWELLユーザーが多くて分からない時も心強い
SWELLは比較的新しいテーマではありますがその人気ぶりからユーザーが多いのも魅力です。
これどうするんだっけ？という疑問も検索すればたいていのことは解決することが出来ます。
あともっと心強いのがSWELL購入者限定の会員サイト『SWELLERS’』のフォーラムで質問も出来ます。
そのフォーラムでは
- SWELLに関する質問
- 不具合質問
- ご要望
以上の内容について膨大な書き込みが書いてありとても参考になります。
もちろんご自身で質問してみるのもアリ。他のユーザーが答えてくれたりします。
ティ―ちょっと覗いたら温かい空間でした
SWELLに変えるデメリット｜ここだけが気になった1点
SWELLが今のところすごく気に入っていてブログを書く時間が快適になったのですが、1点だけ気になる部分を書き出すとしたら…以下になります。
金額がちょっと高い
やっぱここじゃないでしょうか？
有名どころのブログテーマの金額を書き出してみました。
| SWELL | JIN | THE THOR | アフィンガー | SANGO | |
|---|---|---|---|---|---|
| 特徴 | ・ブロックエディター完全対応 ・ブログを簡単に・楽しく・素早く書ける | ・アフィリエイトノウハウが凝縮されたテーマ | ・集客収益にこだわったテーマ ・美しく/おしゃれで/洗練 | ・「稼ぐ」に特化したテーマ | ・ユーザーフレンドリーを追求 ・プラグインでブロックエディター完全対応 |
| 買い切りorライセンス | 買い切り | 買い切り | 買い切り | 買い切り | 買い切り |
| 価格 | 17600円税込 | 14,800円税込 | 16,280円税込 | 14,800円税込 | 11,000円税込 |
| 公式サイト | 詳細を見る | 詳細を見る | 詳細を見る | 詳細を見る | 詳細を見る |
SWELLは価格だけで見ると一番高額商品だということが分かります。
その分ブロックエディターを使うのに余分なプラグインも必要がなく、テーマさえあれば快適に直感的に素早くブログを集中して書くことが出来ます。
しかもデザインが可愛いし、事前に自身の好みに合わせてカスタマイズできます。
装飾のアクションのひと手間が省けるのも魅力の１つですよね♪
ブロックエディターの時代はすぐそこにSWELLなら直感で書ける
SWELLは
- ブロックエディターで書きたい人
- オシャレデザインや装飾をこだわりたい人
- 書くことに集中したい人
には本当におすすめできるテーマです♡
筆者自身cocoonからJIN、そしてSWELLとテーマを変更してきましたが、カスタマイズするのにCSSを仕込んだりしますよね？
ですが最初からこんなに少なくて済んでいるのはSWELLだけ。
しかもプラグインを重ねなくてもテーマに落とし込んであるのでサイトスピードは早く安定しています。
現在ビジュアルエディターでブログを書いている人はそろそろブロックエディターにも触れていくのがおすすめ。
これから先も書き続ける為に早めに練習しておきたいね
というのもクラシックエディタープラグインを使っている人も現在のところ2022年まではサポートがあるようですが残りの期間もカウントダウンが始まっています。
ティ―もちろんＪＩＮのデザインもいいところもたくさんあって好き
今は書くことに集中しようと思ってブロックエディター完全対応のSWELLにしました。
たったテーマひとつ変えるだけで限られたブログ執筆時間が格段に充実して書くスピードが速くなりました。
ぜひこのブログの書きやすさをあなたにも味わってほしいです。
快適なブログライフを体験してみてください～♪
、