普段からiPadだけでブログ更新をしているのですが、せっかくならimDRESSionsのリニューアルもiPadだけでできないものかと考えていました。
結論から言うと、リニューアルは“ほぼ”iPadだけでできます。
“ほぼ”と書いた理由は、CSSやPHPファイルをコーディングする時にソースを確認したり、リフレッシュ時にキャッシュクリアがうまくいかなかったりと、PCに頼らざるを得ない部分が出てきたから。
とはいえ、基本的にWordPressのカスタマイズはWebベースなので、iPadでできることはたくさんあります。
今回は、ブログリニューアルの構想から実装までの間に使ったアプリとサービスを紹介していこうと思います。
CONTENTS
iPadでブログリニューアル。
まずはブログリニューアル全体の流れを簡単に。
- デザイン（ロゴ、サイト）の構想。
- ブログを停止することなく、カスタマイズ中のテーマを自分だけが確認できるように設定。
- WordPressテーマで大まかなデザインベースを実装。
- CSSとPHPで細かなデザインを実装。
- テーマの「カスタマイズ」機能で仕上げる。
PCを使ったのは、4番目の作業時。ここに関してはiPadでは快適に作業できず、やむなくPCを使うことに。
CSSのコーディング自体はiPadのアプリで可能なのですが、テーマのソース確認やデバッグのためPC版Safariの開発モードを使用。
PCはこの確認用で使ったのみでした。
また、iPadではローカル環境を作ることができないため、すべて本番環境での作業となりますのでバックアップ体制は万全にしておきましょう。
1.ロゴ制作、デザインカンプ『Affinity Designer』
ベクターとラスターのどちらも使えるデザインアプリ『Affinity Designer』で、サイトデザインのカンプとロゴの制作しました。
アートボードと呼ばれるキャンバスが一つのプロジェクト内で何枚も作れるので、
ページごとにデザインカンプを分けられたり、参考資料置き場を作ったりと、構想段階で活躍してくれました。
2.WordPressプラグイン『Thema Test Drive』
カスタマイズ中のテーマを自分だけに見えるようにするため、プラグインの『Thema Test Drive』を使用。（数年前から更新のないプラグインですが、一応動きました。）
このプラグインを有効化すれば、WordPressにログインしている人にだけ違うテーマを表示することができるようになります。
本来はローカル環境を作って、自分のPC内でテストができる状態を構築するのですが、iPadではその方法がないため、このプラグインを使いました。
ログイン状態の自分にはカスタマイズしたいテーマを表示させて、他のユーザーには今までのテーマを表示させる。という風に、カスタマイズ中も他のユーザーに中途半端な状態のテーマを見せることなく作業を進めることができます。
本番環境を直接操作するのでバックアップをとり、うまくいかなくなったらすぐ戻せるようにしておきましょう。
以前紹介した「WP Thema Test」というプラグインも同じ機能ですが、後述する「yStandard Blocks」と相性が悪いのかエラーが出てしまったのでこちらを使いました。
3.デザインベースはプラグイン『yStandard Blocks』
トップページの固定ページを制作したり、リンクカードをデザインするため、WordPressプラグインの『yStandard Blocks』を使用しました。
『yStandard Blocks』特有のリンクカードやリストなどのスタイリングするために、テスト用に投稿記事を用意して確認していきました。
このテスト記事は下書き状態でも「プレビュー」表示をすれば、カスタマイズ中のテーマを反映した表示が可能です。
プレビューしながら次に紹介するコーディングアプリ『coda2』でスタイリングしていきました。
『yStandard Blocks』は、今回ベースにしたテーマ『yStandard』の純正プラグインですが、他のテーマでも使えるようなので試してみてください。
この段階で一度ベースとなるテーマの「外観」→「カスタマイズ」の項目でどのようなカスタマイズができるかを確認しておきましょう。
ただし、プラグイン『Thema Test Drive』を有効化していると、カスタマイズの保存ができないので、ここでは確認だけ。
この「カスタマイズ」項目ではデザインできない部分をCSSファイルで実装していきます。
4.コーディング『coda2』
テーマやプラグインでカスタマイズできないところは、CSSファイルやPHPファイルを書いて実装しました。
タイトルの幅や抜粋の挿入、縦書き表示。リンクカードのデザインなどです。
その時使用したアプリが『coda2』
iPadでコーディングができ、FTP機能（サーバーへファイルをアップロードする機能）もついているので、直接CSSファイルを書いていくことができる便利なアプリです。（何度も言いますが、バックアップ体制は万全にしてください）
ここでPCを使ったのですが、ソース表示やデバッグ確認、プレビューなどの使用で、コーディングは全てiPadで行いました。
https://apps.apple.com/jp/app/code-editor-by-panic/id5009062975.テーマカスタマイズの仕上げ『yStandard』
ここでプラグイン『Thema Test Drive』を無効にして、カスタマイズしたテーマを有効化しておきます。
テーマを有効化しておかないと、『カスタマイズ』で変更した項目が保存されないので注意してください。
ここからは、自分以外のブログ訪問者の人にもカスタマイズ中のテーマで表示されるので、アクセスの少ない時間に行うのがいいかなと思います。
「外観」→「カスタマイズ」から、3つ目の工程で確認しておいたカスタマイズを実装して完成です。
iPadでリニューアル。
僕の場合、CSSやPHPファイルを書き換える作業があったのでPCを使わざるを得ない場面がありましたが、使うテーマやプラグイン、そして考えたデザインによってはiPadひとつで完成します。
iPadでブログ更新している人は、ぜひブログカスタマイズにも挑戦してみてください。