はじめに

全体的なテストは テスト投稿 全体概要|左のは今のページに開きますが、別ページで見たい人向けのリンク に書いてあるのですが別途色々と仕込みましたので、こちらに詳細を書いておこうかと思います。

レイアウトにdisplay: gridを使用してますので、標準の文字はおかしなことになります。
なぜおかしくなるのかはgrid-template-columnsでエリア名が入っておりまして、.post-contentの下にある要素はそれぞれのエリアに入るような設定になっているためです。Bloggerの標準のテキストはそれらを識別するためのclassが入れられませんのであしからず。

指定できるclass

標準のhtmlの要素は分かる範囲でcontentエリアに入ります。つまりはこの文章などが入っている幅のエリアです。

次に広いのがヘッダーの入っている所で、ここはpopup(pop-up)エリアになっています。これらは、classとして、要素に付与すると幅が変わります。例えば、<p class="popout">テキスト</p>というような感じで書くことになりますが、文章で使うというよりは画像とか、広く大きく見せたいものに対して使うことを想定しています。

画像は横幅100%で表示になっているので、入る箱が大きくなればそれだけ大きく表示されます。

これがcontent
これがpopout
これがfeature
これがfull
おまけ アニメーションgif→動画化

bloggerの画像を挿入するボタンから画像を入れるのを行うとhtmlモードではdivにseparatorと言うclassが入りますが、これに追加するように<div class="separator popout"...とこんな感じで書くだけです。スマホなどの幅が狭いデバイスではサイズもその最大幅に合わせられてしまうので、幅の違いによる効果というのはなくなりますが、PCなどである程度の幅があるデバイスならそれらをアイデア次第で活かせることもあるかと思います。

画像で例をあげましたが、まとめると、

class名 今の所、指定してある要素
content すべての要素はcontentにまず入ります。
popup h1～h2
feature 特になし
full 特になし

上のテーブルの中で、contentクラスの所にも書きましたが、基本的にはすべての要素がcontent幅で入ります。それら要素に各classを追加するとその幅になるという感じです。

一部設定はいじっていますが、これはコリスで紹介されたBreakoutと言うcssのテンプレートを引用しています。
また画像を貼る場合にBloggerでは.separatorと言うdivにimgが囲まれているわけですが、imgタグにもwidthとheightが入っていたりしてcssでサイズをいじってもhtmlに直接書かれてしまっているので変更できなかったりする問題に合わせて、スクリプトでこれら属性を空にしています。
これによってcssでaspect-ratioなどが指定できるようになります。