BLOGレイアウト修正

この歳になるとxml,html,cssの修正はだんだんと考えるのが面倒になり、やりたくはないのだが、嫌々ながら仕方なく実施。特にxmlからの展開が理解できていない。私はこのblogは公開している本番と変更時のテストを行い確認するテスト番の2つを持っているので、手順としてテスト側にて変更を行い確認出来てから本番に移行することになる。

何せこのbloggerで新規投稿を作成時に画像追加の時、画像サイズの指定方法によって自動生成されるhtmlが異なり、自分でmodifyしたレイアウトから外れる問題が出ていた。修正したい箇所はずっと前は画像挿入後そのhtmlの定義を１画像づつ変更していたが、いつしか面倒になり、そのまま公開していたのを自動変更にしたい。基本的に基本templateをそのまま使えばよかったのに、英語版のtemplate 2つのいいとこどりをして、スライドを入れたり、不要な項目を削除したのが原因。

画像挿入は上記の画面で実像サイズを頭においてサイズを元、特大、大、中、小と選択。ここで同じ800ｘ600pixの画像をそれぞれで挿入すると、

data-original-height="600"　、 data-original-width="800"　は同じだが、展開され作成されるhtmlが異なる。

特大　　：width="640"　height="480"　　　　　　　　　　　　　　　　　　　　　　　大　　　：width="400"　height="300"　　 　　　　　　　　　　　　　　　　　　　　　  元サイズ：表示なし

<div class="separator" style="clear: both; text-align: center;">のクラス名の配下にある画像の属性の定義。cssの変更で　「separator」というクラス名を指定して変更できるので .separator img{　にしてseparatorの中で表示される画像のみ対象とした。これをしていなかったら特大　w＝640でははみ出るし、下の大のｗ＝400では小さすぎた。しかしこれを入れても縦長の画像は小さくなりすぎる。滅多に縦長は使わないから無視する。方法は取り敢えず、現在使用中のXMLをバックアップし、これを修正する。

xmlをテキストエディターで開き、CSS項目に移動し、.post-body imgで現状を確認し、その下に.separator img {　　｝の項目を追加する。修正したxmlを上書きし、uploadしてどうなったか確認。

とにかくやってみた。いいように見えるが。

こんなことをやるよりchatGptのほうが断然面白い。

Share: