(画像の高さ) (画像の幅) Bloggerのテンプレート初期化 | たけもものなんとなくな日々 たけもも

Bloggerのテンプレート初期化

2017-03-21、Bloggerに新しいテーマ(テンプレート)がありました。
Bloggerの新テーマ(テンプレート)
メッセージのスクリーンショット撮っておけばよかったと今になって反省。

テンプレートを試しているうちにレイアウト等がごちゃごちゃになってしまうことがあります。そんな時のためにBloggerのテーマ(テンプレート)の初期化の方法を教えてくださっているサイトがありましたのでご紹介します。

その前に、今現在のテーマ(テンプレート)をバックアップしておいてください。

Bloggerテーマ(テンプレート)の初期化

syunkichi様が「おしゃれな気分でプログラミング」で詳しく書かれていらっしゃいますが、わたしなりに備忘録としてまとめてみます。

Bloggerの設定画面、ダッシュボード
テーマ(テンプレート)の変更はBloggerの設定画面(ダッシュボード)から行います。
「テーマ」を選択し、使用しているテーマの「HTMLの編集」をクリックします。
BloggerのHTML編集画面
HTMLのコードが書かれているところを全て選択します。
Windowsでしたら編集画面をクリックして「Ctrl+A」でもできます。
そこに魔法のコード「空のテンプレート」を貼り付けます。
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<b:skin></b:skin>
</head>
<body>
<b:section id='mainSection'>
<b:widget id="Blog1" type="Blog">
<b:includable id="main">
</b:includable>
</b:widget>
</b:section>
</body></html>
※ 2017-11-09 上記コードの最終行に誤りがありましたので修正しました。
</html>とあるべきところが</ht3ml> になっておりました。
匿名様、ありがとうございます。

 空のテンプレートを貼り付けたBloggerのHTML編集画面 「テーマを保存」します。
「戻る」を選択すると「dreft.blogger.comの内容:保存されていない変更は失われます」というメッセージが出ますが「OK」をクリックします。
dreft.blogger.comの内容:保存されていない変更は失われます
空のテンプレートが入ったブログで使用中の画面
「ブログで使用中」のテーマが真っ白になっています。
ここで任意のテーマを適用してもよさそうなのですが、このままだとレイアウトが崩れたりなど、表示に不具合が出る場合があります。
そこで念のため、シンプルテーマ(テンプレート)を一度読み込ませます。
Bloggerのシンプル(テーマ)テンプレートを選択します
表示が崩れているシンプル(テーマ)テンプレート
これできれいなテーマ(テンプレート)が適用されるようになります。

レイアウト等設定していた内容は失われていますので、細かな設定はもう一度してくださいね。

Navbarを削除している場合の注意点

2017-03-25 追記
シンプルテーマ(テンプレート)を読み込んだ場合、Navbarが自動で組み込まれてしまいます。その場合は新テーマ(テンプレート)を読み込んでみてください。

ただし、レイアウトで手を入れないといけないことは変わらないのでどちらが楽か?ということになります。
シンプルテーマ(テンプレート)と新テーマ(テンプレート)とではベースが異なっているようなのでいろいろ試してみるのも面白そうですね。

新しいテーマ(テンプレート)を適用

Contempo」「Soho」は素通りしてしまいました。
おしゃれなテストページではないので参考になるかかなり怪しいですが、一応画像をつけますね。
Emporio」適用例
Emporioを適用したテストページ
上の記事は写真ありです。下の記事は写真なしの場合になります。
Notable」適用例
Notableを適用したテストページ
これはいいかも?と思ったのですが、このテーマ(テンプレート)はモバイル端末はいいと思うのですが、パソコンはかなり微妙な感じになりました。

「Emporio」をちょっといじった後の引っ越し予定のブログはこんな感じになりました。
縮尺も違うので本当に参考にならないかもしれません。
記事ページはこのような感じになりました。

ほかの方の検証を楽しみに待つことにします。

2 件のコメント :

  1. コードが
    /ht3ml
    になってますよ~

    返信削除
    返信
    1. ありがとうございます。
      全くもって気が付きませんでした。

      本日修正いたしました。

      削除