ブログを作ってみたはいいが、私の場合デザインを後回しにしていました。そろそろやってみようかなということでやってみたはいいのですが、地味にBloggerの仕様に躓いたりしたので皆さんにやり方を共有します。
これで適用されますので、サイトを確認してみて下さい。
今回は手軽な配布されているテンプレートをそのまま利用する方法を説明します。
そのメニューでHTML編集を選択します。
テンプレートの入手
まずは配布されているテンプレートを入手します。私の場合はTokyoというテンプレートを使わせて頂いてます。
以下のサイトからダウンロード可能です。
テーマへのテンプレートの適用
Bloggerのテーマへテンプレートを適用するには2つ方法があります。HTML編集とxmlファイルからの復元です。初回でも無い限り今までのテーマ編集全てが消えてしまうので、HTML編集をオススメしますが、そこは割り切って簡単なxmlファイルからの復元を一度やってしまうのもアリだと思います。
HTML編集
まずハンバーガーメニューから「テーマ」を選択します。
ここで下三角の部分を押すとメニューが表示されます。
編集前に「バックアップ」を選択して今のテンプレートをローカルに保存しておくことをオススメします。
保存したxmlファイルから次の手順で説明する「元に戻す」をすることで、間違えても元に戻すことができます。
これを選択すると下のようなHTML編集画面が開きます。ここにダウンロードしてきたxmlファイルのテンプレートをテキストエディタで開き、内容を全選択してこの編集画面に貼り付けて上書きすれば大丈夫です。
既にカスタマイズなどを入れているかどうかこの編集画面でざっと確認して、その部分だけは避けて貼り付けると良いでしょう。
このHTML編集が終わったら一番上の「︙」を押して「保存」を選択すれば適用されます。
適用されたかはサイトを開いて確認しましょう。
ちなみにこの時点ではPC版ページにしか反映されませんので、スマホで確認する場合は、一旦単純にスマホで自分のサイトを開いて、ブラウザの右上の「︙」＞「PC版サイト」にチェックをつければ確認できます。
xmlファイルから復元
入手したテンプレートファイルをそのまま取り込むこともできます。
またテーマ設定から「元に戻す」を選択します。
ここからファイルの「アップロード」を選択すれば完了です。
スマホページへの適用
私が地味に躓いたのがここです。
Tokyoのテンプレートはレスポンシブデザインのため、スマホも考慮されたテンプレートになっているのですが、テーマに適用してもスマホページへは反映されないな…と思っていました。
しばらくするまで気づかなかったのですが、原因はBloggerにはテーマにモバイルの設定という項目があり、ここを設定する必要がありました。
またテーマ設定の画面から「モバイル設定」を選択します。
ここで、「デスクトップ」を選択して「保存」を押下します。
注意点としてはプレビュー画面ではこの設定が適用されていなくても反映されてしまいますので、スマホでURLを開いて実際のページから確認しましょう。
まとめ
テンプレート適用は非常に簡単ですね。ここまでは非常に簡単なのですがここからカスタマイズしていくとなるとけっこう面倒です。
今後の記事で紹介したりしていきますので参考2なれば幸いです。
以下はこれまでに紹介したカスタマイズ関連の記事です。
0 件のコメント:
コメントを投稿