メキシコペソ/円(MXN/JPY)とトルコリラ/円(TRY/JPY) のスワップで不労所得目指しています

2019/03/10

【第2回】ブログのデザインを変更してみる(検証環境作成&準備編)

event_note3月 10, 2019
第2回は新しいデザインの検証環境作成&準備編です。



※本記事はBlogger向けの記事ですが考え方としてはWordPress等、他サービスにも通ずるものがあります。

現在公開している本番環境を直接変えていくという方も多いかと思いますが開発という視点に立つとそれは論外な行為です。
新しくサイトのデザインを変更、機能追加という場合は必ず検証環境を作るべきでしょう。 せっかくブログ公開してアクセス伸びてきているのにページ開いたらエラー画面出て閲覧できなくなったとか考えるだけで恐ろしいですよね💦
特にWordPressなどはサーバー周りから環境を自己管理する必要があるのでこの考えは大事にするべきだと思います。



【Bloogerの場合】

1.検証サイトを作成する

管理画面左上のブログ名をクリックすると”新しいブログ”という項目が出てくると思います。そちらより適当なブログを作成します。
(デフォルトの****.blogspot.comというサイトが作成されます)
一つのGoogleアカウントで5つまでブログを作成できるので複数サイト運営している人以外は検証環境つくるのは困らないでしょう。
足りなければ適当にGoogleアカウント取得してみてください。(無料です)

後の検証作業の為、適当に投稿したりコメントを入れたりして置くと問題点が見つかりやすいと思います。



2.本番環境のテンプレートファイルを取得(バックアップする)

現在本番環境にリリースされているテンプレートファイルを取得しておきましょう。
管理画面 - テーマの右上”バックアップ復元”ボタンを押すと下記のような画面が表示されます。
”テーマのダウンロード”ボタンを押すことでテンプレートファイル(xmlファイル)がダウンロードできます。
もし、本番環境に間違えて新しいテンプレートを適用してしまったなどしても今回ダウンロードしたテンプレートを適用すれば元通りになります。


3.カスタマイズしたいテンプレートファイルをダウンロードします。

私の場合、こちらよりファイルをダウンロードしました。
zipファイルなので適当な場所に解凍します。


4.ダウンロードしたテンプレートファイルを検証環境に適用してみる。

デモサイトで見た目、動きは確認していると思いますがとりあえずアップロードしてみましょう。

項2と同じ画面で今度は先ほどダウンロードしたxmlファイルを選んで”アップロード”をします。
アップロード後、ブログのデザインが変わっていることが確認できるはずです。


5.ブログをどんな感じにしたいか考えよう

・動きに問題ないか?
・色は何色にしよう?
・文字の大きさは?
・新しくこんな機能を追加したい。

自分の理想とするものを想像してみましょう。
どこをカスタマイズする必要があるのか?ということが見えてくると思います。




6.テンプレートファイル(xmlファイル)を変更していく

詳細な変更方法については次回ということで(-。-)y-゜゜゜

一気に変更しようと思わずに少しずつ確認しながら変えていくのがお勧めです。
その際、面倒かもしれませんが下のような流れが好ましいと思います。

①テンプレートファイル修正

②アップロード

③確認

④変更ファイルをバックアップ

①に戻る

ファイルは世代管理しておくことで最初からやり直しということがなくなり結果としては時短ができると思います。
一気にやっちゃって動かなくなったりしたら最初からスタートです。
気長にやっていきましょう(-。-)y-゜゜゜











※日付_連番のようにしておくと後から見てもわかりやすいと思います。

次回、”テンプレートファイルを変更してみる(仮)”に続きます。