PlantesSucculentesの雑記

子供と妻が大好きなDIYが趣味な1970s

 

@Piante3
日本の西の方から日常での出来事/想い/学びを好き勝手に書いてます。

はてなブログ初心者がカスタマイズする前にやっておくべき事 ‼︎ 後悔する前にバックアップ&テスト用ブログを作る。

こんにちはkeiです。

ブログデザインを変更したら元に戻せなくなったって経験ないですか?

私は、設定でチェック入れてるのにフォローボタンが表示されない、アーカイブにツリーが表示されない等々、様々なトラブルが発生し???になりました。

結局、最後は同じデザインテーマのブログを追加で作成し元の構文等を参照しながら、直しました。

私のように大変な目に合わないためにテストブログを作ってメインブログ丸ごとコピー(複製)した非公開ブログ作ろうって話です。

スマホアプリではなくパソコンで行います

テストブログをつくろう!「手順の流れ」

1. 新しいブログ(テストブログ)を非公開で作成する。

・非公開設定にしておかないとまったく同一のブログが複数公開されます

2. 作成したブログ(テストブログ)にメインブログと同じデザインテーマをインストールする

3. メインブログのバックアップファイル(データのエクスポート)を作成する

・デザインカスタマイズのヘッダのタイトル画像やHTML/CSS等はバックアップされません

4. 作成したブログ(テストブログ)に先ほどエクスポートしたバックアップファイルをインストールする。

5. デザインカスタマイズの各項目(Top/背景画像~Lowest/デザインCSS)の設定・構文全てをメインブログから作成したブログ(テストブログ)にコピペする

何故テストブログをおすすめするのか?

テストブログを勧める理由

カスタマイズやテーマを変更する前はバックアップ取ってから!が基本ですが

はてなブログのデータエクスポート(バックアップ)は記事・カテゴリー・コメント部分でカスタマイズ・設定は別に、保存する必要があるので結構管理が面倒なんですよね

初心者は基本コピペで編集している事が多いのでケアレスミスが生じやすくなりますし何処をどう変更したのかも分からなくなりがちです

しかも収拾がつかなくなって、初期の状態に戻そうと、テーマを再インストールしても、カスタマイズや設定はリセットされません。

それから変更して新旧デザインどっちが見やすい?どっちがいいかんじ?って時、テストブログでコピー作っておけば新旧見比べができて便利ですよね。

カスタマイズはテストブログで行い完成してから、メインブログに構文を移植する。メインブログ ⇄ テストブログでやり取りすれば、失敗しても直ぐに元に戻せます。

特に初心者はカスタマイズに時間がかかっても公開しているブログに影響はないのでお勧めです。

非公開で新しいブログ「テストブログの作り方」

はてなブログでは無料版で3つ、Pro版なら10個のブログが作成できます。

私のように初心者の方は1つしか使ってないと思うので残った分でブログを新たに作ります。

ダッシュボードを開くと下の画像の画面に切り替わります

マイブログページの̟ ⊕新しいブログを作成 をクリックします</p >

はてなブログ簡単ブログ作成画面の選択

クリックすると、かんたんブログ作成画面に切り替わります。

※上の画像では3つブログが作成されていますが、初めて追加する場合は現在のブログ1つだけ表示されています

はてなブログ簡単ブログ作成画面

1. URLを決めます。後に公開ブログに変更するかも?って人はそれなりに考えてURLは決めましょう。

2. ブログを公開したい範囲は自分のみにチェックを入れる

※デフォルトではすべての人に公開となっています。後から公開設定で変更できるので間違えても大丈夫。

3. ブログを作成をクリック

下の画面に切り替わった場合は任意のプランを選択

はてなブログのプラン選択グ

新しいブログの誕生です

設定からブログ名をテストとかバックアップとか、分かりやすい名前に変更しておきましょう!

ブログアイコンはお好みで

はてなブログブログアイコン設定画面

これでテストブログ(バックアップ用ブログ)が新しく追加されました。

はてなブログ新規ブログ追加された

新しく作成したブログは、念のため公開設定を確認しておきましょう。公開範囲が自分のみにチェックがあればOKです。

はてなブログ公開設定画面

もしすべての人に公開にチェックが入ってたら、直ぐに自分のみにチェックを入れ忘れずに変更するをクリック!

※この設定を間違えたままこの先、作業を続けると自らコピーサイトを公開するハメになっちゃいます。

次にバックアップとして同じデザインで作成する為に、メインブログと同じテーマをインストールします。

デザインテーマのインストール

私はメインブログで使わせていただいている「DUDE」を選択

1.プレビューしてインストールで適用するブログを選択する

2.今作ったブログ(バックアップ用ブログ)を選択してインストール

はてなブログテーマストアのDUDE選択中

これで同じテーマのブログがもう1つ出来ました。

当然IDが同じなのでプロフィールは同じです。

その他は真っ新な状態です。

メインブログの複製を作成する

テスト用ブログが作成できたら次は、メインブログのエクスポート(バックアップ)ファイルを作成し、テストブログへインポートします。続いてカスタマイズと設定も同一にします、要は全コピです。

エクスポート(バックアップ)のやり方

ダッシュボード]→[設定]→[詳細設定]を開く

バックアップしたいブログが選択されているか確認

はてなブログ詳細設定画面

下までスクロールするとエクスポートの項目があるので記事のバックアップと製本サービスをクリックします

はてなブログ記事のバックアップ選択

エクスポートの画面に切り替わりるので

(該当のブログ名)をエクスポートするをクリックします

すると「現在エクスポート中です」のメッセージが出て四角いアニメーションがクルクル回ります、記事数が多いと時間がかかるので待ってます。

待ってる間にご利用にあたってをよく確認してくださいね

はてなブログ記事のエクスポー

過去にエクスポートを実行した事があれば、上↑の画面ではなく下↓の画面の様に前回の作成日時が表示されているので、エクスポートしなおすをクリックする。

エクスポートが完了したらダウンロードをクリックしファイルを保存。

はてなブログ記事のダウンロード

これでひとまずバックアップは完了です。

MT(Movable Type)という形式のテキストファイルが作成され保存できました。

念のためパソコン以外のストレージにも保存しておけば安心です。

このファイルを新しく作成したブログにインポートします。

インポートのやり方

インポートするブログを選択して切り替えます。

はてなブログインポートするブログ選択

ダッシュボードの項目で中程にあるインポートをクリックすると下の画面が出ますそこで

項目 STEP1 ブログデータをアップロード直下

ファイル選択をクリック

先程保存したテキストファイルを選択して開く

選択されていませんの文字がファイル名に変わります

対象のファイルであるのを確認し文字コード選択へ進むをクリックします。

はてなブログ文字コード選択

きちんと表示されている文字コード選択[utf-8になってるはず

インポートするをクリック

はてなブログインポート選択

インポートの画面で青い進行バーが最後まで進めば完了です

はてなブログインポート中画面

ブログデータのインポートが完了しましたのメッセージが出ればブログを表示をクリックして 記事・カテゴリー・コメントが復元出来たか確認しましょう。

はてなブログファイルのインポート中

バックアップとして再度新しいファイルをインポートする場合

再度インポートすると以前にインポートした記事に上書きされずに追加になってしまいます。

バックアップとして運用するには、再度インポートする前に同じくインポートの画面にあるこれまでのインポートから、インポートを取り消すをクリックしデータを取り消す必要があります

はてなブログブログ表示

初回以降で再度インポートする場合は前回のインポートを取り消してから実行しましょう

デザインカスタマイズ、各設定を復元しよう

まずはTopの背景画像、背景色、タイトル画像の設定、タイトル画像はメインブログで使用している画像元ファイルを選択して表示位置等調整する

あとは順に各項目をメインブログからコピペ&同一設定にしていくだけです。

はてなブログインポート取り消し

はてなブログタイトル画像のファイル選択

サイドバーのモジュールの編集も抜かりなく。

※[DUDE」本来のコンセプトではヘッダー/タイトル画像で写真を入れません

はてなブログサイドバーモジュール復元

最後にデザインCSSを丸々コピペ

同様にスマホ側の設定も同一設定&コピペしましょう

最後に変更を保存するをクリックして完了です。

これでメインブログの複製が出来上がりました。

新しいブログでカスタマイズや気になるテーマを試してみる

気になるテーマやカスタマイズを新しいブログで存分に、試してみましょう。

今回作成したブログは非公開なので、テーマをインストールして、デザインが崩れたり不具合が出ても慌てることはありません。

試してみたい事をして、失敗しても逆に元のメインブログからコピペして、元に戻せば良いだけ、時間が無ければまた明日でも大丈夫です。

試してみて上手くいけば、カスタマイズした部分をメインブログに移植すればいいだけです。

また、メインブログと並べて比較する事が出来るので、テーマ違いでの印象や見え方、カスタマイズの効果もわかりやすく、失敗も少なくなります、何より初心者でも、失敗を恐れず安心して出来る事が良いところです。

Give it a try !

最後に、まとめ

今回は、私の実体験からテストブログ(バックアップ)を作成するまでの手順を書きました、私のトラブルは少しでもHTMLやCSSの知識があれば、一瞬で解消したと思います。

トラブルが起きたお陰で色々調べたり検証したりと良い経験ができ少しは知識も得られた面もありましたが、同時に無駄な時間も費やしました。

初心者だからと言ってトラブルが起きた時、訳もわからず色々触っていたら何故か解消したでは、進歩しません

拘ってHTML/CSSを学ぶ気がなくても、トラブルやカスタマイズを都度ゆっくり考えながら熟して行く事が出来れば、ある程度は理解できるようになる筈です。

今回の方法は、無料Verで複数ブログを既に運営している場合は使えませんが、何よりバックアップを取ること自体大切な事です!続ければ続ける程、その重要度は増します。

デザインカスタマイズがどうこうより、本当に大切な物、何かあって1番困るのは記事やコメントです、すべて消えてしまえば終わりです。

楽しんでブログを続ける為に!初心者目線での考えです。