6/21(月)・6/22(火)はAmazonプライムデー!商品一覧へ

【WordPress】クラッシックからブロックに変換する時の注意事項

block-from-classic

WordPressの新しいエディタGutenberg(グーテンベルク)別名ブロックエディタは、とても記事が書きやすく作業効率が一気にアップします。

また特殊なショートコードを駆使する頻度が下がるので属人性も下がります。

あとはWordPress自体が移行を推奨しているので、今後のブログ更新で将来、ブロックに切り替えるべきだと思いますので、そのためのやり方を解説いたします。

目次

ブロックエディタに変換する意図

ブロックエディタに移行する意図は下記の4点です。

  • 記事が書きやすい(リライトしやすい)
  • クラッシックの表示崩れを解消したい
  • 無駄なCSSやJSを削除して最適化したい
  • 今後のWordPress対応に適応したい

ブロックエディタに変換する為のサポートプラグイン

ブロックエディタに変換する為のサポートはConvert To Blocksというプラグインが便利です。

  • 記事を開くと自動でブロックに変換してくれる
  • 記事一覧でクラッシックまたはブロックが一覧化される

クラッシックからブロックに変換

早速、クラッシックの記事を開いてブロックに変換していきます。

昔のSANGOの時のショートコードがたくさんあるので、全て潰します。

  • ふきだし
  • ブログカード(内部リンク)
  • ブログカード(外部リンク)
  • ボタン
  • リスト
  • テーブル
  • ステップ
すいみん

記事を表示して、そこからコピペして作業することをおすすめします。

STEP

クラッシックの文字をクリック

クラッシックの文字をクリックしてブロックに変換しましょう。

STEP

ショートコードを修正

ショートコードをブロック化します。

ふきだしのショートコード

ふきだしのショートコードです。
ふきだしブロックに変更しましょう。

[say]連動して動く簡単なリグも組むので、Spineの一通りの制作工程がわかります![/say]

ブログカード(内部リンク)のショートコード

ブログカードのショートコードです。
関連記事ブロックに変更しましょう。

[card2 id="2020" target="_blank"]

ブログカード(外部リンク)のショートコード

ブログカードのショートコードです。
関連記事ブロックに変更しましょう。

[sanko href="https://www.clipstudio.net/paint/functional_list" title="クリスタ全機能比較表へ" site="CLIP STUDIO.NET" target="_blank" rel="nofollow"]

ボタンのショートコード

ブログカードのショートコードです。
SWELLボタンブロック(またはボタンブロックに変更しましょう。

[btn href="https://www.clip-studio.com/clip_site/clipstudiopaint/scenes/manga?a8=v4ucY4bPL-BGt0_TgsT4TXQJ3I0dZPyvfsZ4fyu-grkPL-uaEtuAZXQ-g-05Q5zTHr8XB3u_H4ucms00000015383001" class="cubic2 red-bc"]CLIP STUDIO PAINT DEBUTの詳細へ[/btn]

リストのショートコード

リストのショートコードです。
リストブロックに変更しましょう。

[list class="li-chevron"]
<ul>
 	<li>複数ページの管理</li>
 	<li>複数ページ作品の印刷・書き出し</li>
 	<li>LT変換機能</li>
 	<li>共同制作の管理支援機能</li>
 	<li>プラグイン機構</li>
 	<li>ストーリー作成支援機能</li>
 	<li>入稿支援機能</li>
 	<li>プロ向けアニメーション制作機能</li>
</ul>
[/list]

テーブルのショートコード

テーブルのショートコードです。
テーブルブロックに変更しましょう。

<div class="p-sticky-table">
<table class="js-scrollable">
<thead>
<tr>
<th>項目</th>
<th>PCダウンロード版</th>
<th>PCパッケージ版</th>
<th>PC月額利用版</th>
</tr>
</thead>
<tbody>
<tr>
<th>DEBUT</th>
<td>無料</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>PRO</th>
<td>5,000(税込)</td>
<td>9,200(税込・送料込み・公式ガイドブック付き)</td>
<td>240円/月(税込)</td>
</tr>
<tr>
<th>EX</th>
<td>23,000(税込)</td>
<td>37,200(税込・送料込み・公式ガイドブック付き)</td>
<td>650円/月(税込)</td>
</tr>
</tbody>
</table>
</div>

ステップのショートコード

ステップのショートコードです。
ステップブロックに変更しましょう。

[timeline]
[tl label='STEP.1' title='Spineのダウンロード']
下記のURLからデータをダウンロードできます。
[sanko href="http://ja.esotericsoftware.com/spine-download" title="Spine: トライアル版のダウンロード" site="Spine公式サイト" target="_blank" rel="nofollow"]
[/tl]

[tl label='STEP.2' title='Spineのインストール']
ダウンロードした「SpineTrialSetup.exe」を実行してソフトを入れましょう!
[/tl]

[tl label='STEP.3' title='Spineのデータ確認']
下記のパスにデータがインストールされています。
「SpineTrial.exe」を実行するとSpineのソフトが起動します。
<code>C:\Program Files (x86)\SpineTrial</code>
※購入版の場合は
<code>C:\Program Files (x86)\Spine</code>
[/tl]

[tl label='STEP.4' title='トライアルコードの入力']
※正規版を購入した人は必要ない項目です。
「SpineTrial.exe」を起動すると電子メール入力のダイアログが表示されますのでメールアドレスと入力しましょう。
メールに「トライアルコード」が記述されているので、そのコードを入力すれば、トライアル版が使えるようになります。
<img src="https://www.cg-method.com/wp-content/uploads/2020/03/Screenshot_2020_0303_11.png" alt="" width="1403" height="350" class="alignnone size-full wp-image-10978" />

新規プロジェクトの文字を押すと作業する画面に切り替わります。
<img src="https://www.cg-method.com/wp-content/uploads/2020/03/Screenshot_2020_0303_14.png" alt="" width="933" height="700" class="alignnone size-full wp-image-10977" />

[/timeline]

すいみん

テーブルとステップの変換が結構、手間です!

クラッシックからブロックに変換する時の注意事項まとめ

以上です。

基本的にはブロックに変換してショートコードを潰します。

あとは誤字脱字や日本語のおかしい所、見出しの下に文章が足りないなど、記事を整えてあげるだけです。

目次
閉じる