最新版エディタ（標準）のアレンジ　プレビュー画面の修復

プレビュー枠の高さが縮む問題

「同じウインドウで表示」を選択してプレビューした場合、プレビュー枠の高さが、ウインドウの高さに達せず、縮んでしまいます。 下図の青枠の部分が「プレビュー枠」です。

 

ブログプレビュー枠の高さ縮小問題の解決策

 

これは、何か私の設定の問題かと思い調べるのですが、解決しません。 全く問題のない方がおられたら教えていただきたいのですが。 「PC」「スマートフォン」の表示様式を一度切り替えると、改善するのですが、最新版エディタの不具合ではないかと思えます。

 

 

以前の対処コード

CSSで改善できる様なので、対策コードを Ameblo Writer に組み込んでいました。 下は今までのコードです。

 

#js-preview {
    height: 90%; }

#js-preview-pc {
    height: 90vh !important; }

#js-preview-frame-pc {
    height: 99% !important; }

 

この対策コードでは、下の様にプレビュー枠の周囲に少し余白が出ていました。

 

ブログプレビュー枠の高さ修復

 

 

同じウインドウ表示のプレビュー

今回、余白を詰める様に、対策コードを手直しをしました。

 

/* 同じウインドウ表示のプレビュー画面の修復 */

#js-preview {
    width: 100%;
    height: calc(100% - 16px);
    overflow: hidden; }

#js-preview-pc {
    width: 100%;
    height: 100% !important; }

#js-preview-frame-pc {
    height: calc(100% - 44px) !important; }

 

プレビュー枠の高さ縮小問題、Amebaブログ編集画面

 

一見では普通のブラウザ表示に見えますが、実際は「iframe」表示された「プレビュー枠」が嵌め込まれた画面です。 思い切りウインドウ幅を狭めた時だけ、下方の横スクロールバーが2重になり、それと判ります。 しかし、普通の編集作業のウインドウ幅では、上図の様に気付かない仕上がりです。

 

このコードは、基本CSSの末尾にありますが、Ameblo Writer ver.4 を修正して更新する予定です。

 

 

別ウインドウ表示のプレビュー

これまでの対策コードは、「別ウインドウ表示のプレビュー画面」にも有効でしたが、新しい対策コードは正しく効果しません。 個別の対策コードを、やはり余白を詰める様に編纂しました。

 

結果として、「html」要素に対する修飾が必要になったため、このコードは他のセクションから独立した適用先の指定が必須になりました。

 

適用先：

「次で始まるURL」=「https://blog.ameba.jp/ucs/entry/srventryouterpreview」

 

CSSコード

/* 別ウインドウ表示のプレビュー画面の修復 */

html {
    height: calc(100% - 17px); }

body.preview {
    height: 100%;
    overflow: hidden; }

 

以上のコードを、新しいセクションとして Ameblo Writer ver.4 に追加します。